Implementing Bottom Navigation Bar in Flutter

Bottom Navigation Bar in Flutter

Welcome back to another installment of “A Developer’s Journey with Hemant.” 📚✨ Today, we’re diving into a crucial aspect of mobile app development: the bottom navigation bar. 📱

In this tutorial, we’ll set up a bottom navigation bar in our MainHomeScreen, featuring five essential screens: Home 🏠, Calendar 📅, Add Habit ➕, Profile 👤, and Settings ⚙️. This setup not only enhances user experience but also ensures smooth and intuitive navigation throughout your app.

---

What is a Bottom Navigation Bar?

A bottom navigation bar is a common UI component that allows users to quickly switch between different sections of an app. It is usually placed at the bottom of the screen and contains multiple tabs, each represented by an icon and a label.

---

Creating a Basic Bottom Navigation Bar

Let's implement a bottom navigation bar in Flutter using the BottomNavigationBar widget.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainHomeScreen(),
    );
  }
}

class MainHomeScreen extends StatefulWidget {
  @override
  _MainHomeScreenState createState() => _MainHomeScreenState();
}

class _MainHomeScreenState extends State<MainHomeScreen> {
  int _selectedIndex = 0; // Track selected tab

  // List of screens
  static const List<Widget> _pages = [
    Center(child: Text('Home', style: TextStyle(fontSize: 24))),
    Center(child: Text('Calendar', style: TextStyle(fontSize: 24))),
    Center(child: Text('Add Habit', style: TextStyle(fontSize: 24))),
    Center(child: Text('Profile', style: TextStyle(fontSize: 24))),
    Center(child: Text('Settings', style: TextStyle(fontSize: 24))),
  ];

  // Function to handle navigation tap
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Bottom Navigation Bar")),
      body: _pages[_selectedIndex], // Display selected page
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), label: "Calendar"),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "Add Habit"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profile"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings"),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped, // Change tab on tap
      ),
    );
  }
}

---

Understanding the Code

• We use BottomNavigationBar to create the navigation bar.
• _selectedIndex keeps track of the current active tab.
• The _onItemTapped function updates _selectedIndex when a tab is clicked.
• BottomNavigationBarItem defines each tab with an icon and a label.
• The body of the Scaffold updates dynamically based on _selectedIndex.

---

Enhancing the Navigation Bar

To improve user experience, we can customize our navigation bar further:

1️⃣ Adding Background Color

backgroundColor: Colors.green,

2️⃣ Changing Selected Item Color

selectedItemColor: Colors.red,

3️⃣ Adding Animation with BottomNavigationBarType

type: BottomNavigationBarType.fixed,

This ensures smooth transitions and better UI effects.

---

Why Use a Bottom Navigation Bar?

✅ Enhances user experience 🏆 ✅ Quick access to key features ⚡ ✅ Consistent navigation structure 🔄 ✅ Better UI design 🎨

---

Conclusion

Using a bottom navigation bar in Flutter makes your app more intuitive and user-friendly. With simple code modifications, you can customize it to fit your design needs. Start integrating it into your apps today! 🚀

Got any questions? Drop them in the comments below! 😊👇