WebView进入SizedBox Flutter

时间:2018-05-15 16:43:20

标签: dart flutter

我想将一个自定义的webview添加到一个大小的Box中... ...我试过这样做,但是有一个错误:

代码:

@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'。

任何建议或想法? 有可能吗? 也许添加一个未来的建设者或类似的东西? 再见

6 个答案:

答案 0 :(得分:4)

问题: Webview没有为您提供完整的高度来计算其高度,您需要在页面结束时找到总内容高度。

这是我从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”。

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

答案 1 :(得分:1)

这里是webview_flutter_plus的webview_flutter扩展,它允许获取Web内容的高度,即使您在列表视图中也可以使用它,这也有助于从资产或字符串中加载HTML,CSS和Javascript内容。这会继承API稍有更改的webview_flutter的所有功能。

答案 2 :(得分:0)

您使用的是哪个webview插件?假设flutter_webview_plugin,请注意警告The webview is not integrated in the widget tree, it is a native view on top of the flutter view.

launch()不会返回Widget;它返回Future<Null>,所以即使你等待Future完成,你也不会得到一个Widget。这是警告的要点:webview(视觉上)位于Flutter应用程序的顶部 - 它不是Flutter Widget。

您可以使用

定位和调整此浮动网页视图的大小
flutterWebviewPlugin.launch(url,
              fullScreen: false,
              rect: new Rect.fromLTWH(
                  0.0, 
                  0.0, 
                  MediaQuery.of(context).size.width, 
                  300.0));

如果你能算出它的绝对位置。

使用此method,您可以找到小工具的左上角,您可以在其上定位您的网页视图:

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

答案 3 :(得分:0)

尚不支持内联WebView(窗口小部件树中的WebView窗口小部件)。据我所知,在Flutter回购中,很快就没有简单的解决方案了。如果您只想显示富文本或html文档,则会有一个名为RichText的正式小部件或一些与{h}相关联的packages

答案 4 :(得分:0)

您可以使用我的插件flutter_inappwebview,该插件可让您通过InAppWebView小工具等添加内联Web视图。

因此,您可以在代码中添加InAppWebView小部件,如下所示:

  @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) {

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

答案 5 :(得分:0)

您可以使用flutter_webview_plugin 0.3.10

它具有一个非常易于使用的小部件,以下是供您参考的代码:

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.....'),
        ),
      ),
    ),