title: Flutter Getx BottomNavigation with GetPage
body: <p>I'm using getx navigation with page binding - for example:</p>
  <pre><code>GetPage(
    name: Routes.pageone,
    page: () =&gt; PageOne(),
    binding: PageOneBinding(),
  ),
  GetPage(
    name: Routes.pagetwo,
    page: () =&gt; PageTwo(),
    binding: PageTwoBinding(),
  ),
  GetPage(
    name: Routes.pagethree,
    page: () =&gt; PageThree(),
    binding: PageThreeBinding(),
  ),
  </code></pre>
  <p>And each page would have its own controller and binding.</p>
  <p>Usually to navigate to other page I would use
  <code>Get.toNamed(Routes.pageone)</code> like this using routing.</p>
  <p>However, when I use tabbar/bottom navigation bar, I want to <strong>keep the scaffold's app bar and bottom navigation bar and just switch the content using getx</strong>. 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.).</p>
  <p>The usual method of loading tab contents like</p>
  <pre><code>List&lt;Widget&gt; _widgetOptions = &lt;Widget&gt;[
    PageOne(),
    PageTwo(),
    PageThree(),
  ];
  </code></pre>
  <p>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.</p>
  <p>For example, my navigation stack when loading app would be <code>/main/pageone</code> and would stack each page into my stack whenever I switch tab. (<code>/main/pageone</code> click tab3-&gt; <code>/main/pageone/pagethree</code>) And when I press each tab the controller for that tab would be loaded and previous controller would be deleted.</p>
  <p>I am unsure what I should put into the <code>body</code> of my scaffold, which would receive widget but using GetPage with binding confuses me.</p>
  <p>Here is the page file code for my app</p>
  <pre><code>class MyPage extends GetView&lt;MyPageController&gt; {
    @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) =&gt; controller.onNavTap(value),
          currentIndex: controller.curTabIdx.value,
          items: [
            BottomNavigationBarItem(label: 'Page 1'),
            BottomNavigationBarItem(label: 'Page 2'),
            BottomNavigationBarItem(label: 'Page 3'),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>If you need controller code as well, I can insert it as well.</p>