CODEWITHSUNDEEP
fluttershapes
jamesbug
jamesbug

Reputation: 11

bottom navigation bar flutter shape rounded

I have a bottom navigation bar in Flutter with a floating action button. The problem is that the shape is too angular and it needs to be more rounded. I have manually moved the shape to the middle, but I can't get the rounded shape as desired in the picture. Below you can see the code for the shape in the ShapeDecoration.

Picture of the Bottom Navigation Bar

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;
}

Upvotes: 1

Views: 3022

Answers (1)

Deepak Lohmod
Deepak Lohmod

Reputation: 2272

Use animated_bottom_navigation_bar plugin. Code:-

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
  ),
);

Upvotes: 1

Related Questions