Bloc (State Management) Bottom Navigation Bar using Bloc

 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});
}

part of 'landing_page_bloc.dart';

@immutable
abstract class LandingPageEvent {}

class TabChange extends LandingPageEvent
{
  final int tabIndex;
  TabChange({required this.tabIndex});
}

import 'dart:async';

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)
        {
          emit(LandingPageInitial(tabIndex: event.tabIndex));
        }
    });
  }
}

import "package:flutter/material.dart";
import "package:flutter_bloc/flutter_bloc.dart";
import "package:praxware/Business_Logic/landing_page_bloc/landing_page_bloc.dart";
import "package:praxware/Presentation/Screens/landing_page.dart";

class RouteGenerator
{
  final LandingPageBloc landingPageBloc = LandingPageBloc();

  Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;
    switch(settings.name) {
      case "/" :
        return MaterialPageRoute(
          builder: (context) {
            return BlocProvider<LandingPageBloc>.value(
              value: landingPageBloc,
              child: const LandingPage(),
            );
          },
        );
      default:
        return _errorRoute();
    }
  }

  static Route<dynamic> _errorRoute() {
    return MaterialPageRoute(
      builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Error"),
          ),
          body: const Center(
            child: Text("ERROR"),
          ),
        );
      },
    );
  }
}


import "package:flutter/material.dart";
import "package:flutter_bloc/flutter_bloc.dart";
import "package:praxware/Business_Logic/landing_page_bloc/landing_page_bloc.dart";

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",
  ),
];

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

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));
            },
          ),
        );
      },
    );
  }
}



import "package:flutter/material.dart";
import "package:praxware/Presentation/Routes/generated_routes.dart";

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MainPage",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      initialRoute: "/",
      onGenerateRoute: RouteGenerator().generateRoute,
    );
  }
}