[英]Flutter: Change background color drawer menu without change color appbar
I'm looking to create a custom bar app like the image below我正在寻找创建一个自定义栏应用程序,如下图所示
Image - custom bar app I want图片 - 我想要的自定义栏应用程序
However I am not able to leave the bottom of the menu drawer white, nor align my text to the left, and it is getting like this但是我无法将菜单抽屉的底部留白,也无法将我的文本向左对齐,它变得像这样
Image - my custom app bar图片 - 我的自定义应用栏
My code我的代码
return Scaffold(
appBar: AppBar(
actions: <Widget>[
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Hi'),
Text('@Name'),
],
),
SizedBox(
width: 10,
),
CircleAvatar(backgroundColor: Colors.white),
SizedBox(
width: 8,
),
CircleAvatar(
backgroundColor: Colors.white,
),
SizedBox(
width: 16,
),
],
),
],
),
],
),
body: Container(),
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Name'),
accountEmail: Text('Email'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.black,
child: Text('N'),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text("Home"),
)
],
),
),
);
This is a working example.这是一个工作示例。 You just have to customize it
你只需要自定义它
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//centerTitle: true,
title: Column(
children: <Widget>[
Text("Hola "),
Text("Senior"),
],
),
leading: Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Material(
elevation: 0,
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
bottomRight: Radius.circular(16),
),
color: Colors.yellow,
child: Icon(Icons.menu)),
),
actions: [
CircleAvatar(
backgroundColor: Colors.white,)
]
),
body: Center(
child : Text('Content')
)
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.