如何在Flutter中更改Drawer的整体背景颜色

Question

首先，我是颤振的新手，所以我很困惑如何更改抽屉颤振中的“整个”背景颜色。

我设法将 ListTile 和所谓的 DrawerHeader 更改为我想要的颜色，但其余部分（ListTile 下面全是白色）。在 DrawerHeader 下面有一行我并不真正想要的线，但我无法摆脱它。

这是代码

    import 'package:flutter/material.dart';
import '../style/theme.dart' as style;

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // width: MediaQuery.of(context).,
      child: Drawer(
        elevation: 0,
        child: ListView(
          children: <Widget>[
            Container(
              height: 170,
              width: 170,
              padding: EdgeInsets.only(top:30),
              color: style.Colors.secondColor,
              child: Column(children: <Widget>[
                Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child: Image.asset('images/circle.png',width: 80, height: 80,),),
                  //TODO ganti logo
                ),
              ],),
            ),
            Container(
              color: style.Colors.secondColor,
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.help_outline_sharp),
                    title: Text('Help', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('About us', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是现在情况的照片

另一个问题 如果我想在底部放置一个 ListTile 该怎么办？ （如注销）

Answer 1

要更改抽屉的背景颜色，您只需将抽屉小部件与容器交换并为容器指定颜色即可

class MyDrawer extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return Drawer(
        elevation: 0,
        child: Container(
          color: Colors.blue,
        child: ListView(
          children: <Widget>[
            Container(
              height: 170,
              width: 170,
              padding: EdgeInsets.only(top:30),
              color: Colors.red,
              child: Column(children: <Widget>[
                Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child: Image.asset('images/circle.png',width: 80, height: 80,),),
                ),
              ],),
            ),
            Container(
              color: Colors.red,
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.help_outline_sharp),
                    title: Text('Help', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('About us', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这可以是您可以使用的最终代码，它可以回答您的所有三个问题

class MyDrawer extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                Container(
                  height: 170,
                  width: 170,
                  padding: EdgeInsets.only(top:30),
                  color: Colors.blue,
                  child: Column(children: <Widget>[
                    Material(
                      borderRadius: BorderRadius.all(Radius.circular(100)),
                      child: Padding(padding: EdgeInsets.all(20.0),
                                     child: Image.asset('images/circle.png',width: 80, height: 80,),),
                    ),
                  ],
                 ),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline_sharp),
                  title: Text('Help', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.person),
                  title: Text('About us', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ListTile(
              leading: Icon(Icons.logout),
              title: Text('Logout')
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

要更改颜色，请将抽屉小部件包装在主题小部件中，如下所示：

Scaffold(
  drawer:Theme(
    data:Theme.of(context).copyWith(
     canvasColor://the desired color will go here
    ),
    child:Drawer(/*drawer content*/)
  )
)

希望这对某人有用

Answer 3

两种方法：

您可以使用DrawerThemeData：

return MaterialApp(
  theme: ThemeData(
   drawerTheme: const DrawerThemeData(
     backgroundColor: Color(0xff24191b),
   ),
  ),
 );

或者canvasColor（不仅影响抽屉，还影响整个脚手架小部件）：

return MaterialApp(
  theme: ThemeData(
   canvasColor: const Color(0xff24191b),
  ),
 );