web-dev-qa-db-fra.com

Style BottomNavigationBar dans Flutter

J'essaie Flutter et j'essaie de changer la couleur du BottomNavigationBar de l'application, mais tout ce que j'ai pu faire, c'est changer la couleur du BottomNavigationItem (icône et texte).

Voici où 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,
      ),
    );
  }

Un peu plus tôt, je pensais l'avoir compris en modifiant canvasColor en vert sur le thème principal de mon application, mais cela a gâché le schéma de couleurs complet 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(),
    );
  }
}
dartflutterbottomnavigationview
26
spongyboss

Il n'y a pas d'option pour spécifier la couleur de fond de BottomNavigationBar mais pour changer le canvasColor. Une façon de le réaliser sans gâcher toute l'application serait d'envelopper BottomNavigationBar dans un Theme avec l'option désiré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 ça t'as aidé!

76
Hemanth Raj

enter image description here

Auparavant, il n'existait aucun moyen direct de définir les couleurs, mais vous pouvez maintenant l'utiliser.

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

La réponse acceptée n'est pas totalement fausse. Cependant, BottomNavigationBar a en fait une propriété de backgroundColor. Selon la documentation

Si le type est BottomNavigationBarType.shifting et que les éléments ont le paramètre BottomNavigationBarItem.backgroundColor défini, la propriété backgroundColor de l'élément éclaboussera et remplacera cette couleur.

Cela signifie que backgroundColor de BottomNavigation sera remplacé par les éléments individuels backgroundColor car le type par défaut est BottomNavigationBarType.shifting.

Pour résoudre ce problème, ajoutez simplement la propriété suivante au widget déclaré BottomNavigationbar.

type: BottomNavigationBarTyle.fixed,

Note: Si vous le souhaitez, vous devez toutefois déclarer les couleurs de chaque élément ou encapsuler le widget permettant de remplacer la couleur d'arrière-plan du ou des widgets enfants.

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

1
MagicMike

Essayez d’emballer votre BottomNavigationBar dans un Container, puis définissez-le color.

Exemple:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new Container(
        color: Colors.green,
        child: 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,
        ),
      );
    );
  };
0
Billybogz

Ajoutez simplement la propriété backgroundColor à BottomNavigationBarwidget.

@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,
      ),
    );
  }
0
mjhansen3