Flutter Gems is a curated list of 6700+ useful Dart & Flutter packages that are categorized based on functionality.

Discord Medium LinkedIn Twitter

Top Flutter Bottom Navigation Bar packages

Last updated: February 25, 2025

Bottom Navigation Bar is a navigation component displaying three to five destinations at the bottom of a screen. Each destination is usually represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. Bottom Tab Bar is another navigation component used to switch between different screens in an app. It is typically used with a TabBar and a TabBarController.

As Bottom Navigation Bar is one of the most used UI component, and many Flutter packages exist that ease the process of adding bottom navigation bar with custom designs and engaging micro-interactions in your app.

The complete list of Bottom Navigation Bar, Bottom Bar, Bottom Tab Bar Flutter packages is provided below.


convex_bottom_bar
👍 2.79K   ⬇️ 21.8K
Dart 3 compatible
Maintenance Status: Poor

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.

persistent_bottom_nav_bar Card Image
persistent_bottom_nav_bar
👍 2.27K   ⬇️ 17.6K
Dart 3 compatible
Maintenance Status: Good

A highly customizable persistent/static bottom navigation bar for flutter. Includes up-to 20 styles.

curved_navigation_bar Card Image
curved_navigation_bar
👍 2.01K   ⬇️ 17.8K
Dart 3 compatible
Maintenance Status: Good

Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.

google_nav_bar Card Image
google_nav_bar
👍 1.53K   ⬇️ 42.8K
Dart 3 compatible
Maintenance Status: Good

A modern google style nav bar which could be use as a bottom navigation bar or tabbar, the design strictly follows the cuberto UI/UX on dribbble.

animated_bottom_navigation_bar Card Image
animated_bottom_navigation_bar
👍 1.32K   ⬇️ 19.3K
Dart 3 compatible
Maintenance Status: Good

Animated Bottom Navigation Bar Widget implementation inspired by a Dribble Shot.

bottom_navy_bar Card Image
bottom_navy_bar
👍 1.32K   ⬇️ 4.2K
Dart 3 compatible
Maintenance Status: Good

A beautiful and animated bottom navigation. The navigation bar uses your current theme, but you are free to customize it.

salomon_bottom_bar Card Image
salomon_bottom_bar
👍 1.06K   ⬇️ 7K
Dart 3 compatible
Maintenance Status: Average

Yet another bottom navigation bar, but with a few key promises.

flutter_snake_navigationbar
👍 644   ⬇️ 2.4K
Dart 3 compatible
Maintenance Status: Poor

Flutter bottom navigation bar widget with snake animation on change item.

custom_navigation_bar
👍 520   ⬇️ 1.9K
Dart 3 compatible
Maintenance Status: Poor

A custom navigation bar with bubble click effect. Inspired by The Boring Flutter Development Show EP. 35.

dot_navigation_bar Card Image
dot_navigation_bar
👍 405   ⬇️ 1.4K
Dart 3 compatible
Maintenance Status: Average

Simple smooth animations, providing a nice and cleanUI/UX Bottom Nav Bar.

persistent_bottom_nav_bar_v2 Card Image
persistent_bottom_nav_bar_v2
👍 363   ⬇️ 12.3K
Dart 3 compatible
Maintenance Status: Good

A highly customizable bottom navigation bar for Flutter. Includes 17 prebuilt styles but can also be used with your custom style.

animated_notch_bottom_bar Card Image
animated_notch_bottom_bar
👍 352   ⬇️ 3.8K
Dart 3 compatible
Maintenance Status: Good

This package helps you to achieve animated notch bottom navigation bar with any widget as children.

water_drop_nav_bar Card Image
water_drop_nav_bar
👍 351   ⬇️ 881
Dart 3 compatible
Maintenance Status: Good

Bottom navigation bar, it has unique water drop effect. When water droplet falls it marks seleted item.

sliding_clipped_nav_bar Card Image
sliding_clipped_nav_bar
👍 311   ⬇️ 727
Dart 3 compatible
Maintenance Status: Good

Bottom Navigation Bar with sliding menu icon and text with clipping effect, it also has ripple effect when tapped.

flashy_tab_bar2 Card Image
flashy_tab_bar2
👍 262   ⬇️ 1.3K
Dart 3 compatible
Maintenance Status: Good

Another nice animated tab bar

flutter_floating_bottom_bar Card Image
flutter_floating_bottom_bar
👍 251   ⬇️ 614
Dart 3 compatible
Maintenance Status: Good

A flutter package that allows showing a floating widget that can be used as a tab bar, bottom navigation bar, etc. The widget reacts to scrolling events too.

stylish_bottom_bar Card Image
stylish_bottom_bar
👍 241   ⬇️ 3.1K
Dart 3 compatible
Maintenance Status: Good

A collection of stylish bottom navigation bars like animated bottom bar and bubble bottom bar for flutter.

motion_tab_bar Card Image
motion_tab_bar
👍 236   ⬇️ 1.3K
Dart 3 compatible
Maintenance Status: Average

An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customizable.

floating_bottom_navigation_bar
👍 189   ⬇️ 32.5K
Dart 3 compatible
Maintenance Status: Poor

Highly customizable floating bottom navigation package for flutter.

circular_bottom_navigation Card Image
circular_bottom_navigation
👍 208   ⬇️ 579
Dart 3 compatible
Maintenance Status: Good

Circular Bottom Navigation

fluid_bottom_nav_bar
👍 187   ⬇️ 445
Dart 3 compatible
Maintenance Status: Poor

A beautiful bottom navigation with a fluid animation. Bar color, icons and animation speed are fully customizable.

scroll_bottom_navigation_bar
👍 186   ⬇️ 76
Dart 3 compatible
Maintenance Status: Poor

This package allow hide or show bottom navigation bar while scrolling

awesome_bottom_bar Card Image
awesome_bottom_bar
👍 170   ⬇️ 3K
Dart 3 compatible
Maintenance Status: Average

Awesome Bottom Bar

bottom_bar_matu Card Image
bottom_bar_matu
👍 163   ⬇️ 216
Dart 3 compatible
Maintenance Status: Good

A beautiful and animated bottom navigation bar, easy to implementation with icon data or customize with your own widget.

cuberto_bottom_bar Card Image
cuberto_bottom_bar
👍 149   ⬇️ 1.1K
Dart 3 compatible
Maintenance Status: Good

An animated bottom navigation bar supporting drawer icon at start or end or can be used with the drawer icon and is provided with 2 different styles.

bottom_bar
👍 129   ⬇️ 861
Dart 3 compatible
Maintenance Status: Poor

Bottom bar helps create an optimized bottom navigation bar with beautiful animations

circle_nav_bar Card Image
circle_nav_bar
👍 110   ⬇️ 3.7K
Dart 3 compatible
Maintenance Status: Good

A package provides an easy way to make circle button nav bar in Flutter project

floating_bottom_bar Card Image
floating_bottom_bar
👍 110   ⬇️ 554
Dart 3 compatible
Maintenance Status: Average

This package provides sliding animation to floating action button located at the center and bottom tab button.

hidable Card Image
hidable
👍 105   ⬇️ 1.3K
Dart 3 compatible
Maintenance Status: Average

Widget, that can make any static located widget hidable (scroll to hide).

curved_labeled_navigation_bar Card Image
curved_labeled_navigation_bar
👍 88   ⬇️ 3K
Dart 3 compatible
Maintenance Status: Good

Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.

motion_tab_bar_v2 Card Image
motion_tab_bar_v2
👍 88   ⬇️ 610
Dart 3 compatible
Maintenance Status: Good

An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customizable.

bottom_nav_layout
👍 87   ⬇️ 112
Dart 3 compatible
Maintenance Status: Poor

A quick and powerful app layout. Supports page state preservation, lazy page loading, and has a page backstack.

floating_frosted_bottom_bar
👍 86   ⬇️ 265
Dart 3 compatible
Maintenance Status: Poor

Frosted bottom navigation bar allows you to create frsoted bottom bar that also reacts on scroll events.

crystal_navigation_bar Card Image
crystal_navigation_bar
👍 81   ⬇️ 817
Dart 3 compatible
Maintenance Status: Good

Sleek, crystal-clear blur bottom navigation bar with dynamic indicator for seamless app navigation.

bottom_bar_page_transition
👍 72   ⬇️ 126
Dart 3 compatible
Maintenance Status: Poor

To display animation between pages while using bottom bar navigation.

responsive_navigation_bar Card Image
responsive_navigation_bar
👍 68   ⬇️ 401
Dart 3 compatible
Maintenance Status: Good

A responsive bottom navigation bar. Very beginner friendly. Feel free to contribute.

floating_navbar
👍 68   ⬇️ 218
Dart 3 compatible
Maintenance Status: Good

Customisable, clean looking bottom floating navbar. FloatingNavBar comes with multiple customization options - colors, page indicators, etc. This can be used as an alternative to the default BottomNavigationBar

molten_navigationbar_flutter
👍 66   ⬇️ 338
Dart 3 compatible
Maintenance Status: Poor

An animated bottom navigation bar with many parameters to tweak.

contactus Card Image
contactus
👍 65   ⬇️ 226
Dart 3 compatible
Maintenance Status: Average

contactus is the package which helps the developers to add their contact information with ease. Developers can add many important details such as website, email, phone number, etc.

pandabar
👍 64   ⬇️ 281
Dart 3 compatible
Maintenance Status: Poor

A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.

cool_nav Card Image
cool_nav
👍 51   ⬇️ 71
Dart 3 compatible
Maintenance Status: Average

A collection of really awesome, easy to use Bottom Navigation Bars.

bart
👍 50   ⬇️ 749
Dart 3 compatible
Maintenance Status: Good

A bottom navigation bar using navigator 2 for switching tabs

fancy_bar
👍 46   ⬇️ 79
Dart 3 compatible
Maintenance Status: Poor

An fancy yet beautiful flutter widget to use with the bottomNavigationBar, supports on selected and works with any widgets.

dot_curved_bottom_nav Card Image
dot_curved_bottom_nav
👍 41   ⬇️ 254
Dart 3 compatible
Maintenance Status: Good

Stunning Animating Curved Shape Around Indicator Navigation Bar. Adjustable color, background color, animation curve, animation duration.

r_nav_n_sheet Card Image
r_nav_n_sheet
👍 41   ⬇️ 88
Dart 3 compatible
Maintenance Status: Good

Animated, modern and highly customisable bottom navigation bar for flutter.

rolling_bottom_bar
👍 38   ⬇️ 133
Dart 3 compatible
Maintenance Status: Poor

Package to show a dynamic bottom bar with a ball as indicator.

circle_bottom_navigation Card Image
circle_bottom_navigation
👍 36   ⬇️ 107
Dart 3 compatible
Maintenance Status: Good

An animated, beauty and functional Bottom Navigation Bar you app.

flip_box_bar_plus
👍 34   ⬇️ 52
Dart 3 compatible
Maintenance Status: Poor

A 3D BottomNavigationBar inspired by Dribbble design by Dannniel

draggable_customized_btn_navy_bar
👍 32   ⬇️ 56
Dart 3 compatible
Maintenance Status: Average

draggable_customized_btn_navy_bar, Drag and drop all your items, customize your bottom navigation in the best way.

curved_nav_bar
👍 30   ⬇️ 281
Dart 3 compatible
Maintenance Status: Poor

Bottom nav bar with FAB, You can use FAB as a middle tab or perform other operations like, open popup or open camera.

scrollable_reorderable_navbar
👍 29   ⬇️ 51
Dart 3 compatible
Maintenance Status: Poor

A bottom nav bar that can be scrolled when there are than 5 nav items to display. It also let user swipe items position and item can be deleted from the navbar.

blur_bottom_bar
👍 28   ⬇️ 348
Dart 3 compatible
Maintenance Status: Poor

Flutter blur bottom bar is a recreation of the ios tab view with material desifn for android and ios

custom_line_indicator_bottom_navbar
👍 28   ⬇️ 217
Dart 3 compatible
Maintenance Status: Poor

A fully customisable bottom navbar with top,bottom indicator and gradients.

bottom_sheet_expandable_bar
👍 27   ⬇️ 74
Dart 3 compatible
Maintenance Status: Poor

A package to show and bottom bar with the capability to expand and show a bottom sheet

global_bottom_navigation_bar
👍 25   ⬇️ 51
Dart 3 compatible
Maintenance Status: Poor

Global Bottom Navigation bar simple to integrate, Also you have the ability to add global App bar with adding an object from app bar in main file when you use this library.

pinterest_nav_bar
👍 25   ⬇️ 2
Dart 3 compatible
Maintenance Status: Poor

A new Flutter package project.

bottom_animation
👍 24   ⬇️ 41
Dart 3 compatible
Maintenance Status: Poor

Flutter Bottom Navigation Bar | if you want bottom navigation with smooth animation add this package .

shaped_bottom_bar
👍 24   ⬇️ 39
Dart 3 compatible
Maintenance Status: Poor

Fully customizable bottom navigation bar with multiple built-in shapes and support custom shapes also with built-in transition animations

ultimate_bottom_navbar Card Image
ultimate_bottom_navbar
👍 20   ⬇️ 62
Dart 3 compatible
Maintenance Status: Average

Ultimate Bottom Navigation Bar is a customizable bottom navigation bar for your Flutter applications.

rounded_tabbar_widget
👍 18   ⬇️ 87
Dart 3 compatible
Maintenance Status: Poor

A simple flutter package for creating a TabBarView layout with custom Tabbar.

sweet_nav_bar Card Image
sweet_nav_bar
👍 12   ⬇️ 115
Dart 3 compatible
Maintenance Status: Good

This package is to build gradiant and floating Navigation Bar with a few lines of code.

navigation_view Card Image
navigation_view
👍 8   ⬇️ 79
Dart 3 compatible
Maintenance Status: Average

NavigationView is a Flutter package that provides a customizable navigation bar with animated transitions.

stage_navigation_bar Card Image
stage_navigation_bar
👍 8   ⬇️ 48
Dart 3 compatible
Maintenance Status: Good

A Flutter package for beautiful navigation bar with animation when select item.

animated_botton_navigation Card Image
animated_botton_navigation
👍 7   ⬇️ 65
Dart 3 compatible
Maintenance Status: Good

An animated bottom navigation bar for Flutter, designed to provide a smooth and visually appealing transition between tabs.you can use like docunment

glow_bottom_app_bar Card Image
glow_bottom_app_bar
👍 5   ⬇️ 51
Dart 3 compatible
Maintenance Status: Good

Simple Bottom App Bar with Glowing transition effect to provide a beautiful effect for navigation

flexi_bottom_nav
👍 1   ⬇️ 33
Dart 3 compatible
Maintenance Status: Good

FlexiBottomNavigation is a customizable bottom navigation widget for Flutter. It allows you to easily create a bottom navigation bar with configurable icons, labels, and colors, giving you the flexibility to tailor the navigation experience to your app's needs.

expandable_bottom_bar
👍 339   ⬇️ 184

Maintenance Status: Poor

Animatable bottom app bar with expandable sheet. Use me if you need cool bottom bar!

fancy_bottom_navigation
👍 229   ⬇️ 318

Maintenance Status: Poor

An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customisable..

bubble_bottom_bar
👍 223   ⬇️ 279

Maintenance Status: Poor

BubbleBottomBar is a Flutter widget

ff_navigation_bar
👍 159   ⬇️ 71

Maintenance Status: Poor

Configurable bottom navigation bar with raised highlight and shadow

flashy_tab_bar
👍 150   ⬇️ 36

Maintenance Status: Poor

Another nice animated tab bar

titled_navigation_bar
👍 144   ⬇️ 470

Maintenance Status: Poor

A beautiful, clean and simple bottom navigation bar with smooth animation on click. This package is high customizable, read more bellow for more details.

bottom_personalized_dot_bar
👍 98   ⬇️ 31

Maintenance Status: Poor

Bottom Personalized Dot Bar, Drag and drop all your items, customize your bottom navigation in the best way.

extended_navbar_scaffold
👍 88   ⬇️ 7

Maintenance Status: Poor

A Custom Extended Scaffold with Expandable and Floating Navigation Bar

bubbled_navigation_bar
👍 72   ⬇️ 47

Maintenance Status: Poor

Stunning Animating Bubbled Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration. Working with PageView via controller param.

navbar_router
👍 67   ⬇️ 284

Maintenance Status: Good

A flutter package to build advanced bottomnavbar with minimal code and hassle

rolling_nav_bar
👍 63   ⬇️ 54

Maintenance Status: Poor

A Flutter nav bar with a rolling active indicator behind each icon

custom_navigator
👍 51   ⬇️ 64

Maintenance Status: Poor

A flutter package that makes it easy to create your own navigator anywhere in the widget tree.

jumping_bottom_nav_bar
👍 46   ⬇️ 31

Maintenance Status: Poor

Jumping Bottom Navigation Bar for Flutter.

inkblob_navigation_bar
👍 37   ⬇️ 37

Maintenance Status: Poor

A custom navigation bar with smooth & dynamic ink blob transition effect.

navigation_action_bar
👍 36   ⬇️ 27

Maintenance Status: Poor

A beautiful modern Navigation Bar along with a Floating Action Bar.

ss_bottom_navbar
👍 32   ⬇️ 43

Maintenance Status: Poor

Flutter modern bottom nav bar.

expanding_bottom_bar
👍 17   ⬇️ 31

Maintenance Status: Poor

A bottom navigation bar with expanding titles and icons when clicked.

neos_bottom_navigation
👍 14   ⬇️ 29

Maintenance Status: Poor

A bottom navigation bar widget that is made to be customized

gradient_bottom_navigation_bar
👍 12   ⬇️ 2

Maintenance Status: Poor

A material Bottom Navigation Bar with a linear gradient option.