Second screen below WebviewScaffold

[jordansilva]

Using WebviewScaffold with appBar and bottomNavigationBar bugs the Navigation.push.

I'm using the WebviewScaffold as my primary route "/", with two IconButtons inside a Row, in the bottomNavigationBar. Also, using the AppBar inside the WebviewScaffold.
Opening the second page replaces only the AppBar and the BottomNavigationBar, the WebView is still there.

Maybe I'm doing something wrong with the Navigator, I don't know. :/

MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (_) => WebView(),
      },
    );

... 

class _WebViewState extends State<WebView> {
  
  @override
  Widget build(BuildContext context) {
    return new WebviewScaffold(
      url: "https://www.google.com",
      appBar: AppBar(title: Text("First WebPage")),
      bottomNavigationBar: bottomNavigation(context),
    );
  }

  @override
  void dispose() {
    _flutterWebView.dispose();
    super.dispose();
  }

  /// Buttons
  Row bottomNavigation(context) {
    return Row(
      children: <Widget>[
        IconButton(
            icon: Icon(Icons.list),
            onPressed: () {
              openList(context);
            }),
        IconButton(icon: Icon(Icons.phone_android), onPressed: openNativeScreen)
      ],
      mainAxisAlignment: MainAxisAlignment.center,
    );
  }

  ///Actions
  void openList(BuildContext context) {
    Navigator.push(context, new NavigationRoute(builder: (context) => new ListScreen()));
  }
}

[slightfoot]

Please retest with latest version 0.3.0+2. If it still fails. Please post full code example and it will be looked into further.

[jordansilva]

@slightfoot The problem remains. I need to hide the Webview before Navigator.push in void openList(BuildContext context) to make it works.

[xinnai]

Same problem with me. I have a bottom tabbar and make WebviewScaffold inside as a tab. But when I select this tab, the WebView totally cover on the whole screen and I couldn't see the tabbar on the bottom. Even if I use rect , when I select another tab ,the WebView is still there.

[xinnai]

version 0.3.0+2 fix my first problem, now webview don't cover above tabbar. But when I select another tab, webview on first tab still there, only appBar changes.

[stevenjoezhang]

I'm using IndexedStack to manage tabs, and the same problem occurs.

[patrickc3]

@slightfoot The problem remains. I need to hide the Webview before Navigator.push in void openList(BuildContext context) to make it works.

Can you post a simple sample of it? I got the same problem but i can't hide it.. only the topbar changed :/

[klugier]

I can confirm that the issue is present. I tested with the latest version of the plugin and here is the code that I call to spawn the view above browser:

  Widget _buildSignInScaffold(BuildContext contex) {
    return WebviewScaffold(
      url: _model.config.forge.authorizationUrl,
      appBar: AppBar(
        title: const Text("Sign in"),
        actions: <Widget>[_buildOptionAction(context)],
      ),
      ...

Widget _buildOptionAction(BuildContext context) {
    return IconButton(
        icon: Icon(Icons.settings),
        tooltip: "Settings",
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SettingsView()), // Webview hides spawned view
          );
        });
  }

[cremor]

Any news on when this might be fixed?

[dri94]

+1 with this issue

[yanxing]

same problem

[gyj129129]

+1 with this issue

[Bhuvaneswar]

Even I am facing same problem @xinnai is problem solved
when I select another tab, webview on first tab still there, only appBar changes.

[hienlh]

No one can help. Because the base code render web view on top of all widgets.

[klugier]

@hienlh - you are right is it working as it is designed. As README.MD says:

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. You won't be able see snackbars, dialogs, or other flutter widgets that would overlap with the region of the screen taken up by the webview.

To overcome this issue you should use another web view that integrates with the widget tree like https://pub.dev/packages/webview_flutter or workaround it by changing logic in your application like we did in the past.

[hienlh]

@hienlh - you are right is it working as it is designed. As README.MD says:

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. You won't be able see snackbars, dialogs, or other flutter widgets that would overlap with the region of the screen taken up by the webview.

To overcome this issue you should use another web view that integrates with the widget tree like https://pub.dev/packages/webview_flutter or workaround it by changing logic in your application like we did in the past.

Thanks but I used 2 other packages (Inappwebview and webview_flutter). But they also have other problems. So I did change my logic to use this package, though it's so inconvenient

[salva9315]

Hi,
Maybe it isn't the best solution but I have solved the same issue using IndexedStack and an event emitter calling method flutterWebViewPlugin.hide() when I'm switching tab

[dri94]

@salva9315 some sample code would be awesome

[JinYuanHong]

@dri94 the key code.
final _flutterWebViewPlugin = FlutterWebviewPlugin();
_flutterWebViewPlugin.hide();//call this function, before you push to your controller
Navigator.of(context)
.push(MaterialPageRoute(
fullscreenDialog: true,
builder: (context) {
return PhotoViewGalleryScreen(
images: event.imageList,
index: event.index,
);
}))
.then((value) {
_flutterWebViewPlugin.show();
});

[paurakhsharma]

This fixed the issue for me, hope it helps someone else :)

onPressed: () async {
              flutterWebViewPlugin.hide();
              await Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => NetworkTestScreen(),
                ),
              );
              flutterWebViewPlugin.show();
            },

[mehmetyilmaz001]

+1 same problem here.

I also fixed by adding flutterWebViewPlugin.hide(); before route change

Thank you

[dnadawa]

This fixed the issue for me, hope it helps someone else :)

onPressed: () async {
              flutterWebViewPlugin.hide();
              await Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => NetworkTestScreen(),
                ),
              );
              flutterWebViewPlugin.show();
            },

This is worked for me well