Style BottomNavigationBar dans Flutter

Question

Je suis en train d'essayer Flutter et j'essaie de changer la couleur de l'icône BottomNavigationBar sur l'application, mais tout ce que j'ai pu faire, c'est changer la couleur de l'image. BottomNavigationItem (icône et texte).

C'est ici que je déclare mon BottomNavigationBar :

class _BottomNavigationState extends State<BottomNavigationHolder>{

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
      ),
    );
  }

Tout à l'heure, j'ai cru que j'avais trouvé la solution en éditant canvasColor pour le vert dans le thème principal de mon application, mais cela a perturbé l'ensemble de l'agencement des couleurs de l'application :

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.green
      ),
      home: new FirstScreen(),
    );
  }
}

Answer 1

Il n'y a pas d'option pour spécifier la couleur d'arrière-plan de BottomNavigationBar mais pour modifier le canvasColor . Une façon d'y parvenir sans gâcher l'ensemble de l'application serait d'encapsuler BottomNavigationBar dans un Theme avec l'aide souhaitée canvasColor .

Exemple :

  bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // sets the background color of the `BottomNavigationBar`
        canvasColor: Colors.green,
        // sets the active color of the `BottomNavigationBar` if `Brightness` is light
        primaryColor: Colors.red,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
    child: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.add),
          title: new Text("Add"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.delete),
          title: new Text("Delete"),
        )
      ],
    ),
  ),

J'espère que cela vous aidera !

Answer 2

Auparavant, il n'y avait pas de moyen direct de définir les couleurs, mais maintenant vous pouvez utiliser.

BottomNavigationBar(
  backgroundColor: Colors.red,
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.white,
  ...
)

Answer 3

La réponse acceptée n'est pas entièrement fausse. Cependant, la réponse acceptée n'est pas tout à fait fausse, BottomNavigationBar possède en effet une propriété de backgroundColor . Selon la documentation

Si le type est BottomNavigationBarType.shifting et que les éléments ont défini BottomNavigationBarItem.backgroundColor, la couleur de fond de l'élément remplacera cette couleur.

Cela signifie que le BottomNavigation sera remplacé par la couleur d'arrière-plan de l'élément individuel car le type par défaut est BottomNavigationBarType.shifting .

Pour remédier à ce problème, il suffit d'ajouter la propriété suivante à l'élément déclaré BottomNavigationbar widget.

type: BottomNavigationBarType.fixed,

Note : Si vous souhaitez toutefois obtenir l'effet de décalage, vous devrez déclarer des couleurs pour chaque élément ou envelopper le widget qui permet de remplacer la couleur d'arrière-plan du widget enfant.

C'est-à-dire quelque chose comme Container widget.

Answer 4

Essayez d'envelopper votre BottomNavigationBar dans un Container puis définir son color .

Exemple :

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages(),
      bottomNavigationBar:new Container(
        color: Colors.green,
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: const Icon(Icons.home),
                title: Text("Home")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.work),
                title: Text("Self Help")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.face),
                title: Text("Profile")
            )
          ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        ),
      );
    );
  };

Answer 5

Il suffit d'ajouter le backgroundColor à la propriété BottomNavigationBar widget.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        backgroundColor: Colors.black45,
      ),
    );
  }