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

Question

我正在尝试从Dribble设计中创建一个Flutter底部应用栏，我希望这些曲线能像设计一样平滑，但是浮动操作按钮的缺口不如设计中的那么平滑。我无法想到另一种实现方法。

这是我的Scaffold代码 -

    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,

左边的图片是我想要实现的，右边的图片是我已经实现的，请注意第一张图片中的平滑边界。我尝试使用Custom painter和quadraticBezierCurve，但没有成功。 感谢帮助。

- minigeek

---

这个视频应该会有所帮助。请点击链接观看：https://www.youtube.com/watch?v=FhlI6SpevW8 - undefined

@Mansur，那个视频太复杂了，其实只需要使用绘图工具就能轻松实现这个功能。不过还是谢谢你的建议，我最后还是自己写了一个绘制小部件。 - undefined

你能分享解决方案吗？ - undefined

@BasantaKc 在我的答案中更新了链接。如果有帮助，请考虑点赞它:) - undefined

Answer 1

花费了很多时间后，我编写了自己的自定义类，它继承了CustomClipper并使用ClipPath小部件，通过以下方式实现：

• 第一个二次贝塞尔曲线

• 然后在中心点使用2个三次贝塞尔曲线

• 最后再使用二次贝塞尔曲线。

然后用Material包装ClipPath小部件，并给予透明背景和100的高程。

输出如下：

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

- minigeek