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

【问题标题】：Creating Smoother Border Radius Curves in Flutter在 Flutter 中创建更平滑的边界半径曲线
【发布时间】：2020-11-14 19:16:09
【问题描述】：

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

这是我的脚手架代码 -

    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，但未能成功

感谢帮助

【问题讨论】：

youtube.com/watch?v=FhlI6SpevW8 这个视频应该会有所帮助。
@Mansur 视频非常复杂，可以使用画家简单地实现这一点。不过，谢谢，我结束了编写自己的绘画小部件
能分享一下解决办法吗
@BasantaKc 更新了我的答案中的链接。如果有帮助考虑支持它:)

标签： flutter flutter-layout flutter-design

【解决方案1】：

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

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

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

输出如下：

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

【讨论】：