Flutter GetX with bottom navigation bar not update the widget

user_9900987 0
Viewed 3143

actually, i have fixed this problem. but it is weird implementation. maybe there are better solution for this situation.

so, i have list of screen that will show based of bottom navigation index

 List<Widget> screenList = [
    HomeScreen(),
    KategoriScreen(),
    PesananScreen(),
    AccountScreen()
  ];

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Obx(() {
        var user = Get.find<AccountController>().user.value; // <= weird Solution to trigger update
        return screenList.elementAt(_mIndex);
      }),
      bottomNavigationBar: _bottomNavWidget(),
    );
  }

one of that Screen have Obx() in the widget. but when data change. the screen not updated. we need to change the screen index then return to that screen to update the widget. so, my current solution is add Obx() in Scaffold that handle the bottom navigation bar logic with useless var (var user). any better solution?

UPDATE

Sorry for the misunderstanding. my problem is when account controller is updated. the screen not updating. need to change other screen and going back. another solution is use Obx() in parent Widget. but the user value is not used

flutter-getx flutter
2 Answers
class ScreenController extends GetxController {
  var tabIndex = 0;

  void changeTabIndex(int index) {
    tabIndex = index;
    update();
  }
}

This was apply to widget Screen page where you can use indexstack

GetBuilder<DashboardController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.tabIndex,
              children: [
                Home(),
                HotDeals(),
               ProfilePage(),

              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black,
            selectedItemColor: Colors.redAccent,
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 0,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.home,
                label: 'Home',
              ),

              _bottomNavigationBarItem(
                icon: CupertinoIcons.photo,
                label: 'Hotdeals',
              ),
             
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person,
                label: 'Profile',
              ),
            ],
          ),
        );
      },
    );
user_116485560

This is the principle of state management. You need to set the state or notify the listeners in order to refresh the UI.

Here, only using Obx is not enough if it is not a controller that you are watching.

I would recommend that you create a class out of your screen list

class ScreenController extends GetxController{
   int _selectedIndex = 0.obs;
   List<Widget> _screenList = [
    HomeScreen(),
    KategoriScreen(),
    PesananScreen(),
    AccountScreen()
  ];

   selectIndex(int index) => selectedIndex = index;
   getScreen() => _screenList[_selectedIndex];
}

Then you can simply encapsulate your _selectedIndex inside your Obx widget, that will trigger the refresh when another button uses the selectIndex method.

(You need to put the ScreenController first, as usual)

user_33665170
Related