WebviewScaffold with a drawer

[wolfkang]

Hi,
Is there a way to use a WebviewScaffold with a drawer?

I revised WebviewScaffold like this.

class MyWebviewScaffold extends StatefulWidget {
  final PreferredSizeWidget appBar;
  final String url;
  final bool withJavascript;
  final bool clearCache;
  final bool clearCookies;
  final bool enableAppScheme;
  final String userAgent;
  final bool primary;
  final List<Widget> persistentFooterButtons;
  final Widget bottomNavigationBar;
  final bool withZoom;
  final Drawer drawer;

  MyWebviewScaffold(
      {Key key,
      this.appBar,
      @required this.url,
      this.withJavascript,
      this.clearCache,
      this.clearCookies,
      this.enableAppScheme,
      this.userAgent,
      this.primary: true,
      this.persistentFooterButtons,
      this.bottomNavigationBar,
      this.withZoom,
      this.drawer})
...
class _MyWebviewScaffoldState extends State<MyWebviewScaffold> {
...
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: widget.appBar,
      persistentFooterButtons: widget.persistentFooterButtons,
      bottomNavigationBar: widget.bottomNavigationBar,
      body: new Center(child: new CircularProgressIndicator()),
      drawer: widget.drawer,
    );
  }

When I tab a drawer button, the drawer appears behind the webview.
I set the elevation of the drawer as 10000, but it's not working.
I think this is related to the Rect class of the Dart UI package.
Is there another way to use a webview with a drawer?

[lejard-h]

Hi,
Sorry but there is no clean way to do that,

The webview is not a "Flutter Widget", it is a native view on top of the flutter view, so you can draw flutter widgets on it (drawer or popup menu).

The only thing you could do, is to call resize function when drawer is showing, or I could introduce an other function to completely hide the webview but the animation won't look clean and shiny.

That kind of feature is not possible due to Flutter, they are working on draw webview directly on the widget tree, I suggest you to follow this thread. (flutter/flutter#730)

[wolfkang]

@lejard-h Thanks a lot.

[rakeshkhoodeeram]

Hello,
I tried to launch the url within a rectangle.

flutterWebviewPlugin.launch(selectedUrl,
          rect: rect,
          userAgent: kAndroidUserAgent);

Now when the keyboard appears, I resize the rectangle

 @override
  void didChangeMetrics(){
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height-MediaQuery.of(context).viewInsets.bottom;
    rect = new Rect.fromLTWH(0.0, 0.0, width, height);
    flutterWebviewPlugin.resize(rect);
  }

The rectangle is not resizing correctly to display the url.

[preeti-17]

I have found a work around for this issue of drawer get hidden behind WebviewScaffold.
Under this solution whenever I click on the drawer in appbar to open, I hide the webview reference. You can follow below steps

1. make a new file named "mywebview.dart"
2. copy the entire file "webview_scaffold.dart" and paste in mywebview.dart and modify name of the Classes to "MyWebScaffold" as you can't use "WebViewScaffold".
3. Now in your code instead of using class "WebviewScaffold" use your class that you have made "MyWebScaffold"
4. Now it is the time to use stream listeners to get to know when the drawer is open or close. Add some string eg. "open" to listener on init() method of your Drawer class and do the same in dispose() method of Drawer class, eg. "close"
5. As soon as listener listen "open", you need to call this method "webviewReference.hide();" and in case of "close" call "webviewReference.show();". All these you need to do inside a listener in init() method of your MyWebScaffold class.

This way Drawer will never get hide behind webviewscaffold and your webview always keeps its state with it, even after drawer gets open.