Flutter Bottom Navigation Bar with 20 Different Designs 🐠

We will make great bottom navigation bar that present navigation in modern applications.
Let’s start 🥳

1 — Let’s review the library

persistent_bottom_nav_bar | Flutter Package

2 — add a line like this to your package’s pubspec.yaml

dependencies:
  persistent_bottom_nav_bar: ^5.0.2

3 — and run an flutter pub get

Open the Android Studio Terminal and run flutter pub get

4 — Next are the necessary icons for the design of our onboarding pages.

We will use the design that I prepared for free in Figma. You can customize it according to your own design.

Figma

We create folder: assets/icons. We put our bottom navigation active/deactive icons.

We make the necessary configurations in the pubspec.yaml file. And then we run flutter pub get

assets:
  - assets/
  - assets/icons/

5 — We create lib/utilies folder and constant.dart , icon_path_util.dart file.

56— We create screens folder and main_screen.dart file.

This library has 20 different designs.

To use different designs;

You change this code in main_screen.dart :

navBarStyle: NavBarStyle.style19

For example;
navBarStyle: NavBarStyle.style1,
navBarStyle: NavBarStyle.style2 …

Our awesome bottom navigation bar is ready. 👾🧐

You can access the project from my Github Account. 👩🏽‍💻