BottomNavigationBar with Flutter Getx

Question

I have a problem with Getx with BottomNavigationBar. in the controller it updates the value but BottomNavigationBar current index set to that value updates only when I resave. I am getting this error: Exception caught by widgets library ══════ Incorrect use of ParentDataWidget.

    class BottomNavigation extends StatelessWidget {
  BottomNavigation({
    Key? key,
  }) : super(key: key);

  final AppController controller = Get.put(AppController());

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: controller.tabIndex.value,
      onTap: (index) {
        controller.changeTabIndex(index);
        print(controller.tabIndex.value);
      },
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      ],
    );
  }
}

class _MyAppState extends State<MyApp> {
  // Inintialize app router
  @override
  void initState() {
    super.initState();
  }

  final AppController appController = Get.put(AppController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Politechnica',
      theme: UniversityAppTheme.light(),
      home: Obx(
        () => IndexedStack(
          index: appController.tabIndex.value,
          children: Screens.pages,
        ),
      ),
    );
  }
}

class AppController extends GetxController {
  final tabIndex = 0.obs;

  changeTabIndex(int tab) {
    tabIndex.value = tab;
  }
}

Answer 1

you need to move State logic to your AppController and use a parent Stateless view, can be a Getview injecting your controller and use GetBuilder instead of Obx