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

Question

我正在尝试通过运球设计在颤动中创建一个 bottomappbar，我希望这些曲线像设计一样平滑，但浮动操作按钮的槽口不如设计中的槽口平滑。我想不出另一种方法来实现这一目标。

这是我的脚手架代码 -

    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 使用 Custom painter，但没有成功

感谢帮助

Answer 1

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

实现它

第一条四贝塞尔曲线
然后在中心2条三次贝塞尔曲线，
再次结束四边形贝塞尔曲线。

然后用 Material 包装 ClipPath 小部件并提供透明背景和 100 的高度。

输出如下：

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

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

Creating Smoother Border Radius Curves in Flutter

flutter

flutter-layout

flutter-design