Barre de navigation du système Flutter et couleur de la barre d'état

Question

Comment changer le système NavBar en utilisant Android Studio et flutter?

Je suppose que ce n'est pas dans le fichier main.Dart, et je dois parcourir les fichiers système Android, mais quand j'ai essayé de modifier le style.xml, l'éditeur de thème ne m'a pas laissé modifier l'une des couleurs.

Toute aide serait appréciée, je voulais avoir un NavBar léger pour aller avec un AppBar bas léger.

Answer 1

Remarque: cela nécessite une version plus récente de Flutter car elle fait référence aux API ajoutées en juin 2018.

Vous pouvez créer un SystemUiOverlayStyle personnalisé à l'aide du constructeur par défaut. La couleur de la barre de navigation du système y est définie. Mais pour éviter de définir un grand nombre de valeurs nulles, utilisez la méthode copyWith pour mettre à jour les valeurs d'un thème clair/foncé existant.

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

Vous pouvez impérativement définir la couleur de navigation du système à l'aide des méthodes statiques SystemChrome.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

Cependant, si vous avez plusieurs widgets qui définissent cette valeur, ou utilisez le matériau AppBar ou Cupertino NavBar, votre valeur peut être remplacée par eux. Au lieu de cela, vous pouvez utiliser la nouvelle API AnnotatedRegion pour indiquer à flutter de basculer automatiquement vers ce style chaque fois que certains widgets sont visibles. Par exemple, si vous souhaitez utiliser le thème ci-dessus chaque fois que vous êtes sur un certain itinéraire, vous pouvez l'envelopper dans un widget AnnotatedRegion comme ceci.

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

Cela ne sera pas changer votre thème à la valeur précédente si vous sautez l'itinéraire cependant

Answer 2

Vous pouvez utiliser la classe SystemChrome pour modifier la couleur de la barre d'état et de la barre de navigation.

import 'package:flutter/services.Dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.blue, // navigation bar color
  statusBarColor: Colors.pink, // status bar color
));

Answer 3

Vous pouvez simplement appeler SystemChrome.setSystemUIOverlayStyle:

import 'package:flutter/services.Dart

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);