How to persist state between tabs (TabBar) in Flutter?

Question

I have a TabBarView with 3 TabBar. When I'm in tab 1 I do something, then I navigate to tab 2 when I come back to tab 1 I want to the previous state of tab 1 will not change.

How can I achieve this in Flutter?

Below is my code screenshot

class _LandingPageState extends State<LandingPage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  PageController pageController;
  TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    pageController = PageController(initialPage: 0)
      ..addListener(() {
        setState(() {
          _selectedIndex = pageController.page.floor();
        });
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
              bottomNavigationBar: BottomNavigationBar(
              currentIndex: _selectedIndex,
              onTap: (index) {
                setState(() {
                  _selectedIndex = index;
                  tabController.animateTo(index,
                      duration: Duration(microseconds: 300),
                      curve: Curves.bounceIn);
                });
              },
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.assignment), title: Text("Các yêu cầu")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.history), title: Text("Lịch sử")),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person), title: Text("Hồ sơ")),
              ]),
          body: TabBarView(
              controller: tabController,
              children: [
                RequestPage(key: PageStorageKey<String>("request_page"),),
                HistoryPage(key: PageStorageKey<String>("history_page")),
                ProfilePage(key: PageStorageKey<String>("profile_page"))])
          ),
    );
  }

Answer 1

Make sure that all of your TabBarView children are StatefulWidgets and then add a AutomaticKeepAliveClientMixin like so in all of them, for example, for your RequestPage, it should look like this:

class RequestPage extends StatefulWidget {
  RequestPage({Key key}) : super(key: key);

  @override
  _RequestPageState createState() => _RequestPageState();
}

class _RequestPageState extends State<RequestPage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return // Your widget tree
  }

  @override
  bool get wantKeepAlive => true;
}

Answer 2

Try AutomaticKeepAliveClientMixin and override wantKeepAlive to always return true