CODEWITHSUNDEEP
flutterwebviewflutter-layout
C. Zoe
C. Zoe

Reputation: 81

How to preload a webview in flutter using the official webview_flutter plugin?

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.

Upvotes: 7

Views: 3380

Answers (2)

timtasay
timtasay

Reputation: 11

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.

Upvotes: 1

Simran Aswani
Simran Aswani

Reputation: 1316

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,
            ),),}

Upvotes: 3

Related Questions