FlutterWebViewPlugin

简述

在之前对比Flutter和安卓的时候，发现Flutter并没有webview类似的控件，于是一直就在思考要是想在Flutter里面去加载网页应该怎么做呢？流程应该是这样子的，首先一个flutter项目，主入口肯定是dart文件，但是因为flutter没有webview可用来加载网页，所以需要调用安卓原生的webview来加载。这个过程中需要一个plugin来通信。

原生部分

首先创建一个FlutterPlugin项目，然后在这里写上dart。再然后打开android文件夹，在这里面写上java。然后就完成了。
好了，不扯淡了。说正经的。首先创建一个Flutter Plugin的项目，

image
创建好之后在android文件夹下面会有一个FlutterWebviewPlugin（这个是你创建的module名）的java文件。打开是这样子的。

/** FlutterWebviewPlugin */
public class FlutterWebviewPlugin implements MethodCallHandler {
  /** Plugin registration. */
  public static void registerWith(Registrar registrar) {
    final MethodChannel channel = new MethodChannel(registrar.messenger(), "flutter_webview_plugin");
    channel.setMethodCallHandler(new FlutterWebviewPlugin());
  }

  @Override
  public void onMethodCall(MethodCall call, Result result) {
    if (call.method.equals("getPlatformVersion")) {
      result.success("Android " + android.os.Build.VERSION.RELEASE);
    } else {
      result.notImplemented();
    }
  }
}

registerWith是注册插件的方法，一般情况下不要去动他。创建一个构造器，放到setMethodCallHandler(xxx)里面就算是注册成功了。因为这个文件里面主要是实现原生的webview的加载方法，应该都比较熟悉，所以就直接上代码了。
构造器里面的初始代码：

@TargetApi(Build.VERSION_CODES.ECLAIR_MR1)
    public FlutterWebviewPlugin(Activity activity) {
        this.mContext = activity;
        vWebView = new WebView(activity);
        vWebView.getSettings().setJavaScriptEnabled(true);
        vWebView.getSettings().setLoadWithOverviewMode(true);
        vWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        vWebView.getSettings().setLoadsImagesAutomatically(true);
        vWebView.getSettings().setUseWideViewPort(true);
        vWebView.getSettings().setAllowFileAccess(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            vWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
    }

然后还剩下一个onMethodCall的方法，这个方法就是通信的主要方法。在这里就是dart来通过这个方法，调用java的webview去加载所需要加载的url地址。这里call.method可以自己定义，随便定义成什么都行，也可以定义多个。

@Override
    public void onMethodCall(MethodCall call, Result result) {
        this.result = result;
        switch (call.method) {
            case "loadWeb":
                FrameLayout.LayoutParams params = setupParamsFromFlutter(call);
                LinearLayout linearLayout = new LinearLayout(mContext);
                linearLayout.setOrientation(LinearLayout.VERTICAL);
                final TextView titleView = new TextView(mContext);
                titleView.setTextColor(Color.parseColor("#00000000"));
                ViewGroup.LayoutParams titleViewParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT);
                titleView.setLayoutParams(titleViewParams);
                titleView.setText("FlutterWebView");
                titleView.setGravity(Gravity.CENTER);
                linearLayout.addView(titleView);
                linearLayout.addView(vWebView);
                mContext.addContentView(linearLayout, params);
                vWebView.setWebViewClient(new MyWebViewClient(mContext, (title, isError) -> titleView.setText(title)));
                vWebView.loadUrl(call.argument("url").toString());
                break;
        }
    }

这里就是创建了一些布局文件，一个标题和一个加载url的webview。都是些常规操作。要说明一点的是，你可能要问我，为什么不在xml里面去写。我当时也是这个想法，context都有了，我写在xml里面再inflate一下不就行了。于是我找了下，结果发现我没有找到可以写布局文件的文件夹。创建的flutter工程里面是没有res这个东西的。因为dart文件的布局是写在dart文件里面的。

Dart部分

打开lib文件夹，里面有个创建好的文件flutter_webview_plugin.dart。

class FlutterWebviewPlugin {
  static const MethodChannel _channel = const MethodChannel('flutter_webview_plugin');

  static Future<String> get platformVersion async {
    final String version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

在这里写plugin加载的方法

//声明plugin加载的方法在这里就是launch
//url参数要加载的地址，callback回调，
//可选参数Rect（控制）plugin的大小
Future<Null> launch(
    String url,
    Function callback, {
    Rect rect,
  }) async {
    Map<String, dynamic> args = {
      "url": url,
    };
    if (rect != null) {
      args["rect"] = {
        "left": rect.left,
        "top": rect.top,
        "width": rect.width,
        "height": rect.height
      };
    }
    final String result = await _channel.invokeMethod('load', args);
 
    if (callback != null) {
      callback(result);
    }
  }

然后是main.dart部分，也是就是主要的执行文件，首先我们没有对象，得new一个对象，和java类似，final flutterWebviewPlugin= new FlutterWebviewPlugin();这个名字就是我们上面定义好的插件的名字，拿到对象之后接下来的操作就是调用他里面声明的方法，这一步操作跟java很类似，只是语言是用dart而已。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_plugin/webview_plugin.dart';
 //主入口MyApp
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Webview',
      theme: new ThemeData(
        //主题颜色
        primarySwatch: Colors.blue,
      ),
      //标题名字，这个随意
      home: new MyHomePage(title: 'Flutter WebView Demo'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
 
  final String title;
 
  @override
  _MyHomePageState createState() => new _MyHomePageState();
 
  @override
  initState() {}
}
 
class _MyHomePageState extends State<MyHomePage> {
  StreamSubscription<String> _back;
  var title = "flutter_webview_plugin";
   //webview插件
  final flutterWebviewPlugin= new FlutterWebviewPlugin()
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(body: new Center(
      //按钮点击事件
      child: new RaisedButton(onPressed: () {
        //拿到flutterwebviewplugin对象，调用他里面的launch方法（我们之前声明过的）
        flutterWebviewPlugin.launch(
            //对应launch方法里面的参数
            "https://www.baidu.com/",
            (data) {
          setState(() {
            title = data;
          });
        },
            rect: new Rect.fromLTWH(0.0, 0.0, MediaQuery.of(context).size.width,
                MediaQuery.of(context).size.height));
      }),
    ));
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
}

然后运行上面这个文件，就大功告成啦~