Flutter bottom Navbar with binding using Getx

Question

I have question I hope to help me How can I call the binding of page Home when I press the tap of home on bottom navbar

**Controller of bottom navbar **

class BottomNavBarController extends GetxController{
List bodyPage=[
     const Home(),
     const Settings(),
     const ProfileView()

  ];

NavBar

body:Obx(()=> navBarController.currentPage,
  ),
  // bodyPage[navBarController.indexNavBar],
  bottomNavigationBar:Obx(()=> NavigationBar(
  currentIndex: navBarController.indexNavBar.value,
  items: [
    NavigationBarItem(
            icon: const Icon(home_outline, ),
        
          ),
  NavigationBarItem(
            icon: const Icon(setting_outline),
           
          ),
  NavigationBarItem(
            icon: const Icon(menu_outline),
            
          )])));

**Binding **

  class HomeBinding implements Bindings{
  @override
  void dependencies() {
  Get.put(HomeController());
  }}

**Get Page **

 getPages: [
   GetPage(name: "/home", page:()=> const HomeView(), binding:HomeBinding()),
]

Sergio Clemente · Answer

I use bottom navigation and Getx. In this way :

changeNavigationIndex(int index) {


      myPresenter.setMainNavigationIndex(index);

      switch (index) {
        case 1:
          setState(() {
            mainNavigationTitle = txtTitle2;
          });
          break;
        case 2:
          setState(() {
            mainNavigationTitle = txtTitle3;
          });
          break;
        case 3:
          setState(() {
            mainNavigationTitle = txtTitle4;
          });
          break;
        case 0:
        default:
          setState(() {
            mainNavigationTitle = txtTitle1;
          });
          break;
      }

  }

buildBottomNavigationMenu(context, MyPresenter myPresenter) {

changeNavigationIndex(myPresenter.mainNavigationIndex);

return Obx(() =>
    MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: SizedBox(
          child: BottomNavigationBar(
            onTap: changeNavigationIndex,
            type: BottomNavigationBarType.fixed,
            currentIndex: salesPresenter.mainNavigationIndex,
            selectedIconTheme: IconThemeData(
              color: CustomColors.iconColor,
              size: 30,
            ),
            items: [
              BottomNavigationBarItem(
                icon: const Icon(Icons.icon1),
                label: txt1,
                backgroundColor: Theme.of(context).primaryColor,

              ),
              BottomNavigationBarItem(
                icon: const Icon(Icons.icon2),
                label: txt2,
                backgroundColor: Theme.of(context).primaryColor,
              ),
              BottomNavigationBarItem(
                icon: const Icon(Icons.icon3),
                label: txt3,
                backgroundColor: Theme.of(context).primaryColor,
              ),
              BottomNavigationBarItem(
                icon: const Icon(Icons.icon4),
                label: txt4,
                backgroundColor: Theme.of(context).primaryColor,
              ),
            ],
          ),
        )
    ));

}

return
      WillPopScope(
        onWillPop: () async => false,
        child: Scaffold(
            body:
                : GetX(
                    builder: (mp) => IndexedStack(
                      index: mp.mainNavigationIndex,
                      children: const[
                        Screen1(),
                        Screen2(),
                        Screen3(),
                        Screen4(),
                      ],
                    )
                ),
            bottomNavigationBar: buildBottomNavigationMenu(context, myPresenter),
            drawer: const MainDrawerWidget(),
        ),

      );

So, In this app all Getx Binding is in separated file (MainBind.dart) That I call on Main.dart.

But if you want call the bind in same file that u have programmated the bottom navigation, you can put the bind in your Main Class like this:

class _MainScreenState extends State {
   Get.lazyPut(() => MyPresenter(), fenix: true);
}

Flutter bottom Navbar with binding using Getx

1 Answers