AutomaticKeepAliveClientMixin not working with a BottomNavigationBar Page - flutter

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],
);
}
}

Answer 1

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,
),
);
}
}