Flutter: Bottom Navigation Bar with Icons

picture of mobile phone with bottom nav bar using flutter

In this post, we will be adding bottom navigation bar with icons in flutter. Continuing with the previous post, create a new folder called components inside lib folder.

Inside components folder, create a file named bottom_nav.dart

Now in bottom_nav.dart, import material design and create BottomNavWidget class that extends StatefulWidget. Then create state for this widget using createState method.

import 'package:flutter/material.dart';

class BottomNavWidget extends StatefulWidget {
  @override
  State<BottomNavWidget> createState() => _BottomNavWidgetState();
}

In the above code, we instantiated a state object called _BottomNavWidgetState().

Now we need to create _BottomNavWidgetState object and return the BottomNavigationBar widget. Inside BottomNavigationBar, we will use BottomNavigationBarItem to add icons and their respective labels.

...

class _BottomNavWidgetState extends State<BottomNavWidget> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Person'),
        BottomNavigationBarItem(icon: Icon(Icons.contact_mail), label: 'Contact')
      ],
      selectedItemColor: Colors.blue,
    );
  }
}

Following is the full code of bottom_nav.dart:

import 'package:flutter/material.dart';

class BottomNavWidget extends StatefulWidget {
  @override
  State<BottomNavWidget> createState() => _BottomNavWidgetState();
}

class _BottomNavWidgetState extends State<BottomNavWidget> {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Person'),
        BottomNavigationBarItem(
            icon: Icon(Icons.contact_mail), label: 'Contact')
      ],
      selectedItemColor: Colors.blue,
    );
  }
}

Now import the bottom_nav.dart in the main.dart file. And add the bottom navigation as follows:

import 'components/bottom_nav.dart';
.
.
.
    Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      .

      .
      .
      bottomNavigationBar: BottomNavWidget(),
    );

Full main.dart code:

import 'package:flutter/material.dart';
import 'nav_bar.dart';
import 'components/bottom_nav.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learning Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Learning Flutter Home'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text("Trying to learn flutter"),
      ),
      drawer: NavBar(),
      bottomNavigationBar: BottomNavWidget(),
    );
  }
}

Output

Now, we have added a bottom navigation bar in our Learning Flutter App.

Demo of bottom navigation in flutter