Flutter: 6 Best Packages to Create Cool Bottom App Bars

Updated: September 3, 2023 By: Guest Contributor Post a comment

Flutter provides several built-in widgets that can help you create a bottom bar for your app (BottomAppBar, BottomNavigationBar, CupertinoBottomTab, and maybe NavigationRail). However, there might be cases where you want to make a special bottom bar with stunning animation effects. In these scenarios, taking advantage of an open-source plugin is time-saving and headache-reducing. This article walks you through a list of best packages to implement cool bottom app bars in Flutter (the main criteria are the numbers of likes on pub.dev and stars on GitHub).

Convex Bottom Bar


At the time of writing, convex_bottom_bar is one of the most popular plugins on pub.dev. It helps you conveniently show a convex tab in the bottom bar.

Key features:

  • Theming supported
  • Various internal styles and hook API to override some of these internal styles
  • Builder API to customize new style on your own
  • Elegant transition animation
  • Badges

You can install the plugin by running the following command:

flutter pub add convex_bottom_bar

Then use it like so:

import 'package:convex_bottom_bar/convex_bottom_bar.dart';

  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Home'),
      TabItem(icon: Icons.map, title: 'Discovery'),
      TabItem(icon: Icons.add, title: 'Add'),
    onTap: (int i) => print('click index=$i'),

Bottom Navy Bar


This package helps you create a beautiful and animated bottom navigation bar.

By default, BottomNavyBar uses your app’s theme. However, you can customize it as you want. To install the package, perform the following command:

flutter pub add bottom_navy_bar

Sample usage:

import 'package:bottom_navy_bar/bottom_navy_bar.dart';

// the currently selected page
int _selectedIndex = 0;

   /* Other code */
   bottomNavigationBar: BottomNavyBar(
    selectedIndex: _selectedIndex,
    showElevation: true,
    onItemSelected: (index) => setState(() {
                _selectedIndex = index;
                    duration: Duration(milliseconds: 300), curve: Curves.ease);
    items: [
        icon: Icon(Icons.home),
        title: Text('Home'),
        activeColor: Colors.red,
          icon: Icon(Icons.favorite),
          title: Text('Favorites'),
          activeColor: Colors.purpleAccent
          icon: Icon(Icons.settings),
          title: Text('Settings'),
          activeColor: Colors.blue

Animated Bottom Navigation Bar


This package helps you implement an animated bottom nav bar with a notch (or without a notch). It is highly customizable and easy to use.


flutter pub add animated_bottom_navigation_bar

Quick example:

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';

int _bottomNavIndex = 0;

   floatingActionButton: FloatingActionButton(/* ... */),
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   bottomNavigationBar: AnimatedBottomNavigationBar(
      icons: iconList,
      activeIndex: _bottomNavIndex,
      gapLocation: GapLocation.center,
      notchSmoothness: NotchSmoothness.verySmoothEdge,
      leftCornerRadius: 32,
      rightCornerRadius: 32,
      onTap: (index) => setState(() => _bottomNavIndex = index),
      //other params

Salomon Bottom Bar

Some Insights:

This package helps you easily implement an animated, succinct, gorgeous bottom bar.

To install the plugin, run the command below:

flutter pub add salomon_bottom_bar

Then use it like so:

import 'package:salomon_bottom_bar/salomon_bottom_bar.dart';

int _currentIndex = 0;

        appBar: AppBar(
          title: Text(MyApp.title),
        bottomNavigationBar: SalomonBottomBar(
          currentIndex: _currentIndex,
          onTap: (i) => setState(() => _currentIndex = i),
          items: [
            /// Home
              icon: Icon(Icons.home),
              title: Text("Home"),
              selectedColor: Colors.purple,

            /// Likes
              icon: Icon(Icons.favorite_border),
              title: Text("Likes"),
              selectedColor: Colors.pink,

            /// Search
              icon: Icon(Icons.search),
              title: Text("Search"),
              selectedColor: Colors.orange,

            /// Profile
              icon: Icon(Icons.person),
              title: Text("Profile"),
              selectedColor: Colors.teal,

Bottom Bar With Sheet


This package helps you implement a kind of combination of a bottom nav bar with a bottom sheet. You can also add a big action button as needed. It’s hard to be depicted by words. Let’s see the GIF below for more understanding:


flutter pub add bottom_bar_with_sheet

Quick example:

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';


  bottomNavigationBar: BottomBarWithSheet(
    controller: _bottomBarController,
    bottomBarTheme: const BottomBarTheme(
      decoration: BoxDecoration(color: Colors.white),
      itemIconColor: Colors.grey,
    items: const [
      BottomBarWithSheetItem(icon: Icons.people),
      BottomBarWithSheetItem(icon: Icons.favorite),

Bubble Bottom Bar


Another nice package for making bottom app bars in Flutter.


flutter pub add bubble_bottom_bar

Quick example:

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

/* ... */
  floatingActionButton: FloatingActionButton(
          onPressed: (){},
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  bottomNavigationBar: BubbleBottomBar(
          opacity: .2,
          currentIndex: currentIndex,
          onTap: changePage,
          borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
          elevation: 8,
          fabLocation: BubbleBottomBarFabLocation.end, //new
          hasNotch: true, //new
          hasInk: true, //new, gives a cute ink effect
          inkColor: Colors.black12, //optional, uses theme color if not specified
          items: <BubbleBottomBarItem>[
              BubbleBottomBarItem(backgroundColor: Colors.red, icon: Icon(Icons.dashboard, color: Colors.black,), activeIcon: Icon(Icons.dashboard, color: Colors.red,), title: Text("Home")),
              BubbleBottomBarItem(backgroundColor: Colors.deepPurple, icon: Icon(Icons.access_time, color: Colors.black,), activeIcon: Icon(Icons.access_time, color: Colors.deepPurple,), title: Text("Logs")),
              BubbleBottomBarItem(backgroundColor: Colors.indigo, icon: Icon(Icons.folder_open, color: Colors.black,), activeIcon: Icon(Icons.folder_open, color: Colors.indigo,), title: Text("Folders")),
              BubbleBottomBarItem(backgroundColor: Colors.green, icon: Icon(Icons.menu, color: Colors.black,), activeIcon: Icon(Icons.menu, color: Colors.green,), title: Text("Menu"))

Wrapping Up

We’ve covered the most popular open-source bottom bar packages for Flutter. All of them are null-safety and well-documented. Choose from them the one that suits your needs. If you find something obsolete or incorrect, please let us know by leaving a comment.

Flutter is awesome and there are so many interesting things to learn. Keep your motivation and continue strengthening your skills by taking a look at the following articles:

You can also tour around our Flutter topic page or Dart topic page for the most recent tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles