How do I keep the page state?

[yuanjiong]

When I switch the TAB, the page reloads every time, even if I added "with AutomaticKeepAliveClientMixin"

[sooxt98]

Could you look into this first https://stackoverflow.com/a/53017855

It’s not navbar issue, but you could give me a minimal reproducible code that shows the error

On Thu, 10 Mar 2022 at 3:41 PM, yuanjiong @.***> wrote:

When I switch the TAB, the page reloads every time, even if I added "with AutomaticKeepAliveClientMixin"

— Reply to this email directly, view it on GitHub https://github.com/sooxt98/google_nav_bar/issues/73, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADGCEC2LT2WXWDJFUJSTSMDU7GRRPANCNFSM5QLZJ4GA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[yuanjiong]

@sooxt98 Thanks for such a good plugin

This is my test code, Please review it for me.

import 'package:flutter/material.dart'; import 'package:google_nav_bar/google_nav_bar.dart'; import 'package:line_icons/line_icons.dart';

class Example extends StatefulWidget { @override _ExampleState createState() => _ExampleState(); }

class _ExampleState extends State{ int _selectedIndex = 0; static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.w600); static const List _widgetOptions = [ TestPage1(), TestPage2(), TestPage3(), TestPage4(), ];

@override Widget build(BuildContext context) { print("build example page"); return Scaffold( backgroundColor: Colors.white, appBar: AppBar( elevation: 20, title: const Text('GoogleNavBar'), ), body: Center( child: _widgetOptions.elementAt(_selectedIndex), ), bottomNavigationBar: Container( decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( blurRadius: 20, color: Colors.black.withOpacity(.1), ) ], ), child: SafeArea( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8), child: GNav( rippleColor: Colors.grey[300]!, hoverColor: Colors.grey[100]!, gap: 8, activeColor: Colors.black, iconSize: 24, padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12), duration: Duration(milliseconds: 400), tabBackgroundColor: Colors.grey[100]!, color: Colors.black, tabs: [ GButton( icon: LineIcons.home, text: 'Home', ), GButton( icon: LineIcons.heart, text: 'Likes', ), GButton( icon: LineIcons.search, text: 'Search', ), GButton( icon: LineIcons.user, text: 'Profile', ), ], selectedIndex: _selectedIndex, onTabChange: (index) { setState(() { _selectedIndex = index; }); }, ), ), ), ), ); } }

class TestPage1 extends StatefulWidget { const TestPage1({Key? key}) : super(key: key); @override State createState() { return TestPage1State(); } } class TestPage1State extends State with AutomaticKeepAliveClientMixin{ @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); print("build test page 1"); return Scaffold( body: Text("test page 1"), ); } } class TestPage2 extends StatefulWidget{ const TestPage2({Key? key}) : super(key: key); @override State createState() { return TestPage2State(); } } class TestPage2State extends State with AutomaticKeepAliveClientMixin{ @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); print("build test page 2"); return Scaffold( body: Text("test page 2"), ); } } class TestPage3 extends StatefulWidget{ const TestPage3({Key? key}) : super(key: key); @override State createState() { return TestPage3State(); } } class TestPage3State extends State with AutomaticKeepAliveClientMixin{ @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); print("build test page 3"); return Scaffold( body: Text("test page 3"), ); } } class TestPage4 extends StatefulWidget{ const TestPage4({Key? key}) : super(key: key); @override State createState() { return TestPage4State(); } } class TestPage4State extends State with AutomaticKeepAliveClientMixin{ @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); print("build test page 4"); return Scaffold( body: Text("test page 4"), ); } }

[sooxt98]

you have to use pageview widget in order to let AutomaticKeepAliveClientMixin work for you