文章目錄

• 一、Flutter 混合開發簡介
• 二、Flutter 混合開發集成步驟
• 三、創建 Flutter Module
• • 1、使用命令行創建 Flutter Module 項目 ( 僅做參考 )
  • 2、Android Studio 中創建 Flutter Module ( 推薦 )
  • 3、Flutter Module 項目文件結構
• 四、相關資源

一、Flutter 混合開發簡介

---

開發手機應用時 , 有時一個完整的應用 , 有些使用 Native 原生實現 , 有些使用前端小程序實現 , 有些部分使用 Flutter 實現 ;

混合開發應用場景 :

• Flutter 作為獨立頁面 : 在 Native 原生頁面中 , 打開一個 Flutter 頁面 ; 或者在 Flutter 頁面中打開原生頁面 ;

• Flutter 作為組件嵌入 : 在 Native 原生頁面中 , 嵌套一個 Flutter 組件 ; 或者在 Flutter 頁面中 , 嵌套原生頁面組件 ;

二、Flutter 混合開發集成步驟

---

Flutter 混合開發集成步驟 :

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

三、創建 Flutter Module

---

Flutter 混合開發集成步驟 :

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

1、使用命令行創建 Flutter Module 項目 ( 僅做參考 )

混合開發前 , 先創建 Native 項目 ;

Native 項目的路徑是 D:\002_Project\002_Android_Learn\flutter_hybrid\flutter_native ,

flutter_native 是 Android Native 項目的路徑 ,

進入到 Android Native 項目的上一級目錄 flutter_hybrid , 然后執行如下命令 :

flutter create -t module flutter_module

2、Android Studio 中創建 Flutter Module ( 推薦 )

在彈出的對話框中 , 選擇 Flutter Module ,

選擇創建的 Flutter Module 名稱和路徑 ;

創建完成的 Flutter Module 項目 :

3、Flutter Module 項目文件結構

下面介紹 flutter_module 中的文件 :

• .android 是該 flutter_module 的 Android 宿主工程 ;
• .ios 是該 flutter_module 的 iOS 宿主工程 ;
• lib 是該 flutter_module 的 Dart 代碼 ;
• pubspec.yaml 是該 flutter_module 的依賴配置文件 ;

該 Flutter Module 是可以獨立運行的 , 前提是在 Android Studio 中安裝了 Flutter 插件 ;

四、相關資源

---

參考資料 :

• 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】Flutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )的全部內容，希望文章能夠幫你解決所遇到的問題。

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