Flutter route navigaton from webview_plugin and back

Got interesting collision while trying to implement flutter navigation while WebviewScaffold rendered on the screen.
My project uses flutter_webview_plugin: ^0.3.9+1.

A named route is pushed onto navigator from an AppBar of the webview_plugin’s WebviewScaffold like this:

WebviewScaffold(
   appBar: AppBar(
      title: Text('webview'),
      actions: [
      IconButton(
         icon: Icon(Icons.supervisor_account),
         onPressed: () {
         Navigator.pushNamed(context, Routes.userPage);
      },
      )
      ]
   ),
   ...
)

 

Looks simple and neat, what can possibly go wrong? But click on button doesn’t render Routes.userPage as expected.
Well, it renders Routes.userPage, but partially. After clicking on the button Webview’s Appbar disappears and Appbar of Routes.userPage is shown, but webview screen body still occupies the most part of a screen.

Flutter webview plugin navigation

Obviously the navigation is mostly working and the new route (Routes.userPage) is valid and reachable.
It took me a while to understand that WebviewScaffold should be simply hidden via FlutterWebviewPlugin instance like this

...
IconButton(
   icon: Icon(Icons.supervisor_account),
   onPressed: () {
      Navigator.pushNamed(context, Routes.userPage);
      flutterWebviewPlugin.hide();
   },
),
...

 

also now we have to override behaviour of Back button at Login screen.
Otherwise pressing Back would not shown a webview, but rather render WebviewScaffold’s AppBar and everything that was underneath the webview.
In my case it was ascetic “Loading…” screen.
Flutter navigation back to webview plugin

The correct back navigation to the route with FlutterWebviewPlugin is pop current top route and show webview.

...
appBar: new AppBar(
   title: new Text('Flutter login demo'),
   leading: new IconButton(
   icon: new Icon(Icons.arrow_back, color: Colors.black),
      onPressed: () {
         FlutterWebviewPlugin().show();
         Navigator.of(context).pop();
      },
   )
),
...

 

Leave a Reply