底部导航栏颤动形状圆润答案

【问题标题】：bottom navigation bar flutter shape rounded底部导航栏颤动形状圆润
【发布时间】：2021-11-28 10:30:17
【问题描述】：

我在 Flutter 中有一个底部导航栏，带有一个浮动操作按钮。问题是形状太有棱角，需要更圆润。我已经手动将形状移动到中间，但我无法获得图片中所需的圆形。您可以在下面看到 ShapeDecoration 中形状的代码。

class MyBorderShape extends ShapeBorder {
  MyBorderShape();

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  double holeSize = 70;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    print(rect.height);
    return Path.combine(
      PathOperation.difference,
      Path()
        ..addRRect(
            RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2.5)))
        ..close(),
      Path()
        ..addOval(Rect.fromCenter(
            center: rect.center.translate(0, -rect.height / 2),
            height: holeSize,
            width: holeSize))
        ..close(),
    );
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}

【问题讨论】：

标签： flutter shapes

【解决方案1】：

使用animated_bottom_navigation_bar 插件。代码：-

Scaffold(
   body: Container(), // your page body over here
   floatingActionButton: FloatingActionButton(
      //params
   ),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: AnimatedBottomNavigationBar(
    elevation: 0,
    icons: const [
      Icons.home,
      Icons.home,
      Icons.home,
      Icons.home,
    ],
    activeIndex: currentIndex,
    gapLocation: GapLocation.center,
    notchSmoothness: NotchSmoothness.smoothEdge,//for more curve use NotchSmoothness.verySmoothEdge
    leftCornerRadius: 0,
    rightCornerRadius: 0,
    onTap: onTapChangePage,
    //other params
  ),
);

【讨论】：