在flutter中如何使底部导航栏在访问前不加载屏幕

Question

I am using Getx State Management in my project. My app is giving bad performance as too many controllers get loaded at the same time if I use bottom navigation bar in flutter.

I want to load only one screen at a time until and unless i dont visit to another index of navigation bar.

How can i achieve this in my code, currently after login it is loading every screen before i visit in flutter which is making it tough for me as i want the data to reload before showing the screen.

import 'package:projectName/views/home/index.dart';
import 'package:projectName/views/profile/index.dart';
import 'package:projectName/views/profile/views/Prescription/index.dart';
import 'package:projectName/views/profile/views/orders/index.dart';
import 'package:projectName/widgets/BottomNavigator/BottomNavigatorController.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomNavigatorWidget extends StatelessWidget {
  final BottomNavigatorController controller =
      Get.put(BottomNavigatorController());
  @override
  Widget build(BuildContext context) {
    return GetBuilder<BottomNavigatorController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.tabIndex.value,
              children: [
                Homepage(),
                MyOrders(),
                PrescriptionPage(),
                MyProfile(),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black45,
            selectedItemColor: Color(0xFF2e3192),
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex.value,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 50,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.house_fill,
                label: 'Home',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.cube_box_fill,
                label: 'My Orders',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.square_list_fill,
                label: 'Prescription',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person_alt_circle_fill,
                label: 'Account',
              ),
            ],
          ),
        );
      },
    );
  }

  _bottomNavigationBarItem({IconData icon, String label}) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      label: label,
    );
  }
}

Here is the Controller.dart file

import 'package:get/get.dart';

class BottomNavigatorController extends GetxController {
  Rxn<int> tabIndex = Rxn<int>(0);

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

Answer 1

IndexedStack widgets' purpose is to show one widget at a time among multiple widgets. But, IndexedStack will build and load all the widgets passed to it during load, which this result in too many controllers get loaded at the same time in your app.

try using TabBarView or a normal list instead of IndexedStack

import 'package:projectName/views/home/index.dart';
import 'package:projectName/views/profile/index.dart';
import 'package:projectName/views/profile/views/Prescription/index.dart';
import 'package:projectName/views/profile/views/orders/index.dart';
import 'package:projectName/widgets/BottomNavigator/BottomNavigatorController.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BottomNavigatorWidget extends StatelessWidget {
  final BottomNavigatorController controller =
      Get.put(BottomNavigatorController());

  final _pages = [
    Homepage(),
    MyOrders(),
    PrescriptionPage(),
    MyProfile(),
  ];

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BottomNavigatorController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: _pages[controller.tabIndex.value],
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black45,
            selectedItemColor: Color(0xFF2e3192),
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex.value,
            showSelectedLabels: true,
            showUnselectedLabels: true,
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 50,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.house_fill,
                label: 'Home',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.cube_box_fill,
                label: 'My Orders',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.square_list_fill,
                label: 'Prescription',
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person_alt_circle_fill,
                label: 'Account',
              ),
            ],
          ),
        );
      },
    );
  }

  _bottomNavigationBarItem({IconData icon, String label}) {
    return BottomNavigationBarItem(
      icon: Icon(icon),
      label: label,
    );
  }
}