如何在Flutter中实现圆角BottomAppBar？

Question

我想创建一个类似于这个的圆形BottomAppBar。
圆形BottomAppBar：

但它看起来像这样... 编码BottomAppBar：

如何去掉那个白色部分？

    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
      child: Padding(
        padding: const EdgeInsets.only(bottom:20.0),
        child: BottomAppBar(
    
   shape: CircularNotchedRectangle(),
   child: new Row(
        
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            color: Colors.white,
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            color: Colors.white,
            onPressed: () {},
          ),
        ],
    ),
    color: Colors.blueGrey,
    ),
      )
    ); ```

- Jayvardhan Patil

Answer 1

正如@Jagadish建议的那样，我使用了Shape: RoundedRectangleBorder来获得圆形的BottomAppBar。 然而，要获得凹口条，我使用了：

    shape: AutomaticNotchedShape(
RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(25),
 ),
StadiumBorder(),
    ),
   ... //Codes=
  ),

这也为扩展浮动操作按钮以及（我认为）带有不同形状的按钮提供了一个凹口。

- Jayvardhan Patil

Answer 2

App bar小部件有一个shape属性，您应该使用它来获得所需的结果，将您的代码更改为以下内容

BottomAppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
    ),
   ... //Your codes
  ),

- Jagadish

---

谢谢！但我想保留圆角矩形和浮动按钮在中心的圆缺口矩形。所以是否可能同时将形状设置为RoundedRectangle和CircularNotchedRectangle？ - Jayvardhan Patil

请查看https://pub.dev/packages/convex_bottom_bar，这可能对您有所帮助！如果不适用，请告诉我，我将找到另一个。 - Jagadish

我使用了 shape: AutomaticNotchedShape(RoundedRectangle(), StadiumBorder())。它达到了我的预期效果。 - Jayvardhan Patil