在颤振中的模态底部工作表中实现 WebView

imgkl 发表于 Dev

imgkl

我想实现带有 webview 作为子项的模式底部工作表。当我尝试这样做时，webview 变得一团糟，工作表出现在屏幕顶部而不是底部。

我试图改变高度，但没有任何效果。

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"),
),
),

我想让整个 webview 包裹到模态底部工作表的高度。

嘉宝品牌X

你正在返回一个MaterialApp内部另一个。原因是您使用的插件迫使您这样做。

最好使用官方的 Flutter WebView 插件。

webview_flutter: ^0.3.9+1

然后像这样使用它：

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

这是结果：