Flutter Getx BottomNavigation with GetPage

Question

I'm using getx navigation with page binding - for example:

GetPage(
  name: Routes.pageone,
  page: () => PageOne(),
  binding: PageOneBinding(),
),
GetPage(
  name: Routes.pagetwo,
  page: () => PageTwo(),
  binding: PageTwoBinding(),
),
GetPage(
  name: Routes.pagethree,
  page: () => PageThree(),
  binding: PageThreeBinding(),
),

And each page would have its own controller and binding.

Usually to navigate to other page I would use Get.toNamed(Routes.pageone) like this using routing.

However, when I use tabbar/bottom navigation bar, I want to keep the scaffold's app bar and bottom navigation bar and just switch the content using getx. The only method I was able to do was having scaffold for all the pages and reload all the content whenever I click on each tabs, which is inefficient and would load unnecessary widgets everytime i switch to pages (appbar, title, bottom nav bar, etc.).

The usual method of loading tab contents like

List<Widget> _widgetOptions = <Widget>[
  PageOne(),
  PageTwo(),
  PageThree(),
];

isn't using getx GetPage() with binding, and would load all the controllers of all pages. I can't find proper reference of using GetPage() and bottom nav bar.

For example, my navigation stack when loading app would be /main/pageone and would stack each page into my stack whenever I switch tab. (/main/pageone click tab3-> /main/pageone/pagethree) And when I press each tab the controller for that tab would be loaded and previous controller would be deleted.

I am unsure what I should put into the body of my scaffold, which would receive widget but using GetPage with binding confuses me.

Here is the page file code for my app

class MyPage extends GetView<MyPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Title'),
      ),
      body: 
      /// this is the part where I'm lost on what to put
      SafeArea(
        child: IndexedStack(
          index: controller.curTabIdx.value,
          children: [
            controller.mainContent.value,
          ],
        )
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) => controller.onNavTap(value),
        currentIndex: controller.curTabIdx.value,
        items: [
          BottomNavigationBarItem(label: 'Page 1'),
          BottomNavigationBarItem(label: 'Page 2'),
          BottomNavigationBarItem(label: 'Page 3'),
        ],
      ),
    );
  }
}

If you need controller code as well, I can insert it as well.

https://github.com/jonataslaw/getx/issues/680#issuecomment-703881801 — Trenton McKinney, May 18 '21 at 22:30

score -2 · Answer 1 · edited Mar 26 '22 at 18:27

I think you can solve this problem adding Obx() to observe your var so can respond as you wish.

In the third pillar you can see they talking about state management using Obx():

"And in the UI, when you want to show that value and update the screen whenever the values changes, simply do this:"

Obx(() => Text("${controller.name}"));

class MyPage extends GetView<MyPageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Title'),
      ),
      body: 
      Obx(
         () {
          return SafeArea(
            child: IndexedStack(
              index: controller.curTabIdx.value,
              children: [
                controller.mainContent.value,
              ],
            )
          );
        }
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) => controller.onNavTap(value),
        currentIndex: controller.curTabIdx.value,
        items: [
          BottomNavigationBarItem(label: 'Page 1'),
          BottomNavigationBarItem(label: 'Page 2'),
          BottomNavigationBarItem(label: 'Page 3'),
        ],
      ),
    );
  }
}

Flutter Getx BottomNavigation with GetPage

1 Answers1