WebView into SizedBox Flutter

Question

I would like to add a custom webview into a sizedBox in flutter... I've tried to do that but there is an error:

code:

@override
   Widget build(BuildContext context) {   
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    return new Scaffold(
      key: _scaffoldKey,
         floatingActionButton: new Row(
        mainAxisSize: MainAxisSize.min,
            children: <Widget>[
                new GestureDetector(
                  child: new Image.network("http://modernworfare.altervista.org/pause.png", width: 80.0,),
                  onTap: (){stop(); _showSnackBar();}, 
                ),
                new GestureDetector(
                  child: new Image.network("http://modernworfare.altervista.org/bg.png",width: 80.0,),
                  onTap: (){play(); _showSnackBar2();},
                ),
              ],
         ),
      backgroundColor: Colors.black,
      body: new ListView(
        children: <Widget>[
        new Column(
        children: <Widget>[
          new Image.network("https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/16864236_1836092593321492_1828236030296093399_n.jpg?_nc_cat=0&oh=817190c0ef6ac6e3076582905997f3e9&oe=5B81BFF9"),
          new Divider(),
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  WEBSITE  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
                borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  SOCIAL  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
                borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  SHOP  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
               borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              ),
              new Container(
              padding: new EdgeInsets.all(8.0),
              child: new Text("  CONTACT  ", style: new TextStyle(color: Colors.white,)),
              decoration: new BoxDecoration(
               borderRadius: new BorderRadius.circular(10.0),
                border: new Border.all(
                  width: 4.0,
                  color: Colors.white,
                  ),
                ),
              )],
          ),
          new Text("hi",style: new TextStyle(color: Colors.white), ), 
          new SizedBox(
            height: 50.0,
            width: 600.0,
            child: webview.launch("url",
            )
          ),  
          ],
        )],
      ),
    );
  }

error:

The argument type 'Future' can't be assigned to the parameter type 'Widget'.

any suggestions or ideas? is it possible to do that? maybe adding a future builder or something like that?

Answer 1

Issue: Webview is not giving you full height for calculating its height you need to find the total content height when page is finished.

Here is the solution I found from here

StreamBuilder<double>(
          initialData: 100,
          stream: streamController.stream,
          builder: (context, snapshot) {
            return Container(
              height: snapshot.data,
              child: WebView(
                initialUrl:
                    'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(contentText))}',
                onPageFinished: (some) async {
                  double height = double.parse(
                      await _webViewController.evaluateJavascript(
                          "document.documentElement.scrollHeight;"));
                  streamController.add(height);

                },
                onWebViewCreated: (_controller) {
                  _webViewController = _controller;
                },
                javascriptMode: JavascriptMode.unrestricted,
              ),
            );
          }
        );

Note: I have used here streambuilder to avoid unnecessary "setstate" while building widget.

Please let me know if this solutions works or not.

Answer 2

You can use my plugin flutter_inappwebview, which allows you to add inline webviews through the InAppWebView widget and much more.

So, you can add the InAppWebView widget like this in your code:

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    return new Scaffold(
      key: _scaffoldKey,
      floatingActionButton: new Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new GestureDetector(
            child: new Image.network("http://modernworfare.altervista.org/pause.png", width: 80.0,),
            onTap: (){stop(); _showSnackBar();},
          ),
          new GestureDetector(
            child: new Image.network("http://modernworfare.altervista.org/bg.png",width: 80.0,),
            onTap: (){play(); _showSnackBar2();},
          ),
        ],
      ),
      backgroundColor: Colors.black,
      body: new ListView(
        children: <Widget>[
          new Column(
            children: <Widget>[
              new Image.network("https://scontent-mxp1-1.xx.fbcdn.net/v/t1.0-9/16864236_1836092593321492_1828236030296093399_n.jpg?_nc_cat=0&oh=817190c0ef6ac6e3076582905997f3e9&oe=5B81BFF9"),
              new Divider(),
              new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  new Container(
                    padding: new EdgeInsets.all(8.0),
                    child: new Text("  WEBSITE  ", style: new TextStyle(color: Colors.white,)),
                    decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(10.0),
                      border: new Border.all(
                        width: 4.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  new Container(
                    padding: new EdgeInsets.all(8.0),
                    child: new Text("  SOCIAL  ", style: new TextStyle(color: Colors.white,)),
                    decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(10.0),
                      border: new Border.all(
                        width: 4.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  new Container(
                    padding: new EdgeInsets.all(8.0),
                    child: new Text("  SHOP  ", style: new TextStyle(color: Colors.white,)),
                    decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(10.0),
                      border: new Border.all(
                        width: 4.0,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  new Container(
                    padding: new EdgeInsets.all(8.0),
                    child: new Text("  CONTACT  ", style: new TextStyle(color: Colors.white,)),
                    decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(10.0),
                      border: new Border.all(
                        width: 4.0,
                        color: Colors.white,
                      ),
                    ),
                  )],
              ),
              new Text("hi",style: new TextStyle(color: Colors.white), ),
              new SizedBox(
                  height: 50.0,
                  width: 600.0,
                  child: InAppWebView(
                    initialUrl: "https://flutter.dev",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                  )
              ),
            ],
          )],
      ),
    );
  }