Flutter Gems
Flutter Gems is a curated list of 7100+ useful Dart & Flutter packages that are categorized based on functionality.
Top Flutter Bottom Navigation Bar packages
Last updated: March 18, 2026
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.92K ⬇️ 12.2K
Dart 3 compatibleMaintenance Status: Poor
A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.
persistent_bottom_nav_bar
👍 2.37K ⬇️ 11.6K
Dart 3 compatibleMaintenance Status: Average
A highly customizable persistent/static bottom navigation bar for flutter. Includes up-to 20 styles.
curved_navigation_bar
👍 2.09K ⬇️ 14.3K
Dart 3 compatibleMaintenance Status: Average
Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.
google_nav_bar
👍 1.66K ⬇️ 34.3K
Dart 3 compatibleMaintenance Status: Average
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
👍 1.43K ⬇️ 14.2K
Dart 3 compatibleMaintenance Status: Average
Animated Bottom Navigation Bar Widget implementation inspired by https://dribbble.com/shots/7134849-Simple-Tab-Bar-Animation
bottom_navy_bar
👍 1.36K ⬇️ 5.3K
Dart 3 compatibleMaintenance Status: Average
A beautiful and animated bottom navigation. The navigation bar uses your current theme, but you are free to customize it.
salomon_bottom_bar
👍 1.12K ⬇️ 4.7K
Dart 3 compatibleMaintenance Status: Poor
Yet another bottom navigation bar, but with a few key promises.
flutter_snake_navigationbar
👍 671 ⬇️ 1.2K
Dart 3 compatibleMaintenance Status: Poor
Flutter bottom navigation bar widget with snake animation on change item.
custom_navigation_bar
👍 531 ⬇️ 1.8K
Dart 3 compatibleMaintenance Status: Poor
A custom navigation bar with bubble click effect. Inspired by The Boring Flutter Development Show EP. 35.
persistent_bottom_nav_bar_v2
👍 432 ⬇️ 12.1K
Dart 3 compatibleMaintenance Status: Good
A highly customizable bottom navigation bar for Flutter. Includes 17 prebuilt styles but can also be used with your custom style.
dot_navigation_bar
👍 432 ⬇️ 894
Dart 3 compatibleMaintenance Status: Poor
Simple smooth animations, providing a nice and cleanUI/UX Bottom Nav Bar.
animated_notch_bottom_bar
👍 409 ⬇️ 6.2K
Dart 3 compatibleMaintenance Status: Good
This package helps you to achieve animated notch bottom navigation bar with any widget as children.
water_drop_nav_bar
👍 393 ⬇️ 601
Dart 3 compatibleMaintenance Status: Average
Bottom navigation bar, it has unique water drop effect. When water droplet falls it marks seleted item.
sliding_clipped_nav_bar
👍 335 ⬇️ 560
Dart 3 compatibleMaintenance Status: Poor
Bottom Navigation Bar with sliding menu icon and text with clipping effect, it also has ripple effect when tapped.
stylish_bottom_bar
👍 325 ⬇️ 5.1K
Dart 3 compatibleMaintenance Status: Good
A collection of stylish bottom navigation bars like animated bottom bar and bubble bottom bar for flutter.
flutter_floating_bottom_bar
👍 320 ⬇️ 3K
Dart 3 compatibleMaintenance 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.
flashy_tab_bar2
👍 275 ⬇️ 1K
Dart 3 compatibleMaintenance Status: Poor
One another nice animated tab bar (Flutter Version) (inspired by https://github.com/Cuberto/flashy-tabbar)
motion_tab_bar
👍 258 ⬇️ 801
Dart 3 compatibleMaintenance Status: Poor
An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customizable.
floating_bottom_navigation_bar
👍 199 ⬇️ 29.2K
Dart 3 compatibleMaintenance Status: Poor
Highly customizable floating bottom navigation package for flutter.
circular_bottom_navigation
👍 221 ⬇️ 731
Dart 3 compatibleMaintenance Status: Poor
Circular Bottom Navigation (or maybe a tab bar)
fluid_bottom_nav_bar
👍 199 ⬇️ 431
Dart 3 compatibleMaintenance Status: Poor
A beautiful bottom navigation with a fluid animation. Bar color, icons and animation speed are fully customizable.
awesome_bottom_bar
👍 188 ⬇️ 3.9K
Dart 3 compatibleMaintenance Status: Poor
Awesome Bottom Bar
scroll_bottom_navigation_bar
👍 189 ⬇️ 142
Dart 3 compatibleMaintenance Status: Poor
This package allow hide or show bottom navigation bar while scrolling
bottom_bar_matu
👍 171 ⬇️ 259
Dart 3 compatibleMaintenance Status: Average
A beautiful and animated bottom navigation bar, easy to implementation with icon data or customize with your own widget.
circle_nav_bar
👍 155 ⬇️ 2.8K
Dart 3 compatibleMaintenance Status: Average
A package provides an easy way to make circle button nav bar in Flutter project
cuberto_bottom_bar
👍 153 ⬇️ 310
Dart 3 compatibleMaintenance Status: Average
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.
curved_labeled_navigation_bar
👍 136 ⬇️ 2.1K
Dart 3 compatibleMaintenance Status: Average
Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.
bottom_bar
👍 137 ⬇️ 744
Dart 3 compatibleMaintenance Status: Good
Bottom bar helps create an optimized bottom navigation bar with beautiful animations
crystal_navigation_bar
👍 128 ⬇️ 1.1K
Dart 3 compatibleMaintenance Status: Good
Sleek, crystal-clear blur bottom navigation bar with dynamic indicator for seamless app navigation.
hidable
👍 118 ⬇️ 737
Dart 3 compatibleMaintenance Status: Poor
Widget, that can make any static located widget hidable (scroll to hide).
floating_bottom_bar
👍 113 ⬇️ 401
Dart 3 compatibleMaintenance Status: Good
This package provides sliding animation to floating action button located at the center and bottom tab button.
motion_tab_bar_v2
👍 94 ⬇️ 559
Dart 3 compatibleMaintenance Status: Average
An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customizable.
floating_frosted_bottom_bar
👍 94 ⬇️ 304
Dart 3 compatibleMaintenance Status: Poor
Frosted bottom navigation bar allows you to create frsoted bottom bar that also reacts on scroll events.
bottom_nav_layout
👍 88 ⬇️ 174
Dart 3 compatibleMaintenance Status: Poor
A quick and powerful app layout. Supports page state preservation, lazy page loading, and has a page backstack.
responsive_navigation_bar
👍 79 ⬇️ 501
Dart 3 compatibleMaintenance Status: Good
A responsive bottom navigation bar. Very beginner friendly. Feel free to contribute.
molten_navigationbar_flutter
👍 74 ⬇️ 209
Dart 3 compatibleMaintenance Status: Poor
An animated bottom navigation bar with many parameters to tweak.
bottom_bar_page_transition
👍 74 ⬇️ 159
Dart 3 compatibleMaintenance Status: Poor
To display animation between pages while using bottom bar navigation.
floating_navbar
👍 73 ⬇️ 170
Dart 3 compatibleMaintenance Status: Average
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
navbar_router
👍 70 ⬇️ 189
Dart 3 compatibleMaintenance Status: Good
A flutter package to build advanced bottomnavbar with minimal code and hassle
contactus
👍 66 ⬇️ 285
Dart 3 compatibleMaintenance Status: Poor
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
👍 66 ⬇️ 153
Dart 3 compatibleMaintenance Status: Poor
A fancy bottom navigation bar for pandas. Pandabar designed for new neumorphic design trend.
cool_nav
👍 54 ⬇️ 91
Dart 3 compatibleMaintenance Status: Poor
A collection of really awesome, easy to use Bottom Navigation Bars.
bart
👍 52 ⬇️ 1.3K
Dart 3 compatibleMaintenance Status: Average
A bottom navigation bar using navigator 2 for switching tabs
dot_curved_bottom_nav
👍 48 ⬇️ 212
Dart 3 compatibleMaintenance Status: Poor
Stunning Animating Curved Shape Around Indicator Navigation Bar. Adjustable color, background color, animation curve, animation duration.
r_nav_n_sheet
👍 48 ⬇️ 60
Dart 3 compatibleMaintenance Status: Average
Animated, modern and highly customisable bottom navigation bar for flutter.
fancy_bar
👍 46 ⬇️ 85
Dart 3 compatibleMaintenance Status: Poor
An fancy yet beautiful flutter widget to use with the bottomNavigationBar, supports on selected and works with any widgets.
rolling_bottom_bar
👍 38 ⬇️ 65
Dart 3 compatibleMaintenance Status: Poor
Package to show a dynamic bottom bar with a ball as indicator.
circle_bottom_navigation
👍 37 ⬇️ 115
Dart 3 compatibleMaintenance Status: Average
An animated, beauty and functional Bottom Navigation Bar you app.
flip_box_bar_plus
👍 34 ⬇️ 49
Dart 3 compatibleMaintenance Status: Poor
A 3D BottomNavigationBar inspired by Dribbble design by Dannniel
draggable_customized_btn_navy_bar
👍 33 ⬇️ 41
Dart 3 compatibleMaintenance Status: Poor
draggable_customized_btn_navy_bar, Drag and drop all your items, customize your bottom navigation in the best way.
curved_nav_bar
👍 32 ⬇️ 125
Dart 3 compatibleMaintenance 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
👍 30 ⬇️ 25
Dart 3 compatibleMaintenance 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
👍 29 ⬇️ 69
Dart 3 compatibleMaintenance 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 ⬇️ 128
Dart 3 compatibleMaintenance Status: Poor
A fully customisable bottom navbar with top,bottom indicator and gradients.
bottom_sheet_expandable_bar
👍 28 ⬇️ 66
Dart 3 compatibleMaintenance Status: Poor
A package to show and bottom bar with the capability to expand and show a bottom sheet
bottom_animation
👍 27 ⬇️ 74
Dart 3 compatibleMaintenance Status: Poor
Flutter Bottom Navigation Bar | if you want bottom navigation with smooth animation add this package .
pinterest_nav_bar
👍 26 ⬇️ 5
Dart 3 compatibleMaintenance Status: Poor
A new Flutter package project.
global_bottom_navigation_bar
👍 25 ⬇️ 57
Dart 3 compatibleMaintenance 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.
shaped_bottom_bar
👍 25 ⬇️ 30
Dart 3 compatibleMaintenance 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
👍 22 ⬇️ 55
Dart 3 compatibleMaintenance Status: Poor
Ultimate Bottom Navigation Bar is a customizable bottom navigation bar for your Flutter applications.
rounded_tabbar_widget
👍 18 ⬇️ 25
Dart 3 compatibleMaintenance Status: Poor
A simple flutter package for creating a TabBarView layout with custom Tabbar.
liquid_tabbar_minimize
👍 13 ⬇️ 1.3K
Dart 3 compatibleMaintenance Status: Good
Adaptive glassmorphism bottom bar with scroll-to-minimize and native iOS 26+ support.
sweet_nav_bar
👍 13 ⬇️ 84
Dart 3 compatibleMaintenance Status: Average
This package is to build gradiant and floating Navigation Bar with a few lines of code.
animated_botton_navigation
👍 11 ⬇️ 93
Dart 3 compatibleMaintenance Status: Average
An animated bottom navigation bar for Flutter, designed to provide a smooth and visually appealing transition between tabs.you can use like docunment
animated_bubble_navigation_bar
👍 10 ⬇️ 116
Dart 3 compatibleMaintenance Status: Good
An animated custom navigation bar widget for Flutter apps.
navigation_view
👍 10 ⬇️ 61
Dart 3 compatibleMaintenance Status: Poor
NavigationView is a Flutter package that provides a customizable navigation bar with animated transitions.
glow_bottom_app_bar
👍 8 ⬇️ 63
Dart 3 compatibleMaintenance Status: Average
Simple Bottom App Bar with Glowing transition effect to provide a beautiful effect for navigation
stage_navigation_bar
👍 8 ⬇️ 17
Dart 3 compatibleMaintenance Status: Average
A Flutter package for beautiful navigation bar with animation when select item.
bnb_flutter
👍 3 ⬇️ 70
Dart 3 compatibleMaintenance Status: Good
A highly customizable Flutter bottom navigation bar package with smooth animations and flexible item support. Built for simplicity, responsiveness, and a native look and feel.
flexi_bottom_nav
👍 2 ⬇️ 42
Dart 3 compatibleMaintenance Status: Average
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.
telegram_nav_bar
👍 1 ⬇️ 180
Dart 3 compatibleMaintenance Status: Good
A highly customizable Flutter package that accurately replicates the Telegram-style bottom navigation bar with smooth glassmorphic blur effects.
expandable_bottom_bar
👍 339 ⬇️ 116
Maintenance Status: Poor
Animatable bottom app bar with expandable sheet. Use me if you need cool bottom bar!
fancy_bottom_navigation
👍 229 ⬇️ 396
Maintenance Status: Poor
An animated Bottom Navigation Bar for Flutter apps, icon animates into place, colors are customisable..
bubble_bottom_bar
👍 224 ⬇️ 232
Maintenance Status: Poor
BubbleBottomBar is a Flutter widget designed by cubertodesign and developed by westdabestdb
ff_navigation_bar
👍 159 ⬇️ 68
Maintenance Status: Poor
Configurable bottom navigation bar with raised highlight and shadow
flashy_tab_bar
👍 152 ⬇️ 44
Maintenance Status: Poor
One another nice animated tabbar (Flutter Version) (inspired by https://github.com/Cuberto/flashy-tabbar)
titled_navigation_bar
👍 142 ⬇️ 141
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 ⬇️ 45
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 ⬇️ 16
Maintenance Status: Poor
A Custom Extended Scaffold with Expandable and Floating Navigation Bar
bubbled_navigation_bar
👍 72 ⬇️ 52
Maintenance Status: Poor
Stunning Animating Bubbled Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration. Working with PageView via controller param.
rolling_nav_bar
👍 62 ⬇️ 44
Maintenance Status: Poor
A Flutter nav bar with a rolling active indicator behind each icon
custom_navigator
👍 51 ⬇️ 45
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 ⬇️ 35
Maintenance Status: Poor
Jumping Bottom Navigation Bar for Flutter.
inkblob_navigation_bar
👍 39 ⬇️ 32
Maintenance Status: Poor
A custom navigation bar with smooth & dynamic ink blob transition effect.
navigation_action_bar
👍 36 ⬇️ 8
Maintenance Status: Poor
A beautiful modern Navigation Bar along with a Floating Action Bar.
expanding_bottom_bar
👍 17 ⬇️ 45
Maintenance Status: Poor
A bottom navigation bar with expanding titles and icons when clicked.
neos_bottom_navigation
👍 14 ⬇️ 16
Maintenance Status: Poor
A bottom navigation bar widget that is made to be customized
gradient_bottom_navigation_bar
👍 12 ⬇️ 5
Maintenance Status: Poor
A material Bottom Navigation Bar with a linear gradient option.