一统天下 flutter - 插件: flutter 使用 android 原生控件，并做数据通信
一统天下 flutter - 插件: flutter 使用 android 原生控件，并做数据通信
示例如下:
lib\plugin\plugin2.dart
/*
* 插件
* 本例用于演示 flutter 使用 android/ios 原生控件，并做数据通信
*
* 一、android 插件开发
* 1、主 flutter 项目要先在 android 平台中运行一下
* 2、在 android 文件夹上，使用右键菜单，然后选择 Flutter -> Open Android module in Android Studio 即可开发插件
* 3、参见 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
*
* 二、ios 插件开发
* 1、主 flutter 项目要先在 ios 平台中运行一下
* 2、在 android studio 或 visual studio code 中执行如下逻辑
* cd ios
* pod install
* 3、用 xcode 中打开 /ios/Runner.xcworkspace 即可开发插件
* 4、参见 /ios/Runner/AppDelegate.swift
*
*
* 注：插件中实现的功能不支持 flutter 的 hot reload
*/
import 'dart:async';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../helper.dart';
class Plugin2Demo extends StatefulWidget {
const Plugin2Demo({Key? key}) : super(key: key);
@override
_Plugin2DemoState createState() => _Plugin2DemoState();
}
class _Plugin2DemoState extends State<Plugin2Demo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('title'),
),
body: const _MyWidget()
);
}
}
class _MyWidget extends StatefulWidget {
const _MyWidget({Key? key}) : super(key: key);
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<_MyWidget> {
/// 用于保存从 android/ios 发送到 flutter 的数据
String _nativeToFlutterMessage = '';
/// 用于控制 android/ios 和 flutter 通信的 controller
final _controller = _MyViewController();
@override
void initState() {
_controller.addListener(() {
setState(() {
_nativeToFlutterMessage = _controller.nativeToFlutterMessage;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.red,
child: _buildNativeView(),
),
),
Expanded(
child: Container(
color: Colors.green,
child: _buildFlutterView(),
),
),
],
);
}
/// 嵌入到 flutter 中的 android/ios 的 view
Widget _buildNativeView() {
return _MyNativeView(
controller: _controller,
);
}
Widget _buildFlutterView() {
return Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("native to flutter: $_nativeToFlutterMessage"),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () {
_controller.flutterToNative("${DateTime.now().millisecondsSinceEpoch}");
},
child: const Text('发送数据给 Native'),
),
],
),
const Padding(
padding: EdgeInsets.only(bottom: 15),
child: Text(
'Flutter - View',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
],
);
}
}
/// 嵌入到 flutter 中的 android/ios 的 view
class _MyNativeView extends StatefulWidget {
final _MyViewController controller;
const _MyNativeView({required this.controller, Key? key}) : super(key: key);
@override
_MyNativeViewState createState() => _MyNativeViewState();
}
class _MyNativeViewState extends State<_MyNativeView> {
@override
Widget build(BuildContext context) {
/// 判断是否为 web 环境要用 kIsWeb
/// 如果在 web 环境使用 Platform.xxx 的话会报错的
if (kIsWeb) {
return const MyText("不支持 web 环境");
}
if (Platform.isAndroid) {
/// 嵌入到 flutter 中的 android 的 view（相关的插件在 android/app/src/main/kotlin/com/example/flutter_demo/MyFlutterPlugin2.kt）
return AndroidView(
viewType: 'com.webabcd.flutter/myview', /// 需要嵌入的 view 的标识（这是在插件中定义的）
onPlatformViewCreated: _onPlatformViewCreated, /// 传给插件的初始参数
creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'}, /// 传给插件的初始参数的编码方式
creationParamsCodec: const StandardMessageCodec(), /// 需要嵌入的 view 创建后触发的事件
);
}
if (Platform.isIOS) {
/// 嵌入到 flutter 中的 ios 的 view（相关的插件在 ios/Runner/MyFlutterPlugin2.swift）
return UiKitView(
viewType: 'com.webabcd.flutter/myview', /// 需要嵌入的 view 的标识（这是在插件中定义的）
creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'}, /// 传给插件的初始参数
creationParamsCodec: const StandardMessageCodec(), /// 传给插件的初始参数的编码方式
onPlatformViewCreated: _onPlatformViewCreated, /// 需要嵌入的 view 创建后触发的事件
);
}
return const MyText("不支持当前环境");
}
/// 对于 android 来说，这个 id 是插件中 PlatformViewFactory 的 create() 中生成的 viewId
/// 对于 ios 来说，这个 id 是插件中 FlutterPlatformViewFactory 的 create() 中生成的 viewId
void _onPlatformViewCreated(int id) {
var methodChannel = MethodChannel('com.webabcd.flutter/channel2_view$id');
widget.controller.setMethodChannel(methodChannel);
}
}
/// 用于控制 android/ios 和 flutter 通信的 controller
class _MyViewController extends ChangeNotifier {
late MethodChannel _methodChannel;
String nativeToFlutterMessage = "";
/// 接收从 android/ios 发送到 flutter 的数据
void setMethodChannel(MethodChannel methodChannel) {
_methodChannel = methodChannel;
_methodChannel.setMethodCallHandler((call) async {
switch (call.method) {
case 'nativeToFlutter':
final result = call.arguments as String;
nativeToFlutterMessage = result;
notifyListeners();
break;
}
});
}
/// 从 flutter 发送数据到 android/ios
Future<void> flutterToNative(String message) async {
await _methodChannel.invokeMethod('flutterToNative', message);
}
}
android\app\src\main\kotlin\com\example\flutter_demo\MainActivity.kt
/*
* 本例用于演示 android 插件的开发
*/
package com.example.flutter_demo
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant
class MainActivity: FlutterActivity() {
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
val plugin1 = MyFlutterPlugin1()
val plugin2 = MyFlutterPlugin2()
// 注册自定义插件，用于演示 flutter 与 android 原生之间的数据通信
flutterEngine.plugins.add(plugin1)
// 注册自定义插件，用于演示 flutter 使用 android 原生控件，并做数据通信
flutterEngine.plugins.add(plugin2)
GeneratedPluginRegistrant.registerWith(flutterEngine)
}
}
android\app\src\main\kotlin\com\example\flutter_demo\MyFlutterPlugin2.kt
/**
* 自定义插件，用于演示 flutter 使用 android 原生控件，并做数据通信
*/
package com.example.flutter_demo
import android.content.Context
import android.view.View
import androidx.annotation.NonNull
import io.flutter.Log
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory
// 自定义插件
class MyFlutterPlugin2: FlutterPlugin {
override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
flutterPluginBinding.platformViewRegistry.registerViewFactory(
"com.webabcd.flutter/myview", // 指定 view 的标识，在 flutter 中通过此标识使用这个 view
MyPlatformViewFactory(flutterPluginBinding.binaryMessenger) // binaryMessenger 用于后续通过 MethodChannel 传输二进制数据
)
}
override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {
}
}
// 自定义 PlatformViewFactory 用于创建一个 PlatformView
class MyPlatformViewFactory(private val binaryMessenger: BinaryMessenger)
: PlatformViewFactory(StandardMessageCodec.INSTANCE) { // StandardMessageCodec 用于指定初始参数的编码方式，要与 AndroidView 的 creationParamsCodec 一致
// viewId - 创建的 view 实例的 id（当这个 view 创建成功后，回调 AndroidView 的 onPlatformViewCreated 时，会把这个 viewId 传递过去）
// args - 在 flutter 中通过 AndroidView 的 creationParams 传递过来的初始参数
override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
return MyPlatformView(context!!, viewId, args, binaryMessenger)
}
}
// 自定义 PlatformView 用于将指定的 android 中的 view 嵌入到 flutter 中
class MyPlatformView(private val context: Context, viewId: Int, args: Any?, binaryMessenger: BinaryMessenger)
: PlatformView, MethodChannel.MethodCallHandler {
// 需要嵌入到 flutter 中的 android 的 view
private var _myView: MyView
// 用于 flutter 与 android 之间的通信
private var _methodChannel: MethodChannel
init {
// 创建一个 MethodChannel 并指定其名称，它用于 flutter 和 android 插件之间的通信（在 flutter 中通过名称获取此 channel 后就可以通信了）
// binaryMessenger 的意思是这个 MethodChannel 用于传输二进制数据
_methodChannel = MethodChannel(binaryMessenger, "com.webabcd.flutter/channel2_view$viewId")
_methodChannel.setMethodCallHandler(this)
_myView = MyView(context, null)
// android 中的 view 需要发数据到 flutter
_myView.setOnAndroidToFlutterHandler(object : OnAndroidToFlutterHandler {
override fun onAndroidToFlutter(message: String) {
// 通过 MethodChannel 从 android 发送数据到 flutter
_methodChannel.invokeMethod("nativeToFlutter",message)
}
})
// 获取在 flutter 中通过 AndroidView 的 creationParams 传递过来的初始参数
val dict = args as? Map<String, Any?>
if (dict != null) {
_myView.showMessage("flutter 创建 AndroidView 时的初始参数 k1:${dict.getValue("k1") as String}, k2:${dict.getValue("k2") as String}")
}
}
// 返回需要嵌入到 flutter 中的 android 的 view
override fun getView(): View? {
return _myView
}
// flutter 调用 android 插件中的方法时，会执行到这里（更详细的说明请参见 MyFlutterPlugin1.kt）
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
when (call.method) {
"flutterToNative" -> {
val message = call.arguments as String
_myView?.showMessage("flutter to android: $message")
result.success(true)
}
else -> result.notImplemented()
}
}
override fun dispose() {
Log.i("MyPlatformView", "dispose")
}
}
android\app\src\main\kotlin\com\example\flutter_demo\MyView.kt
/**
* 本例的 view 用于显示在 flutter 中
*/
package com.example.flutter_demo
import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.View
import android.widget.Button
import android.widget.FrameLayout
import android.widget.TextView
class MyView(context: Context, attrs: AttributeSet?) : FrameLayout(context, attrs) {
private var textView: TextView? = null
private var onAndroidToFlutterHandler: OnAndroidToFlutterHandler? = null
init {
val rootView = LayoutInflater.from(context).inflate(R.layout.view_my, this, true)
initView(rootView)
}
private fun initView(rootView: View) {
textView = rootView.findViewById(R.id.textView)
rootView.findViewById<Button>(R.id.button).setOnClickListener {
// 用于从 android 发送数据到 flutter
onAndroidToFlutterHandler?.onAndroidToFlutter("${System.currentTimeMillis()}")
}
}
fun setOnAndroidToFlutterHandler(handler: OnAndroidToFlutterHandler?) {
onAndroidToFlutterHandler = handler
}
// 用于显示 flutter 发送到 android 的数据
fun showMessage(message: String) {
textView?.text = message
}
}
interface OnAndroidToFlutterHandler {
fun onAndroidToFlutter(message: String)
}
android\app\src\main\res\layout\view_my.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="20dp"
android:text="发送数据给 flutter" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button"
android:layout_centerHorizontal="true"
android:padding="20dp"
android:textSize="14dp"
android:text="" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="15dp"
android:text="Android - View"
android:textSize="24dp"
android:textStyle="bold" />
</RelativeLayout>
