Question

首先,一刀切,一味混淆如何改变“组合”背景颜色,以冲淡。

i 设法将我的清单Tile和我所谓的“提炼者”改为有色人意,但其余部分(列在清单中)都是白人。下面的一条线是,不要真的想要,而是可以去掉。

这里是法典

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

这里是目前局势的照片。

https://i.stack.imgur.com/LXVw3.png”rel=“nofollow noreferer”> 页: 1

Another Question what if i want to put a single ListTile on the bottom? (like log out)

Answer 1

为了改变提炼者的背景颜色,你只能把提炼者Widget与集装箱相交换,并给集装箱以颜色。

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

To change the color, wrap the Drawer widget in a Theme widget as follows:

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

希望对他人有用

Answer 3

两种方法:

您可使用提款:

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

Or canvasColor (doesn t only effect the sources, but the all scafraft widget):

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

Answer 4

附录2024

u 可以使用backgroundColor

Drawer(
    backgroundColor: Colors.black,
    child: XXWIDGET()
)

友情链接