Implement WebView in modal bottom sheet in flutter

Question

I want to implement the modal bottom sheet with a webview as a child in it. When I try to do it, the webview gets messed up and the sheet comes on the top of the screen instead of the bottom.

I tried to change the height but nothing really worked.

Pub dependency: flutter_webview_plugin: ^0.3.5

  void _showModelSheet() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: screenHeight / 4,
            child: new Container(
              decoration: new BoxDecoration(
                  color: Colors.amber,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(20.0),
                      topRight: const Radius.circular(20.0))),
              child: Container(
                child: new MaterialApp(
                  debugShowCheckedModeBanner: false,
                  routes: {
                    "/": (_) => new WebviewScaffold(
                          url: "https://www.google.com",
                        ),
                  },
                ),
              ),
            ),
          );
        });
  }

child: RaisedButton(
                    elevation: 10,
                    splashColor: Colors.black,
                    color: Colors.red.shade900.withOpacity(0.7),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(110)),
                    onPressed: _showModelSheet,
                    child: Text(
                      "sheet"),
),
),

I want to make the whole webview to get wrap into the height of the modal bottom sheet.

Answer 1

You are returning a MaterialApp inside another. And the reason is that the plugin you're using forces you to do that.

Better use the oficial Flutter WebView plugin.

webview_flutter: ^0.3.9+1

Then use it like this:

void _showModelSheet() {
    showModalBottomSheet(
      context: context,
      builder: (builder) {
        return new Container(
          height: MediaQuery.of(context).size.height / 4,
          child: new Container(
            decoration: new BoxDecoration(color: Colors.amber, borderRadius: new BorderRadius.only(topLeft: const Radius.circular(20.0), topRight: const Radius.circular(20.0))),
            child: Container(
                child: WebView(
              initialUrl: 'https://google.com',
            )),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          elevation: 10,
          splashColor: Colors.black,
          color: Colors.red.shade900.withOpacity(0.7),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(110)),
          onPressed: _showModelSheet,
          child: Text("sheet"),
        ),
      ),
    );
  }

This is the result: