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

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

🎥 Video Tutorial

⚒️ Dependencies

bloc | Dart Package

flutter_bloc | Flutter Package

🔭 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.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,