Flutter: Bottom Navigation Bar with Icons

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.

Tags: BottomNavigationBarflutterStatefulWidget