为什么要自定义插件？
Flutter正式版本1.0是2018年12月才发布，目前还是算比较新的移动应用开发框架，虽然官方和很多大牛写了很的可以用的插件，但总有些需要你自己去写的插件，除非你的应用非常简单。
比如，你的应用用到了第三方厂商的库，但你发现第三方厂商还没有提够flutter插件，这是就需要你自己去封装一个插件了！
如何自定义一个flutter插件？
自定义一个flutter插件，需要解决两个问题：
1、怎么跟原生平台通讯，也就是怎么调用原生（安卓或ios），和原生又怎么回调Flutter？
2、怎么让原生控件，显示在flutter上？
接下来，我用一个原生的按钮显示在flutter上的例子，来实现一下。
问题分析：
1、flutter怎么给原生按钮设置按钮文字、字体、颜色等等？
flutter和原生通讯主要是通过MethodChannel
2、原生按钮怎么显示在flutter界面上？
flutter提供了一个AndroidView（android），UiKitView（ios）的控件，来实现原生显示在flutter上
3、点击按钮以后，怎么回调在flutter？
回调也是通过MethodChannel 来实现
具体来看一下代码：
1、第一步，新建一个flutter plugin （以android studio为例）
新建一个flutter plugin
button_plugin
package name
项目创建完后，目录结构如上图显示
2、在lib目录下创建一个button_view类，这个给是给flutter直接使用的widget
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//自定义一个OnClickListener回调
typedef void OnClickListener(Widget view);
typedef void ButtonCreatedCallback(ButtonController controller);
//自定Flutter可以调用的ButtonWidget
class Button extends StatefulWidget {
//定义属性
final String text;
//final double width;
//final double height;
//定义一个点击事件
final OnClickListener onListener;
//定义一个回调
final ButtonCreatedCallback onButtonCreatedCallback;
// 实现一个构造函数 text,width,height 为必传
const Button({Key key,
@required this.text,
this.onListener,
this.onButtonCreatedCallback})
: super(key: key);
@override
State<StatefulWidget> createState() {
return ButtonState();
}
}
3、实现一个ButtonState
class ButtonState extends State<Button> {
@override
Widget build(BuildContext context) {
//安卓平台
if (defaultTargetPlatform == TargetPlatform.android) {
//AndroidView 是包装原生View的关键widget
return new AndroidView(
viewType: 'plugins.metre.com/button', // 自定义唯一viewType
onPlatformViewCreated: _onPlatformViewCreated,
creationParams: _creationParams(),
creationParamsCodec: const StandardMessageCodec()//如果设置了creationParams参数，必须要设置creationParamsCodec
);
} else if (defaultTargetPlatform == TargetPlatform.iOS) {
//IOS平台
//to do list
return null;
}
//该插件暂时还不支持该平台
return Text(
'$defaultTargetPlatform is not yet supported by the the button plugin!');
}
//封装参数
Map<String, dynamic> _creationParams() {
return <String, dynamic>{
'text': widget.text
};
}
void _onPlatformViewCreated(int id) {
ButtonController controller = ButtonController._(id, widget);
if (widget.onButtonCreatedCallback != null){
widget.onButtonCreatedCallback(controller);
}
}
}
4、实现一个ButtonState
//Button回调控制
class ButtonController {
final MethodChannel _channel;
final Button _widget;
ButtonController._(int id, this._widget,) : _channel = MethodChannel('plugins.metre.com/button_$id'){
_channel.setMethodCallHandler(_methodCallHandler);
}
Future<bool> _methodCallHandler(MethodCall call) {
switch (call.method) {
case 'onClickListener':
_widget.onListener(_widget);
return null;
}
//没有该回调，抛异常
throw MissingPluginException(
'${call.method} was invoked but has no handler!');
}
}
以上四部基本上就完成了flutter端的编程。
接下来就是android端实现了
目前android目录下会生成一个xxxPlugin的问题
package com.metre.buttonplugin;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugin.common.PluginRegistry.Registrar;
/** ButtonPlugin */
public class ButtonPlugin implements MethodCallHandler {
/** Plugin registration. */
public static void registerWith(Registrar registrar) {
final MethodChannel channel = new MethodChannel(registrar.messenger(), "button_plugin");
channel.setMethodCallHandler(new ButtonPlugin());
//注册自己实现的Factory
registrar.platformViewRegistry().registerViewFactory("plugins.metre.com/button",new ButtonFactory(registrar.messenger()));
}
@Override
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getPlatformVersion")) {
result.success("Android " + android.os.Build.VERSION.RELEASE);
} else {
result.notImplemented();
}
}
}
实现ButtonFactory
package com.metre.buttonplugin;
import android.content.Context;
import java.util.Map;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.StandardMessageCodec;
import io.flutter.plugin.platform.PlatformView;
import io.flutter.plugin.platform.PlatformViewFactory;
/**
* Created by mi on 2019/5/20
*/
@SuppressWarnings("ALL")
class ButtonFactory extends PlatformViewFactory {
private final BinaryMessenger messenger;
ButtonFactory(BinaryMessenger messenger) {
super(StandardMessageCodec.INSTANCE);
this.messenger = messenger;
}
@Override
public PlatformView create(Context context, int id, Object params) {
return new ButtonPlatformView(context,id,(Map<String,Object>)params,messenger);
}
}
实现ButtonPlatformView
package com.metre.buttonplugin;
import android.content.Context;
import android.view.View;
import android.widget.Button;
import java.util.Map;
import io.flutter.plugin.common.BinaryMessenger;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.platform.PlatformView;
/**
* Created by mi on 2019/5/20
*/
class ButtonPlatformView implements PlatformView {
private Context context;
private Button button;
private MethodChannel channel;
ButtonPlatformView(Context context, int id, Map<String, Object> params, BinaryMessenger messenger) {
this.context = context;
this.button = new Button(context);
this.channel = new MethodChannel(messenger,"plugins.metre.com/button_"+id);
// 属性参数设置
if(params != null && params.containsKey("text")){
Object text = params.get("text");
button.setText(text.toString());
}
// 其他属性设置....
//设置监听
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
channel.invokeMethod("onClickListener",null);
}
});
}
@Override
public View getView() {
return button;
}
@Override
public void dispose() {
channel.setMethodCallHandler(null);
}
}
以上完成了全部编码
接下来，可以在flutter调用自己写的Button了
打开默认生成的example，加上自己的控件
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(children: <Widget>[
Text('Running on: $_platformVersion\n'),
SizedBox(
width: 200,
height: 50,
//调用自定义Button
child: Button(text:"登录",onListener:(view){
print('Button onListener-----> $view');
})
),
],)
),
),
);
}
调用完成，点击运行在手机上的效果：
运行效果
点击按钮后打印的日志：
点击Button打印日志
成功完成的原生控件的显示，和点击事件的回调。
