【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | 完整代碼示例 )

文章目錄

前言

一、Android 端完整代碼示例

二、Flutter 端完整代碼示例

三、相關資源

前言

前置博客 :

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | 在 Flutter 端實現(xiàn) BasicMessageChannel 通信 )

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | 在 Flutter 端實現(xiàn) MethodChannel 通信 )

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | 在 Flutter 端實現(xiàn) EventChannel 通信 )

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | Android 端實現(xiàn) BasicMessageChannel 通信 )

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | Android 端實現(xiàn) EventChannel 通信 )

【Flutter】Flutter 混合開發(fā) ( Flutter 與 Native 通信 | Android 端實現(xiàn) MethodChannel 通信 )

執(zhí)行效果 : 在 Android 端嵌入 FlutterFragment , 通過 3 3 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; /** * 顯示收發(fā)消息的組件 */ private TextView show_message; @Override protected 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() { @Override public void onClick(View v) { FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); // 使用該方法創(chuàng)建的 Fragment 沒有傳遞數(shù)據(jù) //FlutterFragment.createDefault() // 打開默認界面 //fragmentTransaction.replace(R.id.frame, FlutterFragment.createDefault()); mFlutterFragment = FlutterFragment.withNewEngine(). initialRoute("嵌入 FlutterFragment").build(); Log.i(TAG, "mFlutterFragment : " + mFlutterFragment); // 創(chuàng)建 FlutterFragment fragmentTransaction.replace(R.id.frame, mFlutterFragment); fragmentTransaction.commit(); //initBasicMessageChannel(); new Thread(){ @Override public 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() { @Override public 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); // 設置消息接收監(jiān)聽 mBasicMessageChannel.setMessageHandler(new BasicMessageChannel.MessageHandler() { @Override public void onMessage(@Nullable String message, @NonNull BasicMessageChannel.Reply reply) { show_message.setText("Dart 通過 BasicMessageChannel 通道向 Native 發(fā)送 " + message + " 信息"); } }); // 點擊按鈕發(fā)送消息 , 并設置 Reply 接收 Dart 返回的消息 findViewById(R.id.channel1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mBasicMessageChannel.send( "Native 通過 BasicMessageChannel 通道發(fā)送消息 Hello !", new BasicMessageChannel.Reply() { @Override public void reply(@Nullable Object reply) { show_message.setText("Native 通過 BasicMessageChannel 通道發(fā)送消息 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 */ @Override public void onListen(Object arguments, EventChannel.EventSink events) { mEventSink = events; Log.i(TAG, "事件流建立成功"); } @Override public void onCancel(Object arguments) { mEventSink = null; } }); Log.i(TAG, "mEventChannel StreamHandler 設置完成"); findViewById(R.id.channel2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Log.i(TAG, "Native 通過 EventChannel 通道發(fā)送消息 , mEventSink : " + mEventSink); // 點擊按鈕 , 向 Flutter 端發(fā)送數(shù)據(jù) if (mEventSink != null) { mEventSink.success("Native 通過 EventChannel 通道發(fā)送消息 Hello !"); } } }); } /** * 方法調用消息通道 */ private MethodChannel mMethodChannel; /** * 初始化 MethodChannel */ private void initMethodChannel() { mMethodChannel = new MethodChannel(mFlutterFragment.getFlutterEngine().getDartExecutor(), "MethodChannel"); mMethodChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() { @Override public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) { show_message.setText("Dart 端通過 MethodChannel 調用 Android 端的 " + call.method + " 方法 , 參數(shù)是 " + call.arguments); } }); findViewById(R.id.channel3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mMethodChannel.invokeMethod("method", "arguments"); } }); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

二、Flutter 端完整代碼示例

import 'dart:async'; import 'package:flutter/material.dart'; // 使用 window.defaultRouteName 必須導入當前 UI 庫 import 'dart:ui'; import 'package:flutter/services.dart'; void main() => runApp( /// 該構造方法中傳入從 Android 中傳遞來的參數(shù) MyApp(initParams: window.defaultRouteName,) ); class MyApp extends StatelessWidget { /// 這是從 Android 中傳遞來的參數(shù) final String initParams; /// 構造方法 , 獲取從 Android 中傳遞來的參數(shù) const MyApp({Key? key, required this.initParams}):super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: "初始參數(shù) : $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 { /// 展示從 Native 獲取的消息 String showMessage = ""; static const BasicMessageChannel _basicMessageChannel = const BasicMessageChannel('BasicMessageChannel', StringCodec()); static const MethodChannel _methodChannel = const MethodChannel('MethodChannel'); static const EventChannel _eventChannel = EventChannel('EventChannel'); /// 監(jiān)聽 EventChannel 數(shù)據(jù)的句柄 late StreamSubscription _streamSubscription; /// 當前使用的消息通道是否是 MethodChannel bool _isMethodChannel = false; @override void initState() { /// 從 BasicMessageChannel 通道獲取消息 _basicMessageChannel.setMessageHandler((message) => Future((){ setState(() { showMessage = "BasicMessageChannel : $message"; }); return "BasicMessageChannel : $message"; })); /// 這里延遲 6 秒在注冊該事件 /// 一定要先在 Android 中設置好 EventChannel /// 然后 , 才能在 Flutter 中設置監(jiān)聽 /// 否則 , 無法成功 Future.delayed(const Duration(milliseconds: 6000), () { // Here you can write your code // 注冊 EventChannel 監(jiān)聽 _streamSubscription = _eventChannel .receiveBroadcastStream() /// StreamSubscription 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 Function(MethodCall call)? handler _methodChannel.setMethodCallHandler((call) { var method = call.method; var arguments = call.arguments; setState(() { showMessage = "Android 端通過 MethodChannel 調用 Flutter 端 $method 方法, 參數(shù)為 $arguments"; }); return Future.value(); }); /*// 注冊 EventChannel 監(jiān)聽 _streamSubscription = _eventChannel .receiveBroadcastStream() /// StreamSubscription 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(); } @override void dispose() { // 取消監(jiān)聽 _streamSubscription.cancel(); super.dispose(); } @override Widget 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 端發(fā)送消息 Hello !"); }, child: Text("BasicMessageChannel 向 Android 發(fā)送消息"), ), ElevatedButton( onPressed: (){ _methodChannel.invokeMethod("method", "arguments"); }, child: Text("MethodChannel 調用 Android 方法"), ), Container( color: Colors.black, child: Text( "Native 傳輸?shù)南?: $showMessage", style: TextStyle(color: Colors.green),), ), ], ), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

三、相關資源

參考資料 :

Flutter 官網(wǎng) : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強烈推薦 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社區(qū) : https://flutter.cn/

Flutter 實用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文檔 : https://dart.cn/

Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/

Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

Flutter 實戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/

Dart 語言練習網(wǎng)站 : 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 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Android Flutter

版權聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權內(nèi)容。

版權聲明：本文內(nèi)容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權內(nèi)容。