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

How can I pre-load a route in flutter, or keep a widget loaded even when it is off screen?

I am using GoRouter to navigate between pages of my app. One of the routes that I navigate is using the QuillHtmlEditor, which takes ~1 second to load when I navigate to it, and it loads fresh each time the user navigates to the page. I would like to keep the page with the QuillHtmlEditor loaded at all times regardless of whether it is on the screen. Is there a way to do this easily? I am having a very hard time finding any information about how to preload a route in flutter.

Tags:

2

Answers


  1. 0

    I would like to keep the page with the QuillHtmlEditor loaded at all times regardless of whether it is on the screen

    You can use the Offstage widget:

    A widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit testing, and without taking any room in the parent.

    Offstage(
      offstage: _offstage,
      child: Container(
        child: Text('Hello World'),
      ),
    ),

    Or, as an alternative, you can use IndexedStack:

    A Stack that shows a single child from a list of children.
    The displayed child is the one with the given index. The stack is always as big as the largest child.

    
Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: <Widget>[
          Widget1(),
          Widget2(),
          // ... other pages
        ],
      ),
    )
    Login or Signup to reply.
  2. 0

    In Flutter, the concept of pre-loading a route isn’t really a thing.

    A common solution is keeping the state of the widget’s controller that you want to "pre-load" stored in a higher scope. In your case it would be storing the QuillHtmlEditor’s respective QuillController, and storing it globally is probably the best way.
    Using this method, even if the widget is removed from the tree and added back, it will still maintain its state.

    Another solution, albeit a sketchy one depending on the context, is using a PageView for certain sections of your app. This allows you to keep all its children pages loaded in the widget tree, maintaining their state as long as they are inside the PageView.
    It is, of course, not a suitable approach for sections with a large number of pages or performance heavy ones.

    The Offstage and IndexedStack function in a similar way to the PageView, you will merely be "hidding" the widget while it is not used, so that it is not reloaded when you need it.

    These methods will therefore still be using the CPU and draining battery as if they were in main focus, which is why I recommend following the global / higher scope controller approach.

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

Back To Top
Search