文章目錄

• 前言
• 一、Android 端完整代碼示例
• 二、Flutter 端完整代碼示例
• 三、相關資源

前言

前置博客 :

• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | 在 Flutter 端實現 BasicMessageChannel 通信 )
• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | 在 Flutter 端實現 MethodChannel 通信 )
• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | 在 Flutter 端實現 EventChannel 通信 )
• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | Android 端實現 BasicMessageChannel 通信 )
• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | Android 端實現 EventChannel 通信 )
• 【Flutter】Flutter 混合開發 ( Flutter 與 Native 通信 | Android 端實現 MethodChannel 通信 )

執行效果 : 在 Android 端嵌入 FlutterFragment , 通過 $3$ 種不同的 Channel 進行 Android 端 與 Flutter 端進行通信 ;

一、Android 端完整代碼示例

---

package com.example.flutter_native;import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentTransaction;import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.TextView;import io.flutter.embedding.android.FlutterActivity; import io.flutter.embedding.android.FlutterFragment; import io.flutter.plugin.common.BasicMessageChannel; import io.flutter.plugin.common.EventChannel; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.StringCodec;public class MainActivity extends AppCompatActivity {private static final String TAG = "Flutter MainActivity";/*** 嵌入到 Activity 界面的 FlutterFragment*/private FlutterFragment mFlutterFragment;/*** 顯示收發消息的組件*/private TextView show_message;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);show_message = findViewById(R.id.show_message);findViewById(R.id.flutter1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {FragmentTransaction fragmentTransaction =getSupportFragmentManager().beginTransaction();// 使用該方法創建的 Fragment 沒有傳遞數據//FlutterFragment.createDefault()// 打開默認界面//fragmentTransaction.replace(R.id.frame, FlutterFragment.createDefault());mFlutterFragment = FlutterFragment.withNewEngine().initialRoute("嵌入 FlutterFragment").build();Log.i(TAG, "mFlutterFragment : " + mFlutterFragment);// 創建 FlutterFragmentfragmentTransaction.replace(R.id.frame, mFlutterFragment);fragmentTransaction.commit();//initBasicMessageChannel();new Thread(){@Overridepublic void run() {try {sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}initBasicMessageChannel();initEventChannel();initMethodChannel();Log.i(TAG, "mFlutterFragment : " + mFlutterFragment);}}.start();}});findViewById(R.id.flutter2).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent intent = FlutterActivity.withNewEngine().initialRoute("啟動 FlutterActivity").build(MainActivity.this);intent.putExtra("initParams", "啟動 FlutterActivity2");startActivity(intent);}});}/*** BasicMessageChannel 消息傳遞通道*/private BasicMessageChannel mBasicMessageChannel;/*** 初始化 BasicMessageChannel*/private void initBasicMessageChannel() {// 初始化mBasicMessageChannel = new BasicMessageChannel(mFlutterFragment.getFlutterEngine().getDartExecutor(),"BasicMessageChannel",StringCodec.INSTANCE);// 設置消息接收監聽mBasicMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler<String>() {@Overridepublic void onMessage(@Nullable String message, @NonNull BasicMessageChannel.Reply reply) {show_message.setText("Dart 通過 BasicMessageChannel 通道向 Native 發送 " + message + " 信息");}});// 點擊按鈕發送消息 , 并設置 Reply 接收 Dart 返回的消息findViewById(R.id.channel1).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mBasicMessageChannel.send("Native 通過 BasicMessageChannel 通道發送消息 Hello !",new BasicMessageChannel.Reply() {@Overridepublic void reply(@Nullable Object reply) {show_message.setText("Native 通過 BasicMessageChannel 通道發送消息 Hello 后 , Dart 反饋的信息 ");}});}});}/*** 與 Flutter 進行消息交互的通道*/private EventChannel mEventChannel;private EventChannel.EventSink mEventSink;/*** 初始化 EventChannel*/private void initEventChannel() {// 初始化 EventChannel 實例對象mEventChannel = new EventChannel(mFlutterFragment.getFlutterEngine().getDartExecutor(),"EventChannel");Log.i(TAG, "mEventChannel 初始化成功 , mEventChannel : " + mEventChannel);mEventChannel.setStreamHandler(new EventChannel.StreamHandler() {/*** 事件流建立成功會回調該方法* @param arguments* @param events*/@Overridepublic void onListen(Object arguments, EventChannel.EventSink events) {mEventSink = events;Log.i(TAG, "事件流建立成功");}@Overridepublic void onCancel(Object arguments) {mEventSink = null;}});Log.i(TAG, "mEventChannel StreamHandler 設置完成");findViewById(R.id.channel2).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Log.i(TAG, "Native 通過 EventChannel 通道發送消息 , mEventSink : " + mEventSink);// 點擊按鈕 , 向 Flutter 端發送數據if (mEventSink != null) {mEventSink.success("Native 通過 EventChannel 通道發送消息 Hello !");}}});}/*** 方法調用消息通道*/private MethodChannel mMethodChannel;/*** 初始化 MethodChannel*/private void initMethodChannel() {mMethodChannel = new MethodChannel(mFlutterFragment.getFlutterEngine().getDartExecutor(), "MethodChannel");mMethodChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {@Overridepublic void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {show_message.setText("Dart 端通過 MethodChannel 調用 Android 端的 " + call.method + " 方法 , 參數是 " + call.arguments);}});findViewById(R.id.channel3).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mMethodChannel.invokeMethod("method", "arguments");}});}}

二、Flutter 端完整代碼示例

---

import 'dart:async';import 'package:flutter/material.dart';// 使用 window.defaultRouteName 必須導入當前 UI 庫 import 'dart:ui';import 'package:flutter/services.dart';void main() => runApp(/// 該構造方法中傳入從 Android 中傳遞來的參數MyApp(initParams: window.defaultRouteName,) );class MyApp extends StatelessWidget {/// 這是從 Android 中傳遞來的參數final String initParams;/// 構造方法 , 獲取從 Android 中傳遞來的參數const MyApp({Key? key, required this.initParams}):super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: "初始參數 : $initParams"),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {/// 展示從 Native 獲取的消息String showMessage = "";static const BasicMessageChannel _basicMessageChannel =const BasicMessageChannel('BasicMessageChannel', StringCodec());static const MethodChannel _methodChannel =const MethodChannel('MethodChannel');static const EventChannel _eventChannel =EventChannel('EventChannel');/// 監聽 EventChannel 數據的句柄late StreamSubscription _streamSubscription;/// 當前使用的消息通道是否是 MethodChannelbool _isMethodChannel = false;@overridevoid initState() {/// 從 BasicMessageChannel 通道獲取消息_basicMessageChannel.setMessageHandler((message) => Future<String>((){setState(() {showMessage = "BasicMessageChannel : $message";});return "BasicMessageChannel : $message";}));/// 這里延遲 6 秒在注冊該事件/// 一定要先在 Android 中設置好 EventChannel/// 然后 , 才能在 Flutter 中設置監聽/// 否則 , 無法成功Future.delayed(const Duration(milliseconds: 6000), () {// Here you can write your code// 注冊 EventChannel 監聽_streamSubscription = _eventChannel.receiveBroadcastStream()/// StreamSubscription<T> listen(void onData(T event)?,/// {Function? onError, void onDone()?, bool? cancelOnError});.listen(/// EventChannel 接收到 Native 信息后 , 回調的方法(message) {print("Flutter _eventChannel listen 回調");setState(() {/// 接收到消息 , 顯示在界面中showMessage = message;});},onError: (error){print("Flutter _eventChannel listen 出錯");print(error);});setState(() {});});// Future<dynamic> Function(MethodCall call)? handler_methodChannel.setMethodCallHandler((call) {var method = call.method;var arguments = call.arguments;setState(() {showMessage = "Android 端通過 MethodChannel 調用 Flutter 端 $method 方法, 參數為 $arguments";});return Future.value();});/*// 注冊 EventChannel 監聽_streamSubscription = _eventChannel.receiveBroadcastStream()/// StreamSubscription<T> listen(void onData(T event)?,/// {Function? onError, void onDone()?, bool? cancelOnError});.listen(/// EventChannel 接收到 Native 信息后 , 回調的方法(message) {print("Flutter _eventChannel listen 回調");setState(() {/// 接收到消息 , 顯示在界面中showMessage = message;});},onError: (error){print("Flutter _eventChannel listen 出錯");print(error);});*/print("Flutter _eventChannel 注冊完畢");super.initState();}@overridevoid dispose() {// 取消監聽_streamSubscription.cancel();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Container(alignment: Alignment.topCenter,decoration: BoxDecoration(color: Colors.amber),margin: EdgeInsets.only(top: 0),child: Column(children: [ElevatedButton(onPressed: (){_basicMessageChannel.send("Dart 端通過 BasicMessageChannel 向 Android 端發送消息 Hello !");},child: Text("BasicMessageChannel 向 Android 發送消息"),),ElevatedButton(onPressed: (){_methodChannel.invokeMethod("method", "arguments");},child: Text("MethodChannel 調用 Android 方法"),),Container(color: Colors.black,child: Text("Native 傳輸的消息 : $showMessage",style: TextStyle(color: Colors.green),),),],),), // This trailing comma makes auto-formatting nicer for build methods.);} }

三、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/
• Dart 語言練習網站 : https://dartpad.dartlang.org/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

  • Flutter Module 工程 : https://github.com/han1202012/flutter_module
  • Android 應用 : https://github.com/han1202012/flutter_native
  • 注意 : 上面兩個工程要放在同一個目錄中 , 否則編譯不通過 ;

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21740142 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 完整代码示例 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。