Flutter: BottomNavigationBar Example

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 {
  @override
  _BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();
}

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

  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home')
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business')
        ),
        BottomNavigationBarItem(
          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

Flutter: Share State Between Parent And Child Widgets Flutter

Scaffold. of() called with a context that does not contain a Scaffold Flutter

Flutter: Collapsing Toolbar Flutter