文章目錄

• 前言
• 一、混合開發中啟用 Flutter 的 熱重啟 / 熱加載
• 二、混合開發中 Flutter 的 熱重啟 / 熱加載 命令測試
• 三、指定混合應用連接的設備
• 四、相關資源

前言

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

Flutter 混合開發集成步驟 :

• ① 在 Android Studio 中創建 Flutter Module ;
• ② 為 Native 應用添加 Flutter Module 依賴 ;
• ③ 在 Native 應用 ( Android / iOS 應用 ) 中 , 調用 Flutter Module 模塊 ;
• ④ 編寫 Flutter Module 中的 Dart 代碼 ;
• ⑤ 運行 Flutter 混合應用 ;
• ⑥ 項目的 熱重啟 / 重新加載 ;
• ⑦ 調試 Dart 代碼 ;
• ⑧ 應用發布 ;

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

---

Flutter 開發時 , 默認自動開啟 熱重啟 / 熱更新 功能 , 改動代碼后 , 一旦 Ctrl + S 保存代碼 , 修改的內容馬上會熱更新到調試的手機中 ;

如果在 Android Native 應用 和 Flutter 應用混合開發時 , Flutter 無法進行 熱重啟 / 熱更新 , 這樣降低了開發調試的效率 ;

混合開發中啟用 Flutter 的 熱重啟 / 熱加載 :

① 打開模擬器 , 或連接真機 ;

② 關閉應用 : 注意 , 應用一定不能運行在手機中 , 先把手機中的應用關閉 ;

③ 關聯 Flutter 與 Android 應用 :

在 Flutter Module 工程的 Android Studio 的 Terminal 面板中 ,

使用

flutter attach

命令 , 可以令 Android 應用 和 Flutter 應用進行關聯 , 之后在該混合開發中 , 就可以實現 Flutter 的 熱重啟 / 熱更新 ;

此時會輸出 " Waiting for a connection from Flutter on Pixel 2… " 提示 , 等待將 Android 和 Flutter 混合應用安裝到設備中 ;

注意 , 運行的是 混合應用 , 將 Android 項目運行 , 運行 Android Native 項目 ;

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

在 Android 的 Native 應用中 , 運行 , 注意不是運行 Flutter 應用 ;

Android 手機中已經運行該應用 ;

flutter_module 的 Terminal 中還是現實如下信息 , 這是因為還沒有在 Android 應用中加載 Flutter 頁面 ;

在 Android 應用中 , 點擊 " 方式一 " 按鈕 , 加載 Flutter 應用 , Flutter 頁面以 FlutterFragment 形式嵌入到了 Android 頁面中 ;

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

Microsoft Windows [版本 10.0.19041.1165] (c) Microsoft Corporation。保留所有權利。 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

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

---

Flutter 運行按鍵命令 :

• 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). // 退出

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

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

標題后面跟著一個熱加載后綴 ;

三、指定混合應用連接的設備

---

如果當前連接了多個設備 , 使用

flutter attach -d 'Pixel 2'

指定連接 " Pixel 2 " 設備 ;

其中 " Pixel 2 " 是設備名稱 ;

四、相關資源

---

參考資料 :

• 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/21670919 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的 热重启 / 热加载 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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