How to create custom bottom navigation bar in flutter

Question

How to create custom bottom navigation bar in flutter with different custom shape. how to create custom rounded container with gradient background for bottom navigation bar buttons. How to make simple ease-in animation on it.

Answer 1

You can use the animated_bottom_navigation_bar package to achieve your design.

Here is the package link: animated_bottom_navigation_bar

Here is the code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: ClipRRect(
        borderRadius: BorderRadius.circular(100),
        child: FloatingActionButton(
          backgroundColor: AppColors.black,
          child: const Icon(Icons.music_note_outlined),
          onPressed: () {},
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: AnimatedBottomNavigationBar(
        icons: const [Icons.abc, Icons.baby_changing_station],
        activeIndex: _bottomNavIndex,
        gapLocation: GapLocation.center,
        notchSmoothness: NotchSmoothness.softEdge,
        onTap: (index) => setState(() => _bottomNavIndex = index),
        // other params
      ),
    );
  }

Expected output: