flutter_webview_plugin 加载全屏页面的简单使用

Posted 2021-09-12 papermoon

由于使用webview_flutter的安卓应用存在键盘问题
(number输入框打开的是全键盘，而且键盘无法自动收起)
经过打合，可以舍弃此前已修改好的原生js的confirm、alert等弹窗适配功能，
优先保证键盘正常。
经测试，当前版本flutter_webview_plugin 0.4.0 支持弹窗
因此弃用原本采用的修改过的webview_flutter-0.3.21，改用最新的flutter_webview_plugin。

直接使用全屏会出现状态栏遮挡问题，因此需要对demo稍作修改。

自适应高度(状态栏问题)的思路：
issue:Statusbar overlapping in webview
MediaQuery 的使用方法：
Flutter MediaQuery简单使用

class MyApp extends StatelessWidget {
  final flutterWebViewPlugin = FlutterWebviewPlugin();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        "/": (_) {
          Rect _buildRect() {
            final topPadding = MediaQueryData.fromWindow(window).padding.top;
            final top = topPadding;
            var height = MediaQueryData.fromWindow(window).size.height - top;
            //height -= 56.0 + MediaQueryData.fromWindow(window).padding.bottom;
            height -= MediaQueryData.fromWindow(window).padding.bottom;
            if (height < 0.0) {
              height = 0.0;
            }
            return new Rect.fromLTWH(
                0.0, top, MediaQueryData.fromWindow(window).size.width, height);
          }

          flutterWebViewPlugin.resize(_buildRect());
          //渲染页面
          return new WebviewScaffold(
            url: "https://segmentfault.com",
            javascriptChannels: <JavascriptChannel>{
              
            },
          );
        },
      },
    );
  }
}