在Flutter中自定义AppBar

Question

我正在使用一个抽屉，在AppBar操作中有两个平面按钮。

我想使其具有椭圆形的背景。像这样：

我尝试将AppBar包装在PreferredSize中，但无法使按钮垂直居中。有人知道该怎么做吗？

Answer 1

您似乎想使用实现AppBar的无状态窗口小部件创建自定义PreferredSize：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {

  CustomAppBar({...}) : preferredSize = Size.fromHeight(60.0);

  @override
  final Size preferredSize;

  @override
  Widget build(BuildContext context) {
    return CustomBar();
  }
}

然后，您应该能够使用自己喜欢的样式和小部件放置来创建自定义应用栏

Answer 2

似乎我缺少一个SafeArea小部件。

PreferredSize(
          preferredSize: Size.fromHeight(50.0), // h
          child: SafeArea(
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20.0)),
                color: Colors.black54,
              ),
              child: AppBar(