appbar上的圆形底部

Question

我想制作一个圆底的appbar，如下所示：

我将如何实现这样的appbar？我试过阅读CustomPainter的文档，但我觉得这不是那样的。

Answer 1

您可以使用BoxDecoration将border-radius和shadow添加到Container / DecoratedBox。

 new Container(
    height: 200.0,
    decoration: new BoxDecoration(
      color: Colors.orange,
      boxShadow: [
        new BoxShadow(blurRadius: 40.0)
      ],
      borderRadius: new BorderRadius.vertical(
          bottom: new Radius.elliptical(
              MediaQuery.of(context).size.width, 100.0)),
    ),
  ),

虽然您可能会注意到：这不是完美的像素。边框不是实际的圆圈，而是省略号。这可能是不受欢迎的。

更现实但更复杂的方法是根据屏幕宽度绘制一个半径为圆的圆。哪个会溢出容器。然后剪辑它。

你需要一些东西：LayoutBuilder，以获得宽度。 ClipRect不要在容器的限制之外涂漆。和OverflowBox一样，布置一个比它的父级更大的圆。

class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox.fromSize(
      size: preferredSize,
      child: new LayoutBuilder(builder: (context, constraint) {
        final width = constraint.maxWidth * 8;
        return new ClipRect(
          child: new OverflowBox(
            maxHeight: double.infinity,
            maxWidth: double.infinity,
            child: new SizedBox(
              width: width,
              height: width,
              child: new Padding(
                padding: new EdgeInsets.only(
                  bottom: width / 2 - preferredSize.height / 2),                    
                child: new DecoratedBox(
                  decoration: new BoxDecoration(
                    color: Colors.orange,
                    shape: BoxShape.circle,
                    boxShadow: [
                      new BoxShadow(color: Colors.black54, blurRadius: 10.0)
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(200.0);
}

故意居中，只是为了展示剪辑如何工作

Answer 2

你的上面对我有很大的帮助，我只是在努力做一件事，那就是让圆棒的高度变得更小。

我改变了这一行的高度

 Size get preferredSize => const Size.fromHeight(200.0);

但它不会对它产生足够的影响，我甚至将其设置为0，仍然是高位。

Answer 3

在Flutter中，您可以在具有shape属性的AppBar小部件中使用自定义形状，但SliverAppBar小部件中缺少此属性

  AppBar(
    title: Text('Hello'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),