How to render a webview that will still running even though the parent widget screen is popped out in Flutter?

Question

So in my app, I create an additional page. When that page is opened, it will guide a user through a series of steps, that ultimately open a webview pointing to a URL in backend, that generates an image to be saved to the server. The user doesn't need to know what's being drawn in the webview, so the webview can be set invisible (opacity = 0.0).

The image can only be generated by that web page (which is why I have to open it with webview). This is a client-side javascript and HTML5 canvas process that can't be done by server-side code alone. There's actually a web page that has to be opened. And all the Flutter code need to do is to open the webview component long enough for the image to be created and automatically saved into the server.

The problem is, the process may take dozens of seconds. In my case, it takes like 7-12 seconds. And the user may press back on the page that unfortunately will close the webview too and cancel the image generation and submission. I already added an infinite circular progress indicator, but apparently, from the early user tests, some users weren't patient enough to wait that long and already pressed back before the image is finished rendering.

My question is, how can I create a webview detached from the current screen, so that even after the current screen is closed, the webview will still be running in the background?

Currently, I use flutter_webview_plugin: ^0.3.11 for this. It allows for launching webview popup that's hidden. But when I close the page, the invisible webview popup also gets closed too.

Solution

Combine Offstage widget with custom pop logic (instead of popping back, just hide the webview by setting bool offstage to true).

As per Offstage docs:

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 children are still active: they can receive focus and have keyboard input directed to them.

Animations continue to run in offstage children, and therefore use battery and CPU time, regardless of whether the animations end up being visible.

https://api.flutter.dev/flutter/widgets/Offstage-class.html

Comments

[Chen Li Yong]

Okay let me try the Offstage first. Thanks for the pointer.