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

Question

下面是我的代码，我已经能够将drawerheader更改为黑色，但是当我做color: Colors.grey[800]对于listtiles，只有它的区域被灰色覆盖，剩余的额外空间是白色的..

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: () {},
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

在此处输入图像描述当前 state 的图像在下面

Answer 1

将您的列表视图保存在 Container 中并为该容器指定颜色。

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

Answer 2

我没有完全问你问题......但我猜测 header 是黑色的，但只有瓷砖被灰色覆盖，剩余空间为白色。（默认颜色）。

如果是这种情况，那么您可以用一个容器包装您的列表视图并将其设置为灰色。 通过这样做，新添加的灰色容器将充当背景颜色。

Answer 3

将您的列表视图保存在 Container 中并为该容器指定颜色。

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

Answer 4

只需用 Theme 小部件包装您的驱动程序并替换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: () {},
              ),
            ],
          ),
        ],
      ),
    ),
  ),

同样在这种情况下，您不再需要 Container above Column