web-dev-qa-db-fra.com

Flutter

Comment changer la couleur d'arrière-plan d'un tiroir de navigation flottant? Il ne semble pas exister de propriété color ou background-color.

navigation-drawerflutterdrawer
7
AlexL

Lorsque vous créez votre ListView dans la propriété child de votre Drawer, vous pouvez envelopper vos différentes sections de la Drawer dans une Container et utiliser la propriété color de la Container.

 enter image description here 

drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new Container(child: new DrawerHeader(child: new CircleAvatar()),color: Colors.tealAccent,),
            new Container (
              color: Colors.blueAccent,
              child: new Column(
                children: new List.generate(4, (int index){
                  return new ListTile(
                    leading: new Icon(Icons.info),
                  );
                }),
              ),
            )
          ],
        ),
      ),

Une meilleure alternative si vous avez déjà une conception de coloration cohérente dans votre esprit est de définir votre ThemeData sous la propriété theme de la racine de votre application, la DrawerHeader et le corps suivront votre canvasColor, de sorte que vous devez remplacer la valeur d'une. d'entre eux pour changer la couleur:

 enter image description here 

return new MaterialApp(
....
theme: new ThemeData(
       canvasColor: Colors.redAccent,

       ....),
)
16
aziza

Le moyen le plus simple serait probablement d’envelopper la ListView dans une Container et de spécifier sa couleur comme suit:

drawer: Drawer(
  child: Container(color: Colors.red,
    child: new ListView(
      ...
    )
  )
)
2
JonasH