Day 15: Mastering Bottom Navigation Bars in Flutter for Noted App 🚀

Hemant Kumar Prajapati
4 min readSep 17, 2024

--

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.

By integrating the BottomNavigationBar widget, we’ll create a user-friendly interface that allows seamless access to different sections of the app. With this foundational navigation structure in place, you’ll be well-equipped to build a robust and engaging mobile app.

| Step 1: Creating Separate Stateless Screens 🖥️

First, let’s create separate files for each screen. This will keep our code organized and maintainable. We’ll have the following screens:

  • Home Screen 🏠
  • Calendar Screen 📅
  • Profile Screen 👤
  • Settings Screen ⚙️

1.1 Home Screen 🏠

Create a new file named home_screen.dart and add the following code:

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
return const Center(
child: Text('Home Screen', style: TextStyle(fontSize: 24)),
);
}
}

1.2 Profile Screen 👤

Create a new file named profile_screen.dart and add the following code:

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
return const Center(
child: Text('Profile Screen', style: TextStyle(fontSize: 24)),
);
}
}

1.3 Settings Screen ⚙️

Create a new file named settings_screen.dart and add the following code:

import 'package:flutter/material.dart';

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

@override
Widget build(BuildContext context) {
return const Center(
child: Text('Settings Screen', style: TextStyle(fontSize: 24)),
);
}
}

| Step 2: Understanding BottomNavigationBar 🌟

The BottomNavigationBar widget in Flutter is used to provide a persistent navigation bar at the bottom of the screen. It allows users to switch between different pages or sections of your app. Each tab in the BottomNavigationBar is represented by an icon and a label.

Key Components of BottomNavigationBar:

  1. Items: List of BottomNavigationBarItem which defines the icons and labels.
  2. CurrentIndex: The index of the currently selected item.
  3. OnTap: A callback function that gets triggered when an item is tapped.

| Step 3: Implementing the Bottom Navigation Bar 🛠️

Now, let’s modify our main.dart file to use the new screens and set up the bottom navigation bar.

3.1 MainHomeScreen Setup 🏡

Open main.dart and import the new screens:

import 'package:flutter/material.dart';

import 'screens/main_home_screen.dart';

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

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

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

3.2 MainHomeScreen Stateful Widget 💡

import 'package:flutter/material.dart';

import 'bottom_screens/home_screen.dart';
import 'bottom_screens/profile_screen.dart';
import 'bottom_screens/setting_screen.dart';

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

class _MainHomeScreenState extends State<MainHomeScreen> {
int _selectedIndex = 0;

final List<Widget> widgetOptions = const [
HomeScreen(),
ProfileScreen(),
SettingsScreen(),
];

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Noted'),
),
body: widgetOptions.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: true,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.amber,
unselectedItemColor: Colors.blueGrey,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}

Detailed Breakdown 📝

  1. Creating Stateless Widgets:
  • Each screen (HomeScreen, CalendarScreen, ProfileScreen, SettingsScreen) is a simple stateless widget that returns a Center widget with the screen's name in the center.
  • This keeps our code modular and easier to manage.

2. Importing Screens:

  • Import the new screen files into main.dart.
import 'package:flutter/material.dart';

import 'bottom_screens/home_screen.dart';
import 'bottom_screens/profile_screen.dart';
import 'bottom_screens/setting_screen.dart';

3. Using the Screens in widgetOptions:

  • Replace the widgetOptions list with instances of the new screen widgets.
  final List<Widget> widgetOptions = const [
HomeScreen(),
ProfileScreen(),
SettingsScreen(),
];

2. BottomNavigationBar:

  • The BottomNavigationBar contains BottomNavigationBarItem objects, each with an icon and a label.
  • The _onItemTapped method updates the _selectedIndex state, which controls which screen is displayed in the body.

Bonus Tips 🌟

  • Modularization: Keeping each screen in its own file makes your codebase cleaner and easier to navigate.
  • Customization: You can further customize each screen with more widgets and complex layouts as needed.

| Conclusion 🎯

By making each screen its own stateless widget, our code stays neat and organized. 🧩 The bottom navigation bar is now ready for you to add more features to each screen. 🚀

Stay tuned for the next part of “A Developer’s Journey with Hemant,” where we’ll add interactivity and dive into more advanced features. 🔥✨

| 🚀 Join the Journey!

We’ve built an amazing todo app, “Noted App,” together, but the adventure doesn’t stop here. You can checkout the repository on GitHub and follow along day by day to complete the project with us in this open-source endeavor. 🌟💻

👉 Explore the GitHub Repository:

Dive into the code, contribute, and collaborate with other developers. Let’s build something great together.

| 🌟 Enjoyed this tutorial?

For more tips, tutorials, and insights into Flutter, be sure to follow my Medium blog! Stay connected, and let’s continue building amazing things together.

This is just Part 15: Ping me on other platforms… too….

👉 Follow me:

Happy coding! 🎉 !! Happy Flutter !!

💬 Comment Section is Open!

Share your thoughts or ask questions below.

👏 Applaud if you enjoyed this!

Your claps help others find this content.

➕ Follow for more!

Stay updated with more tips and tutorials.

--

--

Hemant Kumar Prajapati

Flutter developer 🎩✨ crafting cross-platform apps. Sharing fun coding tips! If you enjoy my guides, Checkout my hopp bio! https://www.hopp.bio/hemant-prajapati