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

时间:2020-04-17 07:59:32

标签: android flutter dart

我要创建一个自定义栏应用,如下图所示

Image - custom bar app I want

但是我不能将菜单抽屉的底部留白,也不能将文本向左对齐,

Image - my custom app bar

我的代码

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

1 个答案:

答案 0 :(得分:0)

这是一个有效的示例。您只需对其进行自定义

@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')
      )
    );
  }
}

enter image description here