細說Flutter-MacOS下搭建Flutter開發環境
搭建flutter開發環境,需要如下步驟:
1> 配置flutter-sdk; 2> Flutter Android/IOS 執行平臺設定; 3> flutter doctor命令檢查環境是否配置好; 複製程式碼
此文環境版本記錄
此文章搭建的flutter開發環境相關版本記錄如下:
Mac OS X 10.14.3 flutter v1.0.0 dart 2.1.0 複製程式碼
配置flutter-sdk
- 下載flutter-sdk:可以直接下載release包,此處直接使用flutter 倉庫 stable分支的內容作為sdk;
cd ~/devlibs # 下載stable分支的倉庫程式碼 git clone -b stable https://github.com/flutter/flutter.git 複製程式碼
- 配置flutter sdk必須的環境變數:
# android sdk export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools # flutter sdk export PATH=$PATH:$HOME/devlibs/flutter/bin 複製程式碼
- 配置國內映象:國內網路關於google的資源下載不是很友好,這裡配置國內映象來提速,參考Using Flutter in China ,在環境變數裡新增如下配置:
#【macOS】 # flutter mirror export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn # pub mirror export PUB_HOSTED_URL=https://pub.flutter-io.cn 複製程式碼
- flutter doctor進行基礎依賴安裝,並檢查flutter的Xcode和Android studio環境配置,會顯示最終檢查和安裝的結果,此處會安裝dart庫和部分基礎庫;
如果報錯,請按照錯誤日誌修改;
flutter doctor # 接受android flutter相關的licenses flutter doctor --android-licenses 複製程式碼
flutter命令列操作
# 【flutter環境資訊】 # 檢查flutter環境是否配置好 flutter doctor # 檢視flutter項管環境的配置 flutter doctor -v # 【分支】 # 檢視當前使用的分支: flutter channel # 切換分支: # 切換beta分支 flutter channel beta # 切換master分支 flutter channel master # 【更新】 # 同時更新Flutter SDK和依賴包: # 最好在專案的包含pubspec.yaml檔案的目錄執行: flutter upgrade # 獲取pubspec.yaml檔案中列出的所有依賴包: flutter packages get # 獲取pubspec.yaml檔案中列出的所有依賴包的最新版本 flutter packages upgrade 複製程式碼
Flutter執行平臺設定
IOS平臺設定
- ios模擬器:
# 開啟IOS模擬器 open -a Simulator # 執行啟動您的應用 flutter run 複製程式碼
- 安裝用於將Flutter應用安裝到iOS裝置的工具: 執行flutter doctor按提示配置;
brew update brew install --HEAD libimobiledevice # cocoapods 是管理iOS專案中第三方開原始碼的工具 brew install ideviceinstaller ios-deploy cocoapods # 此處注意:如果上幾條命令沒成功,按照提示進行,最後成功了再執行pod setup # 可先嚐試flutter doctor,如果通過,可不執行pod setup,因為很慢; pod setup # 將cocoapods目錄下載到本地 複製程式碼
Android平臺設定
- 配置Android必須的sdk、jdk、android-studio等工具,此處不做贅述,預設你的環境可以跑Android應用了;
- android studio avd模擬器建立:Android 4.1(API level 16)或更高版本的x86 或 x86_64的Android裝置,Emulated Performance選擇 Hardware - GLES 2.0 以啟用 硬體加速.
#【模擬器】 # android模擬器列表 ~/Library/Android/sdk/tools/./emulator -list-avds # 開啟一個android模擬器 ~/Library/Android/sdk/tools/./emulator @PixelXL ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full -avd PixelXL ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full @PixelXL # -netdelay none :設定模擬器的網路延遲時間,預設為none,就是沒有延遲。 # -netspeed full: 設定網路加速值,full代表全速。 複製程式碼
- android studio plugin 安裝dart外掛、flutter外掛;
//【注意】 Jetbrians系列的IDE下載外掛或者更新需要去掉use secure connection步驟如下: 設定-> appearance->system settings->updates->去掉use secure connection 複製程式碼
- flutter專案Android gralde的配置:android部分gradle的配置可能國內無法載入成功,可以配置阿里雲的遠端倉庫映象。
不推薦設定
//app_project/android/build.gralde中修改遠端倉庫的配置 buildscript { repositories { //google() //jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public'} } } allprojects { repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } } 複製程式碼
//flutter-sdk\packages\flutter_tools\flutter.gradle buildscript { repositories { //google() //jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } } 複製程式碼
- 執行專案到Android裝置:
# 檢視flutter識別的裝置 flutter devices # 執行啟動您的應用程式 flutter run 複製程式碼
檢查flutter環境
執行flutter doctor命令,按提示操作,直到顯示如下資訊標識配置完成;
[user:~xxx]$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN) [✓] Android toolchain - develop for Android devices (Android SDK 28.0.3) [✓] iOS toolchain - develop for iOS devices (Xcode 10.1) [✓] Android Studio (version 3.3) [✓] IntelliJ IDEA Ultimate Edition (version 2018.3.3) [✓] VS Code (version 1.30.2) [✓] Connected device (1 available) • No issues found! 複製程式碼
建立專案
一般使用IDE編寫專案,需要安裝flutter外掛,如 IDEA/vscode只需要安裝flutter外掛即可;
Android Studio
Android Studio: 為Flutter提供完整的IDE體驗.
建立專案myapp步驟如下:
1. 選擇 File>New Flutter Project 2. 選擇 Flutter application 作為 project 型別, 然後點選 Next 3. 輸入專案名稱 (如 myapp), 然後點選 Next 4. 點選 Finish 5. 等待Android Studio安裝SDK並建立專案,應用程式的程式碼位於 lib/main.dart。 6. as的選單欄很智慧的提示有執行和選擇裝置的圖示,點選即可執行除錯; 7. 專案熱過載,即儲存時重新整理介面; 複製程式碼
VS Code
VS Code: 輕量級編輯器,支援Flutter執行和除錯.
建立專案myapp步驟如下:
1. 啟動 VS Code 2. 呼叫 View>Command Palette… 3. 輸入 ‘flutter’, 然後選擇 ‘Flutter: New Project’ action 4. 輸入 Project 名稱 (如myapp), 然後按回車鍵 5. 指定放置專案的位置,然後按藍色的確定按鈕 6. 等待專案建立繼續,並顯示lib/main.dart檔案 7. 確保在VS Code的右下角選擇了目標裝置 8. 按 F5 鍵或開啟選單欄的 除錯->Start Debugging 9. 等待應用程式啟動 10. 專案熱過載,即儲存時重新整理介面; 複製程式碼
命令列建立
# 建立並進入專案 flutter create myapp cd myapp # 檢查裝置是否在執行 flutter devices # 執行應用程式: flutter run # flutter run 後命令介面常用快捷鍵 # 熱過載 r # 顯示網格,這個可以很好的掌握佈局情況 p # 切換android和ios的預覽模式 o # 退出除錯預覽模式 q 複製程式碼
應用打包
Android應用打包
- 命令列建立簽名: 放到android資料夾下
keytool -genkey -v -keystore android/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 複製程式碼
- android/app/build.gradle檔案中配置app的打包簽名信息;
# gradle中配置祕鑰資訊可以單獨抽離到key.properties檔案 storePassword=123456 keyPassword=123456 # key別名 keyAlias=key # jks檔案路徑 storeFile=key.jks 複製程式碼
- 執行打包命令:flutter build(同時會生成一個備用的檔案root/build/app/outputs/app.apk)
# 打包命令預設打release包 flutter build apk [--release] flutter build apk --debug 複製程式碼
- 命令安裝app:
# 安裝的是root/build/app/outputs/app.apk # 打debug或release包會在同一位置生成app.apk檔案 flutter install 複製程式碼