How to build a bottom navigation bar in Flutter

 Mobile functions frequently have more than a few classes of content material to offer. The Google Play Store app, for example, offers its content material in classes such as games, apps, movies, and books. In Flutter apps, the BottomNavigationBar widget allows customers to see any one class as the app starts offevolved and shortly seem at the others with simply the faucet of a finger.

In this tutorial, we’ll inform you about the whole lot you want to understand about BottomNavigationBar in Flutter. We’ll reveal how it works, stroll thru some use cases, and exhibit to you how to personalize the BottomNavigationBar widget in your Flutter app.

Here’s what we’ll cover:

What is BottomNavigationBar in Flutter?

Customizing the BottomNavigationBar

How to keep the country of pages

How to consist of TabBar with BottomNavigationBar

Hiding BottomNavigationBar on scroll

What is BottomNavigationBar in Flutter?

BottomNavigationBar is a widget that shows a row of small widgets at the backside of a Flutter app. Usually, it’s used to exhibit round three to 5 items. Each object needs to have a label and an icon. BottomNavigationBar permits you to pick out one object at a time and shortly navigate to a given page.

Now let’s stroll via the system of developing an easy BottomNavigationBar step with the aid of step. The completed product will seem to be as follows: 

The BottomNavigationBar widget is given to the bottomNavigationBarproperty of Scaffold: 

Example:

Scaffold(

  appBar: AppBar(

    title: const Text('BottomNavigationBar Demo'),

  ),

  bottomNavigationBar: BottomNavigationBar(

    items: const <BottomNavigationBarItem>[

      BottomNavigationBarItem(

        icon: Icon(Icons.call),

        label: 'Calls',

      ),

      BottomNavigationBarItem(

        icon: Icon(Icons.camera),

        label: 'Camera',

      ),

      BottomNavigationBarItem(

        icon: Icon(Icons.chat),

        label: 'Chats',

      ),

    ],

  ),

);

BottomNavigationBar has a required property known as items. objects be given a widget of a kind BottomNavigationBarItem. BottomNavigationBarItem is virtually used to exhibit the true object inner BottomNavigationBar.

The above code simply shows the BottomNavigationBar with the first object chosen as the default. It does now not trade the choice but as we click on the different items: 

Showing a decision of items

To exhibit the choice of different items, we’ll use two properties: onTap and currentIndex. 

int _selectedIndex = 0; //New

BottomNavigationBar(

  items: const <BottomNavigationBarItem>[

    ...

  currentIndex: _selectedIndex, //New

  onTap: _onItemTapped,         //New

)

//New

void _onItemTapped(int index) {

  setState(() {

    _selectedIndex = index;

  });

}

The _selectedIndex variable holds the fee of the presently chosen item. _selectedIndex is given to the currentIndex property.

The _onItemTapped() callback is assigned to the onTap of BottomNavigationBar, which returns the index when the object is tapped. Simply assigning a presently chosen object index to _selectedIndex and doing setState will exhibit the object as chosen in BottomNavigationBar. 

Displaying the web page of the chosen item

As of now, we don’t have any web page to exhibit primarily based on the chosen item. So let’s go beforehand and outstanding it: 

s of now, we don’t have any page to show based on the selected item. So let’s go ahead and great it:

//New

static const List<Widget> _pages = <Widget>[

  Icon(

    Icons.call,

    size: 150,

  ),

  Icon(

    Icons.camera,

    size: 150,

  ),

  Icon(

    Icons.chat,

    size: 150,

  ),

];

Scaffold(

  appBar: AppBar(

    title: const Text('BottomNavigationBar Demo'),

  ),

  body: Center(

    child: _pages.elementAt(_selectedIndex), //New

  ),

  bottomNavigationBar: BottomNavigationBar(

    ...

  ),

);

_pages keep a listing of widgets. For simplicity, we’re simply displaying a large icon of the object itself.

Showing one web page in the middle of the display screen from _pages primarily based on the _selectedIndex of the object will do the relaxation of the magic. 

More incredible articles from LogRocket:

Don't pass over a second with The Replay, a curated publication from LogRocket

Use React's use effect to optimize your application's performance

Switch between more than one variation of Node

Learn how to animate your React app with AnimXYZ

Explore Tauri, a new framework for constructing binaries

Compare NestJS vs. Express.js

Discover famous ORMs used in the TypeScript panorama