简体   繁体   English

Flutter:更改背景颜色抽屉菜单而不更改颜色应用栏

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM