Bottom Navigation Bar Flutter Sample Code

 Learn how you can design bottom navigation bar to your flutter based android application.

Sample code for Bottom Navigation Bar

    
import 'dart:developer';

import 'package:flutter/material.dart';

class AppBarBottomNavigationBar extends StatelessWidget {
  const AppBarBottomNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hakeem Innovation Technology')),
      body: Center(
        child: Column(children: [
          Image.asset(
            "assets/images/flutter.png",
            width: 300,
            height: 300,
          ),
          RichText(
            text: const TextSpan(
              text: 'Flutter Learning',
              style: TextStyle(
                  color: Colors.black87,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ]),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.web,
                color: Colors.green,
              ),
              label: 'Web'),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.sms,
                color: Colors.red,
              ),
              label: 'SMS'),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: Colors.blue,
              ),
              label: 'Email'),
        ], onTap: (index) => {
            if (index == 0){
              log('Web')
            }else if (index == 1){
              log('SMS')
            }else if (index == 2){
              log('Email')
            }
        },
      ),
    );
  }
}

     
  

Sample Code for Bottom App Bar

    
import 'dart:developer';

import 'package:flutter/material.dart';

class AppBarBottomAppBar extends StatelessWidget {
  const AppBarBottomAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('HIT')),
        body: Center(
          child: Column(children: [
            const SizedBox(
              height: 25,
            ),
            Image.asset(
              "assets/images/flutter.png",
              width: 300,
              height: 300,
            ),
            const SizedBox(
              height: 25,
            ),
            RichText(
              text: const TextSpan(
                text: 'Flutter Learning',
                style: TextStyle(
                    color: Colors.black87,
                    fontSize: 20,
                    fontWeight: FontWeight.bold),
              ),
            ),
          ]),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              IconButton(onPressed: () => {
                log('Web')
              }, icon: const Icon(Icons.web)),
              IconButton(onPressed: () => {
                log('SMS')
              }, icon: const Icon(Icons.sms, color: Colors.amber,)),
              IconButton(onPressed: () => {
                log('Email')
              }, icon: const Icon(Icons.email))
            ],
          ),
        ));
  }
}

     
  

Output

Tutorial Video