如何在 flutter 中更改为我的 DrawerMenuBar 背景 colors？

Question

Below is my code, i've been able to change the drawerheader to black, but the when i did color: Colors.grey[800] for the listtiles, only it's area is covered in grey, the remaining extra space is white..

drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  Container(
                    height: 130,
                    child: DrawerHeader(
                      child: new Text(
                        'Hi Bolade',
                        style: TextStyle(color: Colors.white),
                      ),
                      decoration: BoxDecoration(
                        color: Colors.black,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.zero,
                    margin: EdgeInsets.zero,
                    decoration: BoxDecoration(
                      color: Colors.grey[800],
                    ),
                    child: Column(
                      children: [
                        ListTile(
                          leading: Icon(Icons.home),
                          title: Text('Dashboard'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: FaIcon(FontAwesomeIcons.tree),
                          title: Text('Savings'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.trending_up),
                          title: Text('Investments'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.account_box_sharp),
                          title: Text('Products'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.wallet_membership),
                          title: Text('Wallet'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.card_giftcard),
                          title: Text('Cards & Bank'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.card_giftcard),
                          title: Text('Share & Earn'),
                          onTap: () {},
                        ),
                        ListTile(
                          leading: Icon(Icons.chat),
                          title: Text('Support'),
                          onTap: () {},
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

enter image description here Image of the current state here below

Answer 1

Keep your listview inside a Container and give a color to this container.

Container(
color: Colors.grey[800]
child: ListView(
.... 
)
)

Answer 2

I didn't get you question completely.....But I'm guessing that the header is black as expected, but only the tiles are covered in the grey color and the remaining space is white.(the default color).

If this is the case then you can maybe wrap your listview with a container and give it the grey color. By doing this the newly added grey container will act as a background color.

Answer 3

Keep your listview inside a Container and give a color to this container.

    Container(
height: MediaQuery.of(context).size.height,
    color: Colors.grey[800]
    child: ListView(
    .... 
    )
    )

Answer 4

just wrap your Driver with Theme widget and replace canvasColor

  drawer: Theme(
    data: Theme.of(context).copyWith(canvasColor: Colors.grey[800]),
    child: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          Container(
            height: 130,
            child: DrawerHeader(
              child: Text('Hi Bolade', style: TextStyle(color: Colors.white)),
              decoration: BoxDecoration(color: Colors.black),
            ),
          ),
          Column(
            children: [
              ListTile(
                leading: Icon(Icons.home),
                title: Text('Dashboard'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.trending_up),
                title: Text('Savings'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.trending_up),
                title: Text('Investments'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.account_box_sharp),
                title: Text('Products'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.wallet_membership),
                title: Text('Wallet'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.card_giftcard),
                title: Text('Cards & Bank'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.card_giftcard),
                title: Text('Share & Earn'),
                onTap: () {},
              ),
              ListTile(
                leading: Icon(Icons.chat),
                title: Text('Support'),
                onTap: () {},
              ),
            ],
          ),
        ],
      ),
    ),
  ),

also in this case you don't need Container above Column anymore