Starting With Flutter: Bottom Bar

While buttons and menus are nice ways to let users navigate your app, you can also use Bottom Bars to make it easier and more visually pleasing. iOS users are already well into the Bottom Bar world and the new Android design guidelines embrace it in full force so... Let's go!

First steps

The easiest way to create a BottomBar is from Scaffold as it has a bottomNavigationBar property:

int _currentIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('My Demo'),
      ),
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Chiamate',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Camera',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
      ),
      body: Center(
        child: Text('My Position: $_currentIndex'),
      ),
    );
  }

Here we can see that BottomNavigationBar has 3 important properties:

• currentIndex: it is the current index of the bar. You can see it as the current focused element which should be shown.
• onTap: called when you tap one of the BottomNavigationBar elements. Here most of the time goes the setState function which will change the currentIndex.
• items: a list of BottomNavigationBarItem which are convenient Widgets to show bar elements. They already manage "selected" and "unselected" states and show on appropriate colors.

This is a really easy BottomBar that can be used to show different screens based on the _currentIndex. BottomNavigationBarItem explains by itself. Now let's see how to customize our BottomBar.

Let's Customize!

BottomNavigationBar can be easily customized by using its properties:

• type: you can select between BottomNavigationBarType.shifting and BottomNavigationBarType.fixed. The first will highlight and center the selected tab, the second will fix the tab size and not enlarge them if selected.

• backgroundColor: you can set a custom color to the background of the BottomNavigationBar

• elevation: setting an elevation will cast a shadow on the BottomNavigationBar top part.

• showSelectedLabels, showUnselectedLabels : choose to show labels or not for different situations.

Stylize the single buttons it's a bit more tricky, you can use these BottomNavigationBar properties to change colors, size and label, also it can be useful to change the Theme of the items.

• selected/unselectedFontSize: takes a double to set text size.
• selected/unselectedItemColor: sets color of the icons
• selected/unselectedIconTheme: takes a IconThemeData object in which you can set how icons should appear
• selected/unselectedLabelStyle: takes a TextStyle object i which you can set how labels should appear.

To change more deeply the appaerance of the BottomNavigationBar you can wrap it around a Theme object.

An example of a customized BottomNavigationBar can be something like this:

Here's the code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text('My Demo'),
      ),
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.red,
        unselectedItemColor: Colors.red,
        selectedFontSize: 18,
        unselectedFontSize: 12,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        selectedLabelStyle: TextStyle(color: Colors.white),
        unselectedLabelStyle: TextStyle(color: Colors.white24),
        selectedIconTheme: IconThemeData(color: Colors.white, size: 40),
        unselectedIconTheme: IconThemeData(color: Colors.white24, size: 20),
        currentIndex: _currentIndex,
        selectedItemColor: Colors.white,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Chiamate',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Camera',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
      ),
      body: Center(
        child: Text('My Position: $_currentIndex'),
      ),
    );
  }

There you are, this is a good BottomBar for your app!

You can change a lot of things if you wish with a bit of effort, like adding animations or make a gradient background, but now it's up to you to create an awesome Bottom Bar!

Wish to check more awesome tutorials? Click here!