Flutter webview实现以及Appbar和手机返回键的监听

2019年7月13日 548次阅读 来源: 椎名月华

webview部分

在Android中我们经常会需要打开一些html前端界面，这个时候我们通常都会使用webview通过url来加载网页，而在Flutter中是否也有类似webview的Widget呢？很可惜，答案是暂时没有，但是却有一个插件可以使用，那就是 flutter_webview_plugin。

flutter_webview_plugin基本使用：

1.要使用flutter_webview_plugin，首先要去pubspec.yaml文件下先配置导入插件

dependencies:
  flutter_webview_plugin: ^0.3.0+2

值得一提的是这个文件对于代码格式有着极高的要求，像Python一样需要严格对齐。
添加以后点击右上角的Packages get等待导入。
2.导入成功后在需要webview的Dart文件下导包

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

我这里因为只是一个Demo，所以我就直接贴源码了：

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    routes: {
      '/':(_) => new WebviewScaffold(
          url: "http://www.baidu.com/",
          appBar: new AppBar(
            title: new Text("webview"),
          ),
      ),
    },
  ));
}

运行效果如下：
《Flutter webview实现以及Appbar和手机返回键的监听》

这里还不得不说一件事，因为webview不存在于widget树中导致想在webview上弹出Flutter的Dialog我暂时还未能找到解决办法。

监听Appbar和手机返回键部分

如果想监控返回键和Appbar上的返回键，可以使用Flutter中的WillPopScope，具体的我就不说了，直接贴代码，里面的参数大家应该也看得懂

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class WebViewPage extends StatelessWidget {
  String title;
  String url;
  BuildContext context;
  WebViewPage(String title,String url){
    this.title=title;
    this.url=url;
  }

  Future<bool> _requestPop() {
    Navigator.of(context).pop(100);///弹出页面并传回int值100，用于上一个界面的回调
    return new Future.value(false);
  }


  @override
  Widget build(BuildContext context) {
    this.context=context;
    // TODO: implement build
    return
      new WillPopScope(
        child:
        new WebviewScaffold(
          url: url,
          appBar: new AppBar(
            iconTheme: IconThemeData(
                color: Colors.white
            ),
            backgroundColor: Color.fromARGB(255, 41, 58, 144),
            title: new Text(title,style: new TextStyle(color: Colors.white),),
          ),
        ),
        onWillPop: _requestPop);
  }
}

///这里是上一个界面用于接收webview返回键回调的部分
int coordinates = await Navigator.of(_context).push(
        MaterialPageRoute(
        builder: (_context) => new WebViewPage("test", data.url)
    )
);
if(coordinates==100){
 ///这里填上当接收回调成功后要执行的操作
}
    原文作者：椎名月华
    原文地址: https://blog.csdn.net/qq_39347285/article/details/86219020
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞