Flutter: BottomNavigationBar Example

Link Copied To Clipboard !

bottom_navigation_bar_in_flutter Flutter

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.

It is displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

BottomNavigationBar Example In Flutter

import 'package:flutter/material.dart';

class BottomNavitationBarWidget extends StatefulWidget {
  _BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();

class _BottomNavigationBarWidgetState extends State<BottomNavigationBarWidget> {
  int _selectedIndex = 0;

  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
          icon: Icon(Icons.home),
          title: Text('Home')
          icon: Icon(Icons.business),
          title: Text('Business')
          icon: Icon(Icons.school),
          title: Text('School')
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,

Now we can use this class or say widget in our app.

return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      body: Center(
        child: Text('Hello World !'),
      bottomNavigationBar: BottomNavitationBarWidget(),

You May Also Like