一、概述
本文主要彙總介紹基於Google Flutter封裝的JDFlutter，用於元件開發的整體流程，快速準確的定位元件開發的有效資訊，為新手小白提供參考；
以下基於 Mac 開發，其中前置準備為相關資料文件，對於0開發經驗小白而言，可重點關注熟悉 Dart 語言開發規範，初步掌握之後，可跳過並開始環境構建步驟，逐步帶你開發起來～
二、前置準備
Dart 為 Flutter 開發用語言，Pub 用於提供官方和其他開發者提供的開源外掛倉庫，yaml 為 Flutter 工程的外掛配置檔案。
1、開發語言 Dart 官方網站
英文官網：dart.dev/guides
中文官網：dart.cn/guides
2、Google Flutter官方網站
英文官網：flutter.dev/docs
中文官網：flutter.cn/docs
Pub官網：pub.dev
3、JDFlutter官方網站
Pub官網：pub.jd.com/#/index
4、其他
yaml 配置檔案相關介紹：www.jianshu.com/p/81365711a…
三、環境構建
Google官方提供了其 Flutter 環境安裝方式，不過相對較複雜；這裡總結出通過 JDFlutterTool（IDE）進行環境安裝構建，同步構建Google Flutter環境的方式，最後統一 Google Flutter 和 JDFlutter 環境。
1、JDFlutterTool
該 IDE 不用作開發使用，用於配置環境、構建管理 Flutter 工程以及打包釋出等流程，其中開發需使用其他IDE，包括但不限於：Android Studio、VS Code等，下文會針對 Android Studio 具體介紹。
IDE安裝
Version 1.3.0 (2021) 版本下載安裝後啟動效果：
右上角先通過ERP登入，然後進入環境配置頁面，下載安裝環境SDK：
步驟1：推薦安裝jdf-1.22.5版本SDK。
步驟2：下載安裝完成之後，設定為預設。
步驟3：下載完成以後，可以點選檢視安裝目錄，接下來通過該目錄路徑設定 Google Flutter 環境變數，統一環境。
Google Flutter 環境配置
→ 通過上述 步驟3 獲取到安裝好的 SDK 路徑，例如："/Users/y*****3/workspace/jdflutter/sdk/jdf-1.22.5/bin"（ ⚠️ 路徑需要指定到 bin ）。
→ Mac終端配置 Google Flutter 環境變數：
終端執行 vim .zshrc
步驟1：鍵盤切換至英文輸入模式，鍵入 i 進入編輯模式。
步驟2：將獲取到的路徑新增到配置檔案中。
步驟3：鍵盤 esc 後鍵入 :wq（英文冒號wq）回車儲存並退出。
終端執行 source .zshrc
使當前配置檔案更改生效。
另起終端視窗分別執行 jdflutter --version 、 flutter --version
檢視 JDFlutter、Google Flutter 環境是否設定成功
→ 成功可顯示如上所示，flutter SDK 當前版本顯示為 1.22.5、dart SDK 當前版本顯示為 2.10.4（兩個命令執行順序不分先後，並且不會互相影響，只是為了對比清晰）。
→ 另起終端視窗目的：為了驗證環境變數配置是否生效。
→ jdflutter 為 JDFlutter 命令，flutter 為 Google Flutter 命令，之後使用其一即可。
至此，Google Flutter 環境配置完成，並且與 JDFlutter 環境統一，使用同一個SDK。
2、Android Studio
本開發採用 Android Studio 開發，其他開發 IDE 請自行查閱資料，但無論哪種開發工具，均包括以下幾點配置項。
IDE安裝
可下載最新版本，地址：developer.android.google.cn/studio
漢化參考地址：blog.csdn.net/ws1836300/a…
（以下介面顯示效果均為 Android Studio 4.2.1 版本，不同版本可能存在差異）
外掛配置（flutter外掛、dart外掛）
配置外掛是為了在開發過程中實現編譯器語法高亮、自動提示、程式碼補全、編譯執行等功能。
安裝好 Android Studio 後執行，首先開啟設定，然後選擇外掛（Plugin）在所示位置輸入 flutter 和 dart，搜尋查詢相應外掛並安裝。
至此，Android Studio 配置完成，接下來通過 flutter 命令檢測環境。
3、環境檢測及相關問題
以下通過 flutter 命令檢測環境配置，以及遇到的相關問題的解決方法。
終端執行 flutter doctor，沒有問題的情況下，執行結果如下：
說明：綠色對勾表示當前檢測項正常，其中 6 個檢測項分別代表：
① flutter SDK是否安裝並配置完成。
② Android toolchain 是否安裝並配置完成。
③ iOS 側開發工具 Xcode IDE 是否安裝並配置完成。
④ Android Studio IDE 開發工具是否安裝並配置完成。
⑤ VS Code IDE 開發工具是否安裝並配置完成。
⑥ 是否已存在並執行可除錯的裝置，包括真機或者模擬器。
可能出現的非正常執行結果：
說明：黃色歎號表示當前檢測項存在問題，針對以上問題的解決方法：
Android license status unknown：存在未同意的許可，終端執行 flutter doctor --android-licenses，依照提示同意所有許可即可。
Flutter plugin not installed、Dart plugin not installed：Android Studio IDE 未安裝 flutter、dart 外掛，如果前面的配置已完成，外掛實際上是已經安裝成功的，但是此處依然會提示未安裝，原因在於新版本的 Android Studio 的外掛安裝位置與 flutter doctor 檢測的目錄路徑不同導致，進行軟連線即可，終端執行：ln -s ~/Library/Application\ Support/Google/AndroidStudio4.2.1/plugins ~/Library/Application\ Support/AndroidStudio4.2.1，其中 4.2.1 為當前版本。
VS Code...：VS Code IDE 未安裝 flutter 外掛（擴充套件），如果不使用該 IDE 開發則可以忽略，如果需要可以參考：blog.csdn.net/liyangzmx/a… 。
Xcode...：如果非 iOS 開發，即未安裝 Xcode IDE 的情況下，此處也可能會提示黃色歎號的警告或者紅色叉的錯誤，可以忽略。
四、工程構建
統一使用 JDFlutterTool 進行工程建立和管理，其預置了 JDFlutter 環境，由於做元件開發，所以首先需要建立 plugin 元件工程，然後建立 module 工程，用於元件打包、生成產物並整合到原生工程中。
1、JDFlutterTool 建立 Plugin 元件工程
流程說明：
步驟1：開啟 JDFlutterTool，選擇”新建“，進入第二個頁面。
步驟2：在建立頁面首先選擇型別，圖中對所有型別進行了說明。
步驟3：由於我們進行元件開發，所有這裡選擇 plugin，圖中對業務型、功能型選擇進行了說明，其他按照要求填寫即可。
完成以上步驟後，IDE自動建立 git 倉庫，並提示開啟倉庫管理頁面，也可以通過如下方式找到倉庫，並手動克隆到本地進行開發。
⚠️ 圖3 中顯示的只是建立好的 git 倉庫，需要手動克隆到本地，然後通過首頁“開啟”克隆好的工程，選擇 圖4 中 Android Studio 開啟工程進行開發。
2、JDFlutterTool 建立 Module 工程
上述介紹的 Plugin 就是我們要開發的元件，那麼如何將它整合到原生專案中？這就要藉助於 Module：
module 建立過程與 plugin 建立過程相同，無非在選擇型別時選擇 module，後續也同樣需要手動克隆到本地。
3、工程主要結構簡介
對 plugin 工程和 module 工程的專案結構進行簡單對比，如下：
其中，yaml 配置檔案用於管理配置工程所需的依賴、資源（如圖片資源）等。
⚠️ 對於 plugin 工程的 yaml 配置檔案 ② 和內部 example 工程的 yaml 配置檔案 ① 而言，需要注意以下幾點，引入 JDFlutter 官方話術：
解讀：在 ② 的配置檔案中，如果需要使用到 JDFlutter 提供的基礎元件，注意此處所指的是基礎元件，則只能依賴容器外掛（如下圖），然後在 example 的配置檔案 ① 中依賴所需基礎元件進行除錯開發，最終打包時再在 module 內依賴相關基礎元件；
但是在 ② 中依然可以依賴所需的第三方外掛。
五、打包及除錯
開發過程中，對於網路介面請求，這裡採用的是 flutter 與原生互動，通過原生髮送請求，最後將請求結果傳遞給 flutter 的方式，那麼理所當然的離不開將上述介紹的 module 打包產物並整合到原生工程除錯的過程。
1、module 打包
作為除錯開發，我們選擇本地構建、debug 型別：
以上進行構建，等待片刻後，生成打包產物，將生成檔案整合到原生宿主工程內，整合過程詳見：
Android：doc.jd.com/jd_flutter/…
2、開發除錯
這裡我們採用 Attach 將 Android Studio 與裝置之間建立 Socket 連線的方式進行除錯開發。
首先，選擇好待除錯裝置，執行上述配置好打包產物的原生宿主工程。
然後，在 module 工程下，Android Studio IDE 的終端內執行：flutter attach
如果當前執行多個裝置，終端會要求通過輸入數字選擇當前執行著打包產物的裝置。
如果當前裝置記憶體在多個包名的應用，可能終端會再要求根據包名直接選擇應用，根據提示修改命令即可。
attach 成功後，可直接輸入以下字母執行相應操作，其中使用比較頻繁的是：r 和 R，進行程式碼更新後的熱過載操作：
以上為全部內容，至此，作為小白的開發彙總到此結束，有任何問題歡迎隨時指正，感謝您的耐心閱讀～