上篇文章帶大家認識了 Flutter
,想必大家已迫不及待的想練練手,所以要行動起來,現在這篇文章就帶您搭建一個 Flutter
執行及開發環境。
文章詳情可查閱我的部落格 h.lishaoy.net ,歡迎大家訪問。
安裝 Flutter SDK
想要在本地電腦上執行 Flutter ,需要安裝 Flutter SDK 才可以執行, SDK 裡面有一些用於建立、構建、測試和編譯應用程式的命令列工具等,這些在開發的時候會用到。
首先,我們有 2 種方法獲取 SDK
- 可以到 下載 Flutter SDK 到本地電腦
- 可以用
git clone
命令下載到本地電腦
git clone -b master https://github.com/flutter/flutter.git
複製程式碼
其次,把下載下來的 Flutter SDK 解壓,放到系統的某個目錄,比如我是放到: /Applications/flutter
,如圖:

配置環境變數
配置環境變數的目的是為了讓 Flutter SDK 命令列工具在全域性範圍都起作用,以便開發使用。
首先,您可以用編輯器開啟主目錄下的 .bash_profile
,或者用 vi
命令編輯,我習慣用 vi
命令,如下
vi $HOME/.bash_profile
複製程式碼
新增以下配置
export PATH=$PATH:/Applications/flutter/bin
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼
Tips:
第一行export PATH=$PATH:/Applications/flutter/bin
中的/Applications/flutter/bin
就是剛才下載的 Flutter SDK 解壓後放在本地電腦的目錄,您要根據自己操作更改為自己電腦對應的目錄。
第二、三行為解決國內下載或更新資源慢的國內映象,配置這個下載或更新資源會快一些。
再執行 source $HOME/.bash_profile
命令重新整理當前命令列視窗,或者關掉當前命令列視窗重新開啟,效果一樣
source $HOME/.bash_profile
複製程式碼
再執行 flutter --help
,來測試環境變數是否配置成功,如圖:

Tips: 如果你使用的是
zsh
,需要在 ~/.zshrc 檔案中新增:source ~/.bash_profile
,否則flutter
命令將無法執行。
配置 iOS 開發環境
想用 Flutter 為 iOS 平臺開發應用,需要安裝 Xcode,我們可以去蘋果應用商店下載。
安裝好 Xcode 後,你需要開啟一次 Xcode 同意許可協議(會提示),或者執行 sudo xcodebuild -license
同意許可協議。
然後執行 open -a Simulator
命令,就可以開啟一個模擬器,來執行和測試 Flutter 程式,如圖

配置 Android 開發環境
想用 Flutter 為 Android 平臺開發應用,需要下載安裝 Android Studio。
安裝好 Android Studio 後,啟動它,首次啟動會安裝最新的 Android SDK ,但是你可能會遇到這樣的問題,如圖:

如果遇到這個問題應該就是網路問題(需要科學上網),點 Setup Proxy 來設定代理,如圖:

如一切正常,就會提示你需要下載一些東西,如圖

點選 Finish 按鈕後就會下載安裝以上列表的東西,下載安裝完 SDK 後,如圖:

需要我們開啟一個專案,我們可以用剛才已經配置好的 Flutter SDK 的命令列建立一個 Flutter 專案,如執行以下命令
cd ~/desktop
flutter create new_flutter
複製程式碼
命令執行完成後,在桌面就會生成一個 Flutter 專案,再用 Android Studio 開啟,專案開啟後會提示安裝 Flutter 外掛和依賴 Dart 語言外掛 ,安裝完之後我們可以去建立一個模擬器。
開啟 Tools>AVD Manager ,點選 Create Virtual Device...
來建立一個模擬器,選擇一個裝置,點選 Next,如圖

為模擬器選擇一個系統映象(我選擇的是第一個),點選 Download ,下載完成後,點選 Next 後,如圖

最後,在模擬效能這裡選擇 Hardware - GLES 2.0 啟動硬體加速,點選 Finish 完成

配置編輯器
前面我們已經配置好了 Flutter SDK 、iOS 模擬器 、Android 模擬器 ,最後我們還需要配置一下編輯器,當然您可以選擇 Android Studio
或者 VS Code
,這裡我選擇的是輕量級的 VS Code
。
如對 VS Code 不是很熟悉,可參考我之前寫的 VS Code 編輯技巧
開啟終端進入我們剛才新建的 Flutter 專案
cd new_flutter
複製程式碼
再用 VS Code 開啟專案
code ./
複製程式碼
開啟專案之後 ⌘ - ⇧ - X ,開啟擴充套件,安裝 Flutter 外掛,如圖

完成之後,開啟專案目錄 lib->main.dart
檔案, VS Code 會自動提示你安裝 Dart 語言擴充套件包。
執行專案
現在,所有的準備工作都完成了,就可以開發、測試或執行專案了,在上面我們用 Flutter create
命令建立的 Flutter 專案,自帶一個計數器的小功能,我們可以執行看看效果
首先,您需要執行 flutter doctor
來檢查一下環境是否正常

如上圖第二項提示 Android license status unknown.
意思是 Android 協議沒安裝好,可以執行以下命令,來解決問題
flutter doctor --android-licenses
複製程式碼
如上圖第三項是 iOS 真機的檢查項,可以按照提示操作。
如上圖第四項是 Java 的編輯器檢查,可不用理會,如你沒有安裝 IDEA 也不會有這個提示
其實在我另一臺電腦上全部都配置好了 ? ,如圖

最後,在 VS Code 編輯器裡按 F5 後,會讓你選擇模擬器來執行 Flutter 程式,如圖

這個是分別在 iOS 和 Android 執行 Flutter 的效果,如圖

執行 Flutter 案例
現在所有的都準備好了,您可以去我的 GitHub 上下載上篇文章中的案例程式碼,也可以 git clone
cd $HOME/Desktop #進到桌面
git clone https://github.com/persilee/flutter_pro.git #下載案例
cd flutter_pro #進入案例目錄
flutter packages get #獲取依賴包
code ./ #用 VS Code 開啟
複製程式碼
完成以上步驟後,在 VS Code 按 F5 選擇模擬器,檢視執行效果,如圖

好的,大功告成,這篇到處為止,下篇將手拉手帶大家完成一個實操小案例 。