WebView进入SizedBox Flutter [英] WebView into SizedBox Flutter

问题描述

我想在flutter中将自定义的webview添加到sizeBox中...我尝试这样做，但是有一个错误:

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

代码:

@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",
            )
          ),  
          ],
        )],
      ),
    );
  }

错误:

不能将参数类型"Future"分配给参数类型"Widget".

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?

推荐答案

问题: Webview没有为您提供完整的高度来计算其高度，您需要在页面完成后找到总内容高度.

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,
              ),
            );
          }
        );

注意:我在这里使用streambuilder来避免在构建窗口小部件时不必要的"setstate".

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

请让我知道此解决方案是否有效.

Please let me know if this solutions works or not.

这篇关于WebView进入SizedBox Flutter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！