聚焦Flutter-MacOS下搭建Flutter開發環境

MacOS下搭建Flutter開發環境

搭建flutter開發環境，須要以下步驟：

1> 安裝和配置flutter-sdk；
2> Flutter Android/IOS 運行平臺設置;
3> flutter doctor命令檢查環境是否配置好；
複製代碼

本文環境版本信息記錄

此文章搭建的flutter開發環境相關版本記錄以下：

Mac OS X 10.15.1
flutter 1.9.1+hotfix.6
dart 2.5.0
複製代碼

配置flutter-sdk

1. 下載flutter

下載flutter-sdk：能夠直接下載release包，也可使用flutter 倉庫 stable分支的內容做爲sdk;

# 方式一：[clone的方式支持flutter upgrade,推薦使用]
# 能夠直接下載stable分支的倉庫代碼
# git clone -b stable https://github.com/flutter/flutter.git

# 方式二：
# 下載官方的正式包並解壓到本地
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
複製代碼

安裝遇到的問題:

1. git clone flutter 遇到"SSL_read: Connection was reset"問題：

PS D:\devlibs\flutter\sdk> git clone -b stable https://github.com/flutter/flutter.git
Cloning into 'flutter'...
fatal: unable to access 'https://github.com/flutter/flutter.git/': OpenSSL SSL_read: Connection was reset
複製代碼

# 【緣由】
git客戶端訪問github沒有走ssl的代理

# 【解決辦法】
## 方法一：把https 改爲git【不推薦】
$ git clone -b stable git://github.com/flutter/flutter.git

## 方法二：在開啓代理軟件的前提下，手動配置git的代理【推薦】
### 設置代理的命令：
### (注意代理端口: 須要查看本機的代理端口)
$ git config --global http.proxy http://127.0.0.1:1080
$ git config --global https.proxy http://127.0.0.1:1080
### 取消代理的命令以下：
$ git config --global --unset http.proxy 
$ git config --global --unset https.proxy 
複製代碼

2. 配置環境變量

配置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
複製代碼

3. 配置國內鏡像【可選】

配置國內鏡像：國內網絡關於google的資源下載不是很友好，這裏配置國內鏡像來提速，參考 Using Flutter in China,在環境變量裏添加以下配置：

#【macOS】
# flutter china mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

4. flutter doctor 檢查

「flutter doctor」命令用來檢查Flutter環境, 並安裝缺乏的依賴庫；

初次運行此命令，會執行以下操做：

• 會進行基礎依賴安裝，包括dart庫和部分基礎庫；
• 並檢查flutter的Xcode和Android studio環境配置，會顯示最終檢查和安裝的結果；

執行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!
複製代碼

若是報錯，請按照錯誤日誌修改；

flutter doctor

# 初次配置環境時，會提示接受android flutter相關的licenses
flutter doctor --android-licenses
複製代碼

5. flutter更新

flutter upgrade
複製代碼

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
複製代碼

2. 安裝到真機

1. xcode打開flutter/ios/Runner.xcworkspace
2. xcode導航面板中選擇最外層的Runner,添加開發者帳號，並添加team;
3. ios設備設置信任開發者：設置->通用->描述文件與設備管理->選擇信任的開發者；
4. 命令運行便可：flutter run
複製代碼

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表明全速。
複製代碼

3. android studio plugin 安裝dart插件、flutter插件;

//【注意】
Jetbrians系列的IDE下載插件或者更新須要去掉use secure connection步驟以下:
設置-> appearance->system settings->updates->去掉use secure connection
複製代碼

4. 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' }
    }
}
複製代碼

5. 運行項目到Android設備：

# 查看flutter識別的設備
flutter devices 
# 運行啓動您的應用程序 
flutter run
複製代碼

建立項目

推薦使用Android-Studio或IntelliJ IDEA來建立,由於它們支持建立時，對項目的細節進行配置(如：移動端項目可選基於kotlin/swift、定製包名等)。

通常使用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項目(默認會建立基於kotlin的Android、基於swift的ios項目)
flutter create myapp
# 至關於
flutter create -i swift -a kotlin myapp
# 自定義包名的建立方式
flutter create --org com.focus -i swift -a kotlin myapp
# 建立flutter項目，Android端基於java, ios端基於object-c(--org 標識組織)
flutter create --org com.focus -i objc -a java myapp

# flutter1.7 開始支持AndroidX的建立方式
# 【注意】目前flutter 1.9.1默認建立不會在項目中配置AndroidX
flutter create --androidx myapp 
flutter create --org com.focus -i swift -a kotlin --androidx myapp

cd myapp
# 檢查設備是否在運行
flutter devices
# 運行應用程序:
flutter run

# flutter run 後命令界面經常使用快捷鍵
# 熱重載
r
# 熱重載重啓
R
# 顯示網格，這個能夠很好的掌握佈局狀況
p
# 切換android和ios的預覽模式
o 
# 退出調試預覽模式
q 
複製代碼

建立支持AndroidX的項目

1. 經過命令建立支持androidx的項目：

# 當建立 Flutter 項目時，可經過添加 --androidx 來確保生成的項目文件支持 AndroidX。
# 命令行建立Flutter項目,支持AndroidX
$ flutter create --androidx myapp
複製代碼

2. 在已有的flutter項目中支持AndroidX：只須要按原生Android的方式，將android項目進行AndroidX遷移便可。
3. 在已有的Android項目中添加Flutter模塊，讓flutter支持AndroidX:

若是您的Flutter項目是用於添加到現有Android應用的模塊類型，而且包含.android目錄，請在pubspec.yml中的module部分添加AndroidX屬性，控制是否使用AndroidX構建模塊項目。

# ...
# 控制生成的模塊項目是否使用AndroidX
flutter:
 uses-material-design: true

 module:
 androidX: true
    # androidPackage:
    # iosBundleIdentifier:
複製代碼

應用打包

Android應用打包

1. 命令行建立簽名: 放到android文件夾下

keytool -genkey -v -keystore android/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
複製代碼

2. android/app/build.gradle文件中配置app的打包簽名信息;

# gradle中配置祕鑰信息能夠單獨抽離到key.properties文件
storePassword=123456
keyPassword=123456
# key別名
keyAlias=key
# jks文件路徑
storeFile=key.jks
複製代碼

3. 執行打包命令：flutter build(同時會生成一個備用的文件root/build/app/outputs/app.apk)

# 打包命令默認打release包
flutter build apk [--release]
flutter build apk --debug
複製代碼

4. 命令安裝app：

# 安裝的是root/build/app/outputs/app.apk
# 打debug或release包會在同一位置生成app.apk文件
flutter install
複製代碼

git管理項目

1. 建立flutter項目，按照默認的.gitignore文件上傳到遠程git倉庫；
2. clone遠程flutter項目到本地，執行安裝本地依賴命令便可運行項目：

flutter packages get
複製代碼

issues

• flutter upgrade 或 flutter packages get 報衝突Lock問題!!!

waiting for another flutter command to release the startup lock...
# 解決辦法：刪除flutter/bin/cache/lockfile文件從新執行命令便可。
複製代碼