新建項目
image-20230302134808397.png
image-20230302135317486.png
項目結構
image-20230302135906299.png
創建完成后的目錄如圖所示，其中example是測試工程，用來測試我們寫的插件。lib目錄下的文件，就是需要具體實現的。
flutter_plugin_platform_interface.dart文件就是我們定義接口的地方，flutter_plugin_method_channel.dart是對應Andoid、IOS的文件，flutter_plugin_web.dart是對應web平臺。
方法實現
Android、IOS平臺要分別實現flutter_plugin_platform_interface.dart定義的方法。這里以Android和Web為例，實現接口中的方法。
Android端
1、在android目錄上點擊右鍵，選擇Flutter菜單下的Open Android module in Android Studio
3381990-64a2e818780d689a.png
2、打開后的界面如下
image-20230302141536195.png
我們主要在FlutterPlugin這個文件的onMethodCall方法中做具體實現
無參方法的調用
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<String?> hello(){
throw UnimplementedError('hello() has not been implemented.');
}
2、在flutter_plugin_method_channel.dart類中實現上面的方法
@override
Future<String?> hello() async {
final msg = await methodChannel.invokeMethod<String>('hello');
return msg;
}
3、在flutter_plugin.dart中調用
Future<String?> hello() {
return FlutterPluginPlatform.instance.hello();
}
4、Android端實現
FlutterPlugin.kt
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
when (call.method) {
"getPlatformVersion" -> {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
}
"hello" -> {
result.success("Android invoke==>hello()")
}
else -> {
result.notImplemented()
}
}
}
5、在Example中測試
main.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_plugin/flutter_plugin.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _platformVersion = 'Unknown';
String? _msg;
final _flutterPlugin = FlutterPlugin();
@override
void initState() {
super.initState();
initPlatformState();
}
// Platform messages are asynchronous, so we initialize in an async method.
Future<void> initPlatformState() async {
String platformVersion;
// Platform messages may fail, so we use a try/catch PlatformException.
// We also handle the message potentially returning null.
try {
platformVersion = await _flutterPlugin.getPlatformVersion() ?? 'Unknown platform version';
} on PlatformException {
platformVersion = 'Failed to get platform version.';
}
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
_platformVersion = platformVersion;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
Text('Running on: $_platformVersion\n'),
Text('msg: ${_msg ?? ""}\n'),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hello();
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hello")),
],
),
),
),
);
}
}
6、測試結果
image-20230302142948784.png
可以看出，成功調用到了Android端的方法
有參方法的調用
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<String?> hi(String message){
throw UnimplementedError('hi() has not been implemented.');
}
2、在flutter_plugin_method_channel.dart類中實現上面的方法
@override
Future<String?> hi(String message) async {
Map<String, dynamic> param = <String, dynamic>{};
param["message"] = message;
final msg = await methodChannel.invokeMethod<String>('hi', param);
return msg;
}
3、在flutter_plugin.dart中調用
Future<String?> hi(String message) {
return FlutterPluginPlatform.instance.hi(message);
}
4、Android端實現
FlutterPlugin.kt
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
when (call.method) {
"getPlatformVersion" -> {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
}
"hello" -> {
result.success("Android invoke==>hello()")
}
"hi" -> {
val param = call.arguments as Map<String, String>
result.success("Android invoke==>hi(${param["message"]})")
}
else -> {
result.notImplemented()
}
}
}
5、在Example中測試
main.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
Text('Running on: $_platformVersion\n'),
Text('msg: ${_msg ?? ""}\n'),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hello();
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hello")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hi("hi");
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hi(msg)")),
],
),
),
),
);
}
Map參數方法調用
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<String?> hey(String message){
throw UnimplementedError('hey() has not been implemented.');
}
2、在flutter_plugin_method_channel.dart類中實現上面的方法
@override
Future<String?> hey(String message) async {
Map<String, dynamic> param = <String, dynamic>{};
param["message"] = message;
final msg =
await methodChannel.invokeMethod<Map<dynamic, dynamic>>('hey', param);
return msg?["message"];
}
3、在flutter_plugin.dart中調用
Future<String?> hey(String message) {
return FlutterPluginPlatform.instance.hey(message);
}
4、Android端實現
FlutterPlugin.kt
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
when (call.method) {
"getPlatformVersion" -> {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
}
"hello" -> {
result.success("Android invoke==>hello()")
}
"hi" -> {
val param = call.arguments as Map<String, String>
result.success("Android invoke==>hi(${param["message"]})")
}
"hey" -> {
val param = call.arguments as Map<String, String>
val response = mutableMapOf<String, String>()
response["message"] = "Android invoke==>hey(${param["message"]})"
result.success(response)
}
else -> {
result.notImplemented()
}
}
}
5、在Example中測試
main.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
Text('Running on: $_platformVersion\n'),
Text('msg: ${_msg ?? ""}\n'),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hello();
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hello")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hi("hi");
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hi(msg)")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hey("hey");
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hey(msg)")),
],
),
),
),
);
}
事件處理
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<String?> event(){
throw UnimplementedError('event() has not been implemented.');
}
2、在flutter_plugin_method_channel.dart類中實現上面的方法
late StreamSubscription<dynamic> _eventSubscription;
MethodChannelFlutterPlugin() {
_initEvent();
}
void _initEvent() {
_eventSubscription = _eventChannel()
.receiveBroadcastStream()
.listen((event) {
final Map<dynamic,dynamic> map = event;
switch(map["event"]){
case "demoEvent":{
String message = map["message"];
if (kDebugMode) {
print("demo event:$message");
}
}
}
}, onDone: () {}, onError: (err) {
final PlatformException e = err;
throw e;
});
}
EventChannel _eventChannel() {
return const EventChannel("flutter_plugin_demo_event");
}
@override
Future<String?> event() async{
final msg =
await methodChannel.invokeMethod<Map<dynamic, dynamic>>('event');
return msg?["message"];
}
3、在flutter_plugin.dart中調用
Future<String?> event() {
return FlutterPluginPlatform.instance.event();
}
4、Android端實現
FlutterPlugin.kt
// 事件派發對象
private var eventSink: (EventChannel.EventSink)? = null
// 事件流
private val streamHandler = object : EventChannel.StreamHandler {
override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
eventSink = events
}
override fun onCancel(arguments: Any?) {
eventSink = null
}
}
override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
channel = MethodChannel(flutterPluginBinding.binaryMessenger, "flutter_plugin_demo")
channel.setMethodCallHandler(this)
//初始化事件
val eventChannel =
EventChannel(flutterPluginBinding.binaryMessenger, "flutter_plugin_demo_event")
eventChannel.setStreamHandler(streamHandler)
}
override fun onMethodCall(@NonNull call: MethodCall, @NonNull result: Result) {
when (call.method) {
"getPlatformVersion" -> {
result.success("Android ${android.os.Build.VERSION.RELEASE}")
}
"hello" -> {
result.success("Android invoke==>hello()")
}
"hi" -> {
val param = call.arguments as Map<String, String>
result.success("Android invoke==>hi(${param["message"]})")
}
"hey" -> {
val param = call.arguments as Map<String, String>
val response = mutableMapOf<String, String>()
response["message"] = "Android invoke==>hey(${param["message"]})"
result.success(response)
}
"event" -> {
if (eventSink != null) {
val response = mutableMapOf<String, String>()
response["event"] = "demoEvent"
response["message"] = "Android invoke==>event"
eventSink?.success(response)
}
val response = mutableMapOf<String, String>()
response["message"] = "Android invoke==>event"
result.success(response)
}
else -> {
result.notImplemented()
}
}
}
5、在Example中測試
main.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
Text('Running on: $_platformVersion\n'),
Text('msg: ${_msg ?? ""}\n'),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hello();
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hello")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hi("hi");
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hi(msg)")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.hey("hey");
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用hey(msg)")),
ElevatedButton(
onPressed: () async {
var msg = await _flutterPlugin.event();
if (kDebugMode) {
print('msg from android:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用event()")),
],
),
),
),
);
}
Web端
Alert
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<String?> alert(String message){
throw UnimplementedError('alert() has not been implemented.');
}
2、在項目根目錄下新增assets文件夾，然后增加plugin.css，plugin.js文件，在plugin.js文件里加入以下代碼
function showAlert(msg) {
alert(msg);
}
3、在pubspec.yaml中增加以下配置
assets:
- assets/
4、在flutter_plugin_web.dart類中實現上面的方法
FlutterPluginWeb(){
injectCssAndJSLibraries();
}
@override
Future<String?> alert(String message) {
_showAlert(msg: message);
return Future(() => message);
}
/// [injectCssAndJSLibraries] which add the JS and CSS files into DOM
Future<void> injectCssAndJSLibraries() async {
final List<Future<void>> loading = <Future<void>>[];
final List<html.HtmlElement> tags = <html.HtmlElement>[];
final html.LinkElement css = html.LinkElement()
..id = 'plugin-css'
..attributes = {"rel": "stylesheet"}
..href = 'assets/packages/flutter_plugin/assets/plugin.css';
tags.add(css);
final html.ScriptElement script = html.ScriptElement()
..async = true
..src = "assets/packages/flutter_plugin/assets/plugin.js";
loading.add(script.onLoad.first);
tags.add(script);
html.querySelector('head')!.children.addAll(tags);
await Future.wait(loading);
}
_showAlert({String msg = ""}) {
_insertAlertJs(msg);
}
_insertAlertJs(String msg) {
String m = msg.replaceAll("'", "\\'").replaceAll("\n", "<br />");
html.Element? ele = html.querySelector("#alert-js");
String content = """
showAlert('$m');
""";
if (html.querySelector("#alert-js") != null) {
ele!.remove();
}
final html.ScriptElement scriptText = html.ScriptElement()
..id = "alert-js"
..innerHtml = content;
html.querySelector('head')!.children.add(scriptText);
}
5、在flutter_plugin.dart中調用
Future<String?> alert(String message) {
return FlutterPluginPlatform.instance.alert(message);
}
6、在Example中測試
main.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
//...
ElevatedButton(
onPressed: () async {
var msg =
await _flutterPlugin.alert("hello,web!");
if (kDebugMode) {
print('msg from web:$msg');
setState(() {
_msg = msg;
});
}
},
child: const Text("調用alert()")),
],
),
),
),
);
}
Copy
1、在flutter_plugin_platform_interface.dart類中增加方法
Future<bool?> copy(String message){
throw UnimplementedError('copy() has not been implemented.');
}
2、在plugin.js文件里加入以下代碼
function copy(msg) {
const input = document.getElementById('input_cp');
// 選擇需要復制的文本
input.focus();
if (input.setSelectionRange) {
input.setSelectionRange(0, input.value.length);
} else {
input.select();
}
try {
const result = document.execCommand('copy');
} catch (e) {
console.err("復制失敗，請重試~");
}
// 讓輸入框失去焦點
input.blur();
// 讓移動端的輸入鍵盤自動收回
document.activeElement.blur();
}
3、在plugin.css文件中加入以下代碼
.main {
position: relative;
}
.input_wrap {
position: absolute;
top: 0;
left: 0;
width: 1px;
opacity: 0;
overflow: hidden;
user-select: none;
}
.input_wrap input {
width: 1px;
resize: none;
border: none;
outline: none;
user-select: none;
color: transparent;
background: transparent;
}
4、在flutter_plugin_web.dart類中實現上面的方法
@override
Future<bool?> copy(String message) {
_copy(msg: message);
return Future(() => true);
}
_copy({String msg = ""}) {
_insertCopyHtml(msg);
_insertCopyJs(msg);
}
_insertCopyHtml(String msg) {
String m = msg.replaceAll("'", "\\'").replaceAll("\n", "<br />");
html.Element? ele = html.querySelector("#copy-html");
String content = """
<div class="input_wrap">
<input id="input_cp" type="text" readonly="true" value='$m'>
</div>
""";
if (html.querySelector("#copy-html") != null) {
ele!.remove();
}
final html.BodyElement scriptText = html.BodyElement()
..id = "copy-html"
..innerHtml = content;
html.querySelector('body')!.children.add(scriptText);
}
_insertCopyJs(String msg) {
String m = msg.replaceAll("'", "\\'").replaceAll("\n", "<br />");
html.Element? ele = html.querySelector("#copy-js");
String content = """
copy('$m');
""";
if (html.querySelector("#copy-js") != null) {
ele!.remove();
}
final html.ScriptElement scriptText = html.ScriptElement()
..id = "copy-js"
..innerHtml = content;
html.querySelector('head')!.children.add(scriptText);
}
5、在flutter_plugin.dart中調用
Future<bool?> copy(String message) {
return FlutterPluginDemoPlatform.instance.copy(message);
}
6、在Example中測試
main.dart
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example app'),
),
body: Center(
child: Column(
children: [
//...
ElevatedButton(
onPressed: () async {
var result =
await _flutterPlugin.copy("hello,web!!!");
if (kDebugMode) {
print('copy result:$result');
setState(() {
_msg = "copy result:$result";
});
}
},
child: const Text("調用copy()"))
],
),
),
),
);
}
