flutter - 在 Flutter 中创建更平滑的边界半径曲线

Question

我正在尝试从运球设计中创建一个底部应用栏，我希望这些曲线像设计一样平滑，但是浮动动作按钮的凹槽不像设计中的那样平滑。我想不出另一种方法来实现这一目标。

这是我的脚手架代码-

    bottomNavigationBar: ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40), topRight: Radius.circular(40)),
    child: Container(
      child: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blue,
        child: SizedBox(
          height: height * 0.12,
          width: width,
        ),
      ),
    ),
  ),
  floatingActionButton: Container(
    margin: EdgeInsets.all(8),
    width: 80.0,
    height: 80.0,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        size: 25.0,
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

左图是我想要实现的，右图是我已经实现的，请注意第一张图片中的平滑边框。我尝试将自定义画家用于 quadraticBezierCurve，但未能成功

帮助表示赞赏

标签： flutterflutter-layoutflutter-design

Answer 1

在花了很多时间之后，我编写了自己的自定义类，它扩展了 CustomClipper 并使用 ClipPath 小部件能够使用它来实现它

• 第一条四边贝塞尔曲线

• 然后在中心 2 三次贝塞尔曲线，

• 再次结束四边形贝塞尔曲线。

然后用 Material andd 包裹 ClipPath 小部件，给出透明背景和 100 的高度。

输出如下：

参考代码：https ://github.com/sardapv/NavBar-CurvedShape-FromDribbleDesign