Bottom Nav Bar in Flutter

Create Free Backend With Appwrite

Introduction

Bottom Navigation Bar is a material widget at the bottom of the screen that displays multiple tabs for easy navigation between different views or functionalities in an app.

To use a Bottom Navigation Bar in Flutter, you can wrap it inside a Scaffold widget. Here’s a basic example:

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
  ),
);

Run Online

Typically, you want to change the body of the Scaffold based on the tab selected. This requires managing the state of the selected index. You can see complete demo in Example 1 soon.

int _selectedIndex = 0;

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

...

BottomNavigationBar(
  items: <BottomNavigationBarItem>[...],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),

In this example below, you will create a Bottom Navigation Bar with 4 tabs: Home, Categories, Cart, and Profile. Each tab will have a corresponding screen.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _widgetOptions = const [
    Text('Home'),
    Text('Categories'),
    Text('Cart'),
    Text('Profile'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
            const Text('Ecommerce App', style: TextStyle(color: Colors.white)),
        backgroundColor: Colors.indigo, // AppBar color
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.indigo, // BottomNavigationBar background color
        selectedItemColor: Colors.amber, // Selected item color
        unselectedItemColor: Colors.white, // Unselected item color
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: 'Categories',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Cart',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

Run Online

Challenge

Create a Bottom Navigation Bar with at least 4 items, each representing different functionalities of a gym app (e.g., Home, Workouts, Profile, Settings). Implement corresponding Text widgets for each tab.

Bottom Nav Bar in Flutter

Introduction

Basic Bottom Navigation Bar

Handling Navigation

Example 1: Ecommerce App Bottom Navigation Bar

Challenge