AutomaticKeepAliveClientMixin not working with a BottomNavigationBar Page

Question

I'm trying to keep only one page alive, but it doesn't work. I have all the required stuff.

added the with AutomaticKeepAliveClientMixin<PageName>
added the @override bool get wantKeepAlive => true; at the end
added the super.build(context); inside the build

Here's the code of the Page with the AutomaticKeepAliveClientMixin:

class MatchingPage extends StatefulWidget {
  //
  static final id = 'match';
  //
  @override
  _MatchingPageState createState() => _MatchingPageState();
}

class _MatchingPageState extends State<MatchingPage> with AutomaticKeepAliveClientMixin<MatchingPage> {

  @override
    void initState() {
      super.initState();
      print('MATCHING PAGE');
      print(User.uid);
    }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    setState(() {
      screenHeight = MediaQuery.of(context).size.height;
      screenWidth = MediaQuery.of(context).size.width;
    });
    return ModalProgressHUD(
      inAsyncCall: showSpinner,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.white.withOpacity(0.10), 
          statusBarIconBrightness: Brightness.dark),
        child: Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            child: Text('MatchPage'),
          ),
        ),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

And here's the code of the Page that has the BottomNavBar:

List<Widget> _pages = [ProfilePage(), MatchingPage(), ChatsPage()];

class HomePage extends StatefulWidget {
  //
  static String id = 'home';
  //
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //
  int pageIndex = 1;
  //

  @override
  Widget build(BuildContext context) {
    return CustomScaffoldWithNavBar(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: pageIndex,
        selectedItemColor: Colors.balck,
        unselectedItemColor: _kAppIconGray,
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
        ],
        onTap: (int index) {
          setState(() => pageIndex = index);
        },
      ),
      child: _pages[pageIndex],
    );
  }
}

score 4 · Accepted Answer · answered Jul 19 '20 at 13:26

Try to use PageView. The PageView widget wraps the current pages with PageStorage, and should keep the page state

List<Widget> _pages = [ProfilePage(), MatchingPage(), ChatsPage()];

class HomePage extends StatefulWidget {
  //
  static String id = 'home';
  //
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  //
  int pageIndex = 1;
  PageController _pageController;
  //
  @override
  void initState() {
    _pageController = PageController(initialPage: pageIndex, keepPage: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CustomScaffoldWithNavBar(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
      backgroundColor: Colors.white,
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        currentIndex: pageIndex,
        selectedItemColor: Colors.balck,
        unselectedItemColor: _kAppIconGray,
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
          BottomNavigationBarItem(icon: Icon(...), title: Text('')),
        ],
        onTap: (int index) {
          setState(() {
            pageIndex = index;
            _pageController.jumpToPage(index);
          } );
        },
      ),
      child: PageView(
                physics: NeverScrollableScrollPhysics(),
                controller: _pageController,
                children: _pages,
              ),
    );
  }
}

AutomaticKeepAliveClientMixin not working with a BottomNavigationBar Page

1 Answers1

Linked