New Concept For BottomNavigationBar in Flutter

 Hey Friends ! Whats-uppppp, I am back with my limited knowledge 😂😁 in flutter but it is important for you.

So Today we are going to know, when we navigate through BottomNavigationBar and click on back button it does not trace previous visited BottomNavigationItem, if you are learning flutter from youtube.

They suggest to take List<Widget> screen and render the Widget via index of screens. Personally i think, it is not better to remove widget suddenly from widget tree.

So finally i came with this new code:

We are going to use get package for state-management here also simple flutter code:

Create file bottom_navigation_screen.dart:

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:badges/badges.dart' as badges;

class BottomNavigationScreen

extends StatelessWidget {

BottomNavigationScreen({Key? key}) : super(key: key);

  final BottomNavigationController

_bottomNavigationController =

    Get.put(BottomNavigationController());

   final PageController _pageController

= PageController(initialPage: 0);

  List<Widget> screens = [

    HomeScreen(),

    ProfileScreen(),

    SearchScreen(),

    CartScreen()

  ];

  @override

  Widget build(BuildContext context) {

  return Obx(() {

  return PopScope(

  canPop: _bottomNavigationController

    .wantBack.value,

  onPopInvoked: (bool didPop) async {

  print(didPop);

  if (didPop) return;

  if (_bottomNavigationController

    .visitedIndexes.length > 1) {

  _bottomNavigationController.visitedIndexes

   .removeLast(); // Remove current index

   _pageController.animateToPage(

    _bottomNavigationController.visitedIndexes.last,

    duration: Duration(milliseconds: 300),

                curve: Curves.linear);

            _bottomNavigationController.stackIndex.value =

                _bottomNavigationController

                    .visitedIndexes.last; // Go back to previous index

            return;

          } else {

            _bottomNavigationController.wantBack.value = true;

            Get.back();

          }

        },

        child: Scaffold(

          body: PageView.builder(

            physics: NeverScrollableScrollPhysics(),

            itemCount: screens.length,

            controller: _pageController,

            itemBuilder: (BuildContext context, int index) {

              return screens[index];

            },

          ),

          bottomNavigationBar: BottomNavigationBar(

            currentIndex: _bottomNavigationController.stackIndex.value,

            selectedItemColor: Colors.amber,

            unselectedItemColor: Colors.black,

            elevation: 5,

            onTap: (int index) {

              if (!_bottomNavigationController.visitedIndexes.contains(index)) {

                _bottomNavigationController.visitedIndexes

                    .add(index);

// Add index to visited indexes list

              }

              _bottomNavigationController.stackIndex.value = index;

              _pageController.animateToPage(index,

                  duration: Duration(milliseconds: 300), curve: Curves.linear);

                          },

            items: [

              BottomNavigationBarItem(

                  icon: CustomIcons.homeOutline(),

                  activeIcon: CustomIcons.home(

                      color: CustomColors.amber,

                  label: 'Home'),

              BottomNavigationBarItem(

                  icon: Icon(Icons.person_outline),

                  activeIcon: Icon(Icons.person),

                  label: 'Profile'),

              const BottomNavigationBarItem(

                  icon: Icon(Icons.search), label: 'Search'),

              BottomNavigationBarItem(

                  icon: Icon(Icons.cart_outline),

                  activeIcon: Icon(Icons.cart,color: Colors.amber,), 

                  label: 'Cart'),

            ],

             

          ),

        ),

      );

    }

    );

  }

}

Create another file

bottom_navigation_controller.dart:

import 'package:get/get.dart';

class BottomNavigationController extends GetxController {

  final stackIndex = 0.obs;

  final visitedIndexes = <int>[0].obs;

// Keep track of visited indexes

  final wantBack = false.obs;

}