Creating a Modern Bottom Navigation Bar in Flutter: A Step-by-Step Guide

Creating a Modern Bottom Navigation Bar in Flutter: we’re going to dive into creating a sleek, modern bottom navigation bar in Flutter. This time, we’re going to add a touch of elegance with a sliding animation and a curved design. So let’s take a look at how we create that beautiful Modern Bottom Navigation Bar in Flutter.

Setting Up Your Project

First things first, we need to set up our project. Open your empty Flutter project, and you’ll notice we’re starting with just an empty container. To create this beautiful bottom navigation bar, we’re going to use the curved_navigation_bar package. So, head over to the pubspec.yaml file and add the dependency.

dependencies:
 flutter:
    sdk: flutter
 curved_navigation_bar: ^0.3.7

After adding the dependency, don’t forget to tap on the Pub get option to fetch all the dependencies.

Adding the Bottom Navigation Bar

Now, let’s move on to the main.dart file. After the body, we’re going to add the bottom navigation bar parameter. We’ll use our CurvedNavigationBar here. It needs a list of items, which is a widget list. So, let’s create a list widget that will contain our navigation items. We’re adding five icons for our bottom navigation bar: home, dashboard, cart, settings, and a person icon.

final List<Widget> items = <Widget>[
 Icon(Icons.home, size: 30),
 Icon(Icons.dashboard, size: 30),
 Icon(Icons.shopping_cart, size: 30),
 Icon(Icons.settings, size: 30),
 Icon(Icons.person, size: 30),
];

Next, we’ll assign this newly created item list to the items parameter of the CurvedNavigationBar.

Customizing the Bottom Navigation Bar

By default, the bottom navigation bar has a blue background color. To make it blend better with our app, we can either make the color transparent or match it with our container’s background color. For now, let’s match it with our container’s background color.

CurvedNavigationBar(
 backgroundColor: Colors.blue,
 items: items,
 onTap: (index) {
    // Handle navigation
 },
)

Changing the Background Color Based on Selection

To make the navigation bar more interactive, we can change the background color based on the selected index. This can be done using the onTap function, which provides the index of the selected item. We’ll use setState to update the UI whenever the background color changes.

onTap: (index) {
 setState(() {
    if (index == 0) {
      _backgroundColor = Colors.blue;
    } else if (index == 1) {
      _backgroundColor = Colors.yellow;
    } else if (index == 2) {
      _backgroundColor = Colors.red;
    } else if (index == 3) {
      _backgroundColor = Colors.green;
    } else if (index == 4) {
      _backgroundColor = Colors.teal;
    }
 });
}

Customizing the Animation and Appearance

We can also customize the animation duration and the height of the bottom navigation bar. For example, we can make the page transition faster by setting the animation duration to 300 milliseconds.

CurvedNavigationBar(
 animationDuration: Duration(milliseconds: 300),
 height: 50,
 items: items,
 onTap: (index) {
    // Handle navigation
 },
)

Setting a Default Index

Lastly, we can set a default index for the bottom navigation bar. This is the index that will be selected when the app or screen first opens.

CurvedNavigationBar(
 index: 2,
 items: items,
 onTap: (index) {
    // Handle navigation
 },
)

Wrapping Up

And there you have it! We’ve created a modern, animated bottom navigation bar in Flutter with a sleek design and customizable features. This should give your app a fresh, modern look. If you have any questions or suggestions for the future, feel free to leave a comment below. Happy coding!