細說Flutter-MacOS下搭建Flutter開發環境

桃花林裡練醉拳發表於2019-02-13
FlutterMac開發環境

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

  1. 下載flutter-sdk：可以直接下載release包，此處直接使用flutter 倉庫 stable分支的內容作為sdk;
cd ~/devlibs
# 下載stable分支的倉庫程式碼
git clone -b stable https://github.com/flutter/flutter.git
複製程式碼
  1. 配置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
複製程式碼
  1. 配置國內映象：國內網路關於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
複製程式碼
  1. 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平臺設定
  1. ios模擬器：
# 開啟IOS模擬器
open -a Simulator
# 執行啟動您的應用
flutter run
複製程式碼
  1. 安裝用於將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平臺設定
  1. 配置Android必須的sdk、jdk、android-studio等工具，此處不做贅述，預設你的環境可以跑Android應用了；
  2. 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代表全速。
複製程式碼
  1. android studio plugin 安裝dart外掛、flutter外掛;
//【注意】
Jetbrians系列的IDE下載外掛或者更新需要去掉use secure connection步驟如下:
設定-> appearance->system settings->updates->去掉use secure connection
複製程式碼
  1. 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' }
    }
}
複製程式碼
  1. 執行專案到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), 然後按Enter鍵
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應用打包
  1. 命令列建立簽名: 放到android資料夾下
keytool -genkey -v -keystore android/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
複製程式碼
  1. android/app/build.gradle檔案中配置app的打包簽名資訊;
# gradle中配置祕鑰資訊可以單獨抽離到key.properties檔案
storePassword=123456
keyPassword=123456
# key別名
keyAlias=key
# jks檔案路徑
storeFile=key.jks
複製程式碼
  1. 執行打包命令：flutter build(同時會生成一個備用的檔案root/build/app/outputs/app.apk)
# 打包命令預設打release包
flutter build apk [--release]
flutter build apk --debug
複製程式碼
  1. 命令安裝app：
# 安裝的是root/build/app/outputs/app.apk
# 打debug或release包會在同一位置生成app.apk檔案
flutter install
複製程式碼

git管理專案

  1. 建立flutter專案，按照預設的.gitignore檔案上傳到遠端git倉庫；
  2. clone遠端flutter專案到本地，執行安裝本地依賴命令即可執行專案：
flutter packages get
複製程式碼

相關文章