Bottom Navigation Bar using Bloc Pattern in Flutter | Flutter State Management | Bloc Pattern

Vijay R
vijaycreations
Published in
4 min readJun 23, 2023

--

In this article we will look into how to implement Bottom Nav Bar using BLOC pattern in Flutter

🎥 Video Tutorial

⚒️ Dependencies

🔭 Implementation

After adding the above two dependencies in the pubspec.yaml file, Let’s start by creating the bloc files (including the state and events)

Therefore to create bloc files we can go for adding the BLOC extension in our VSCode., This will help us create the bloc related files by just right clicking on the place/folder where we want our bloc to be created.

Starting with the states, let’s define the tabIndex which will be used to keep track of the current index of the bottom nav bar.

part of 'landing_page_bloc.dart';

@immutable
abstract class LandingPageState {
final int tabIndex;

const LandingPageState({required this.tabIndex});
}

class LandingPageInitial extends LandingPageState {
const LandingPageInitial({required super.tabIndex});
}

following the states, let’s define the events. We will have only one event called the TabChange event which will be invoked whenever user switches between the tabs in bottom nav bar.

part of 'landing_page_bloc.dart';

@immutable
abstract class LandingPageEvent {}

class TabChange extends LandingPageEvent {
final int tabIndex;

TabChange({required this.tabIndex});
}

finally let’s define the bloc file as shown below., where we set the initial index of bottom navigation bar as 0. Hence whenever the user changes tabs in bottom navigation bar, we will trigger TabChange event and here inside the bloc, if the event is identified as TabChange then we will emit the LandingPageInitial state with the tab value what the user has changed.

import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

part 'landing_page_event.dart';
part 'landing_page_state.dart';

class LandingPageBloc extends Bloc<LandingPageEvent, LandingPageState> {
LandingPageBloc() : super(const LandingPageInitial(tabIndex: 0)) {
on<LandingPageEvent>((event, emit) {
if (event is TabChange) {
print(event.tabIndex);
emit(LandingPageInitial(tabIndex: event.tabIndex));
}
});
}
}

With this we complete the bloc logic for triggering the events and emitting the state with the respective values.

Now let’s turn our focus to the UI part and start building them up.

Inside the UI file, let’s first define the bottom nav bar items and the widgets that will be rendered on each screen of bottom nav bar.

List<BottomNavigationBarItem> bottomNavItems = const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.grid_3x3),
label: 'Category',
),
BottomNavigationBarItem(
icon: Icon(Icons.search_outlined),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite_outline),
label: 'Favourite',
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag_outlined),
label: 'Cart',
),
];

const List<Widget> bottomNavScreen = <Widget>[
Text('Index 0: Home'),
Text('Index 1: Category'),
Text('Index 2: Search'),
Text('Index 3: Favourite'),
Text('Index 4: Cart'),
];

Now inside the stateless widget class let’s make use of the above bottom nav list and build up the bottom nav bar widget as shown below.

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

@override
Widget build(BuildContext context) {
return BlocConsumer<LandingPageBloc, LandingPageState>(
listener: (context, state) {},
builder: (context, state) {
return Scaffold(
body: Center(child: bottomNavScreen.elementAt(state.tabIndex)),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,
currentIndex: state.tabIndex,
selectedItemColor: Theme.of(context).colorScheme.primary,
unselectedItemColor: Colors.grey,
onTap: (index) {
BlocProvider.of<LandingPageBloc>(context)
.add(TabChange(tabIndex: index));
},
),
);
},
);
}
}

With this the entire code setup is done, Hence upon each tab change we will try to render the corresponding text widget using BLOC logic.

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=U_exF_4Frkw

Get the complete source code here:👉 https://github.com/vijayinyoutube/bnb_with_bloc

Check out all my Flutter related blogs here.,👇

--

--

Vijay R
vijaycreations

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: calico.takeoff_01@icloud.com