更改颤振抽屉背景颜色

Posted 2023-04-13

【中文标题】更改颤振抽屉背景颜色

【英文标题】：Change Flutter Drawer Background Color

【发布时间】：2018-06-05 17:18:54

【问题描述】：

如何更改颤振导航抽屉的背景颜色？ 似乎没有颜色或背景颜色属性。

【问题讨论】：

抽屉文档列出了 BackgroundColor 属性，但它似乎不存在。奇怪。

【参考方案1】：

在Drawer 的child 属性中构建ListView 时，可以将Drawer 的不同部分包装在Container 中，并使用Container 的color 属性.

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),
                  );
                ),
              ),
            )
          ],
        ),
      ),

如果您已经有了一致的着色设计，一个更好的选择是在您的应用程序根目录的主题属性下定义您的ThemeDataDrawerHeader，并且正文将跟随您的canvasColor，所以你需要覆盖其中一个的值来改变颜色：

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

       ....),
)

【讨论】：

感谢ThemeData 的建议。恕我直言，使用一致的配色方案是一种方法。

【参考方案2】：

用Theme 包裹Drawer 的最佳方式，

例如：

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        //other scaffold items
        drawer: Theme(
           data: Theme.of(context).copyWith(
                 canvasColor: Colors.blue, //This will change the drawer background to blue.
                 //other styles
              ),
              child: Drawer(
                 child: Column(
                    children: <Widget>[
                       //drawer stuffs
                    ],
                 ),
             ),
        );
  

【讨论】：

只对透明背景有效

canvas key 是我正在搜索的，谢谢

这应该是最佳答案

【参考方案3】：

最简单的方法可能是将ListView 包裹在Container 中并指定其颜色，如下所示：

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

【参考方案4】：

要更改抽屉页眉颜色，请使用打击代码

---

UserAccountsDrawerHeader(
  accountName: Text("Ashish Rawat"),
  accountEmail: Text("[e-mail]"),
  decoration: BoxDecoration(
    color: const Color(0xFF00897b),
  ),
  currentAccountPicture: CircleAvatar(
    backgroundColor: Theme.of(ctxt).platform == TargetPlatform.ios
        ? const Color(0xFF00897b)
        : Colors.white,
    child: Text(
      "A",
      style: TextStyle(fontSize: 40.0),
    ),
  ),
),

【参考方案5】：

您可以使用此代码；

drawer: Drawer(
        child: Container(
          //child: Your widget,
          color: Colors.red,
          width: double.infinity,
          height: double.infinity,
        ),
      )

【参考方案6】：

普通背景

只需使用 primarySwatch 设置您想要的主题颜色：ThemeData

中的 Colors.brown 属性

class MyApp extends StatelessWidget 
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: appTitle,
      theme: new ThemeData(
        primarySwatch: Colors.brown, // Your app THEME-COLOR
      ),
      home: MyHomePage(title: appTitle),
    );
  

渐变背景 将 gradient 属性添加到 AppBar。

@override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text("profyl.org",
              style: TextStyle(color: Colors.white),
              textDirection: TextDirection.ltr),
          flexibleSpace: Container(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [
                    const Color(0xFF3366FF),
                    const Color(0xFF00CCFF),
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
          ),
        ),
        body: HomeListPage(),
        drawer: DrawerPage());
  

【参考方案7】：

试试这个。

  @override
  Widget build(BuildContext context) 
    return Drawer(
      child: Container(
        color: Colors.black,
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [

          ],
        ),
      ),
    );
  

【参考方案8】：

最简单的方法：

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
         decoration: BoxDecoration(color:Theme.of(context).bottomAppBarColor),
    )],
  ),
)

【参考方案9】：

这会有所帮助

 drawer: Drawer(
    child: Container(
      color: Colors.blueAccent,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            decoration: BoxDecoration(
              color: Color(0xFF56ccf2),
            ),
            accountName: Text("User Name Goes"),
            accountEmail: Text("[e-mail]"),
            currentAccountPicture: CircleAvatar(
              backgroundColor:
              Theme.of(context).platform == TargetPlatform.iOS
                  ? Color(0xFF56ccf2)
                  : Colors.white,
              child: Text("TK",
                style: TextStyle(fontSize: 50,
                  color: Colors.lightGreenAccent,),),
            ),
          ),
          ListTile(
            title: Text('Home',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                )),
            contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
            trailing: Icon(Icons.arrow_right,
              color: Colors.white,),
            onTap: () 
              Navigator.of(context).pop();
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) => HomeScreen()));
            ,
          ),
        ],
      ),
    ),
  ),

【讨论】：

由于这是一些相当广泛的代码，您可能应该添加一些解释或相关文档，例如文档。

@F***Bettag 好的。下次我尝试回答问题时会这样做。谢谢

【参考方案10】：

您可以将抽屉中的任何物品包装在一个用扩展小部件包裹的容器中。因此，您可以在那里更改容器的颜色。这样的事情会起作用。

Drawer(
    child: Expanded(
      child: Container(
       color: Colors.red,
       child: Text('Tabs'),
      ),
    ),
  )