Question 223006 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to maintain page state?

I am using Flutter 3 and go_router v10.0.0 to develop a program.

This program uses the bottomNavigationBar(PageA, PageB, PageC), I hope that after these pages are routed back and forth, the pages can still maintain their state.
For example, pageA is a ListView, and now a lot of data has been loaded. When I return to pageA from page B or C, pageA is still what I left at that time.

I realized this function by querying the document(https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/stateful_shell_route.dart).

Now I use TabBarView in PageA, and each View is still a page that loads ListView through the network.

The problem now is: I wrote these codes and put them in them, but their state can’t be maintained, and they will be reloaded every time I switch TabBarView pages.

How can I solve this problem?
I have checked a lot of posts, which are either useless or out of date.
If there is a simpler way to deal with it, I can give up using go_router.

Tags:

2

Answers


  1. 0

    Use a PageStorageKey. It will maintain the state

    Login or Signup to reply.
  2. 0

    You can keep the state of the pages using mixin called AutomaticKeepAliveClientMixin:

    class HomePage extends StatefulWidget {
  const HomePage({Key? key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true; //this needs to be true

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Scaffold();
  }
}

    Do this for all Page A, B and C. Once loaded their state will be kept alive. Read this ARTICLE for better example.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search