'WebView into SizedBox Flutter

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?

dart flutter

Solution 1:^[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.

Solution 2:^[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) {

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

Solution 3:^[3]

Here's webview_flutter_plus an extension of webview_flutter which allows getting the height of Web content which will allow you to use it even in a listview, this also helps to load HTML, CSS and Javascript content even from Assets or Strings. This inherits all features of webview_flutter with minor API changes.

Solution 4:^[4]

Which webview plugin are you using? Assuming flutter_webview_plugin, note the caveat The webview is not integrated in the widget tree, it is a native view on top of the flutter view..

launch() doesn't return a Widget; it returns Future<Null>, so even if you wait for the Future to complete you don't get a Widget. This is the point of the caveat: the webview sits (visually) on top of your Flutter app - it isn't a Flutter Widget.

You can position and size this floating webview with

flutterWebviewPlugin.launch(url,
              fullScreen: false,
              rect: new Rect.fromLTWH(
                  0.0, 
                  0.0, 
                  MediaQuery.of(context).size.width, 
                  300.0));

if you can calculate its absolute position.

Using this method you can find the top, left corner of a Widget over which you could position your webview with:

  @override
  Widget build(BuildContext context) {
    RenderObject ro = context.findRenderObject();
    if (ro is RenderBox) {
      print(ro.localToGlobal(new Offset(0.0, 0.0)));
    }

Solution 5:^[5]

An inline WebView (a WebView widget in the widget tree) isn't supported yet. As far as I see on Flutter repo, there's no easy solution for it soon. If you just want to display rich text or html document, there's an offical widget named RichText or some packages releated to html.

Solution 6:^[6]

You can use flutter_webview_plugin 0.3.10

it has a widget that is very simple to use, following is the code for your reference:

new WebviewScaffold(
      url: selectedUrl,
      appBar: new AppBar(
        title: const Text('Widget webview'),
      ),
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.redAccent,
        child: const Center(
          child: Text('Waiting.....'),
        ),
      ),
    ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hardy
Solution 2	Lorenzo Pichilli
Solution 3	Shahzad Akram
Solution 4
Solution 5	hunghd
Solution 6	Kalpesh Kundanani

'WebView into SizedBox Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]