7

I'm developing an app in flutter, and i got stuck while trying to preload a page in webview. Basically, the app uses tabbar, with a few tabs with normal listview content in them, and 2 tabs that should have webview as content. Any idea how to preload the webviews and keep them alive in background while the app loads, so when the user swipes between tabs, and gets on the webview ones, the sites are already loaded and rendered so the UX is seamless. I have tried creating the WebView instance and assigning it to a variable using setstate on app load, but to no avail.

Any help would be appreciated.

C. Zoe
  • 81
  • 1
  • 5

2 Answers2

3

So what you can try doing is this:

Wrap the widgets you are calling in your TabBar with a PageView like shown here.

You can also ensure that the WebView stays alive after loading once by extending your stateful widget with AutomaticKeepAliveClientMixin. While using this ensure that you declare: 

 bool get wantKeepAlive => true;

Edit: In order to preload all your pages when your app launches you can use Indexed Stack in the class your TabBar is declared. Wrap the body and call all the pages there like this:

  Widget build(BuildContext context) {
    return
     Scaffold(
      body:IndexedStack(
              index: _selectedIndex,
              children: _children,
            ),),}
Simran Aswani
  • 1,236
  • 3
  • 19
  • 42
  • 2
    I am using automatic keep alive, and it is doing its job of not reloading the webview every time, however, it doesn't solve my problem of preloading the webview, as the main idea is when the user swipes to let's say tab 3, the webview is already loaded and the site is ready, i can't figure out how to load the webpage in background so it is ready for displaying – C. Zoe May 25 '20 at 00:07
1

You can wrap your webview with the OffStage widget and set the offstage parameter to true. When some events are trigger and you're ready to show the page, flip the offstage parameter to false.

timtasay
  • 11
  • 2