如何在 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