【Flutter】Flutter 混合開發(fā) ( 混合開發(fā)中 Flutter 的 熱重啟 / 熱加載 )

文章目錄

前言

一、混合開發(fā)中啟用 Flutter 的 熱重啟 / 熱加載

二、混合開發(fā)中 Flutter 的 熱重啟 / 熱加載 命令測試

三、指定混合應(yīng)用連接的設(shè)備

四、相關(guān)資源

前言

上一篇博客 【Flutter】Flutter 混合開發(fā) ( 安卓端向 Flutter 傳遞數(shù)據(jù) | FlutterFragment 數(shù)據(jù)傳遞 | FlutterActivity 數(shù)據(jù)傳遞 ) 講解了 Android 如何向 Flutter 中傳遞數(shù)據(jù) ;

Flutter 混合開發(fā)集成步驟 :

① 在 android studio 中創(chuàng)建 Flutter Module ;

② 為 Native 應(yīng)用添加 Flutter Module 依賴 ;

③ 在 Native 應(yīng)用 ( Android / iOS 應(yīng)用 ) 中 , 調(diào)用 Flutter Module 模塊 ;

④ 編寫 Flutter Module 中的 Dart 代碼 ;

⑤ 運(yùn)行 Flutter 混合應(yīng)用 ;

⑥ 項(xiàng)目的 熱重啟 / 重新加載 ;

⑦ 調(diào)試 Dart 代碼 ;

⑧ 應(yīng)用發(fā)布 ;

一、混合開發(fā)中啟用 Flutter 的 熱重啟 / 熱加載

Flutter 開發(fā)時(shí) , 默認(rèn)自動(dòng)開啟 熱重啟 / 熱更新 功能 , 改動(dòng)代碼后 , 一旦 Ctrl + S 保存代碼 , 修改的內(nèi)容馬上會(huì)熱更新到調(diào)試的手機(jī)中 ;

如果在 Android Native 應(yīng)用 和 Flutter 應(yīng)用混合開發(fā)時(shí) , Flutter 無法進(jìn)行 熱重啟 / 熱更新 , 這樣降低了開發(fā)調(diào)試的效率 ;

混合開發(fā)中啟用 Flutter 的 熱重啟 / 熱加載 :

① 打開模擬器 , 或連接真機(jī) ;

② 關(guān)閉應(yīng)用 : 注意 , 應(yīng)用一定不能運(yùn)行在手機(jī)中 , 先把手機(jī)中的應(yīng)用關(guān)閉 ;

③ 關(guān)聯(lián) Flutter 與 Android 應(yīng)用 :

在 Flutter Module 工程的 android studio 的 Terminal 面板中 ,

使用

flutter attach

1

命令 , 可以令 Android 應(yīng)用 和 Flutter 應(yīng)用進(jìn)行關(guān)聯(lián) , 之后在該混合開發(fā)中 , 就可以實(shí)現(xiàn) Flutter 的 熱重啟 / 熱更新 ;

此時(shí)會(huì)輸出 " Waiting for a connection from Flutter on Pixel 2… " 提示 , 等待將 Android 和 Flutter 混合應(yīng)用安裝到設(shè)備中 ;

注意 , 運(yùn)行的是 混合應(yīng)用 , 將 Android 項(xiàng)目運(yùn)行 , 運(yùn)行 Android Native 項(xiàng)目 ;

Y:

Y:\002_WorkSpace\001_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2...

2_WorkSpace

Y:\002_WorkSpace\001_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2...

1_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2...

1

2

在 Android 的 Native 應(yīng)用中 , 運(yùn)行 , 注意不是運(yùn)行 Flutter 應(yīng)用 ;

Android 手機(jī)中已經(jīng)運(yùn)行該應(yīng)用 ;

flutter_module 的 Terminal 中還是現(xiàn)實(shí)如下信息 , 這是因?yàn)檫€沒有在 Android 應(yīng)用中加載 Flutter 頁面 ;

在 Android 應(yīng)用中 , 點(diǎn)擊 " 方式一 " 按鈕 , 加載 Flutter 應(yīng)用 , Flutter 頁面以 FlutterFragment 形式嵌入到了 Android 頁面中 ;

flutter_module 的 Terminal 中打印如下信息 , 說明混合開發(fā)中 Flutter 的 熱重啟 / 熱加載 啟用成功 ;

Microsoft Windows [版本 10.0.19041.1165] (c) Microsoft Corporation。保留所有權(quán)利。 Y:

Microsoft Windows [版本 10.0.19041.1165] (c) Microsoft Corporation。保留所有權(quán)利。 Y:\002_WorkSpace\001_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2... Activating Dart DevTools... | Flutter run key commands. r Hot reload. R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). Running with sound null safety An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:58580/GY8QBzNP2T4=/ 18.5s The Flutter DevTools debugger and profiler on Pixel 2 is available at: http://127.0.0.1:9100?uri=http%3A%2F%2F127.0.0.1%3A58580%2FGY8QBzNP2T4%3D%2F

2_WorkSpace

Microsoft Windows [版本 10.0.19041.1165] (c) Microsoft Corporation。保留所有權(quán)利。 Y:\002_WorkSpace\001_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2... Activating Dart DevTools... | Flutter run key commands. r Hot reload. R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). Running with sound null safety An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:58580/GY8QBzNP2T4=/ 18.5s The Flutter DevTools debugger and profiler on Pixel 2 is available at: http://127.0.0.1:9100?uri=http%3A%2F%2F127.0.0.1%3A58580%2FGY8QBzNP2T4%3D%2F

1_AS\flutter_hybrid\flutter_module>flutter attach Waiting for a connection from Flutter on Pixel 2... Activating Dart DevTools... | Flutter run key commands. r Hot reload. R Hot restart. h Repeat this help message. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). Running with sound null safety An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:58580/GY8QBzNP2T4=/ 18.5s The Flutter DevTools debugger and profiler on Pixel 2 is available at: http://127.0.0.1:9100?uri=http%3A%2F%2F127.0.0.1%3A58580%2FGY8QBzNP2T4%3D%2F

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

二、混合開發(fā)中 Flutter 的 熱重啟 / 熱加載 命令測試

Flutter 運(yùn)行按鍵命令 :

r Hot reload. // 熱加載

R Hot restart. // 熱重啟

h Repeat this help message. // 幫助信息

d Detach (terminate “flutter run” but leave application running).// 取消熱修復(fù)

c Clear the screen // 清空屏幕

q Quit (terminate the application on the device). // 退出

修改 Flutter 代碼后 , 在 Android Studio 的 Terminal 中, 按下 r 鍵 , 即可進(jìn)行熱更新 ;

Performing hot reload... Reloaded 1 of 553 libraries in 791ms.

1

2

標(biāo)題后面跟著一個(gè)熱加載后綴 ;

三、指定混合應(yīng)用連接的設(shè)備

如果當(dāng)前連接了多個(gè)設(shè)備 , 使用

flutter attach -d 'Pixel 2'

1

指定連接 " Pixel 2 " 設(shè)備 ;

其中 " Pixel 2 " 是設(shè)備名稱 ;

四、相關(guān)資源

參考資料 :

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

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

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

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

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

Flutter 實(shí)用教程 : 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 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

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

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

Dart 語言練習(xí)網(wǎng)站 : https://dartpad.dartlang.org/

重要的專題 :

Flutter 動(dòng)畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

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

Flutter Module 工程 : https://github.com/han1202012/flutter_module

Android 應(yīng)用 : https://github.com/han1202012/flutter_native

注意 : 上面兩個(gè)工程要放在同一個(gè)目錄中 , 否則編譯不通過 ;

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

Android Flutter

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

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