Flutter:手拉手帶你極速構建漂亮的跨平臺(iOS/Android)移動應用 ✿ 環境搭建

子木_lsy發表於2018-11-12

上篇文章帶大家認識了 Flutter ,想必大家已迫不及待的想練練手,所以要行動起來,現在這篇文章就帶您搭建一個 Flutter 執行及開發環境。

文章詳情可查閱我的部落格 h.lishaoy.net ,歡迎大家訪問。

安裝 Flutter SDK

想要在本地電腦上執行 Flutter ,需要安裝 Flutter SDK 才可以執行, SDK 裡面有一些用於建立、構建、測試和編譯應用程式的命令列工具等,這些在開發的時候會用到。

首先,我們有 2 種方法獲取 SDK

git clone -b master https://github.com/flutter/flutter.git
複製程式碼

其次,把下載下來的 Flutter SDK 解壓,放到系統的某個目錄,比如我是放到: /Applications/flutter ,如圖:

no-shadow
Flutter SDK

配置環境變數

配置環境變數的目的是為了讓 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,來測試環境變數是否配置成功,如圖:

no-shadow
flutter help

Tips: 如果你使用的是 zsh ,需要在 ~/.zshrc 檔案中新增:source ~/.bash_profile ,否則 flutter 命令將無法執行。

配置 iOS 開發環境

想用 Flutter 為 iOS 平臺開發應用,需要安裝 Xcode,我們可以去蘋果應用商店下載。

安裝好 Xcode 後,你需要開啟一次 Xcode 同意許可協議(會提示),或者執行 sudo xcodebuild -license 同意許可協議。

然後執行 open -a Simulator 命令,就可以開啟一個模擬器,來執行和測試 Flutter 程式,如圖

no-shadow
Simulator

配置 Android 開發環境

想用 Flutter 為 Android 平臺開發應用,需要下載安裝 Android Studio

安裝好 Android Studio 後,啟動它,首次啟動會安裝最新的 Android SDK ,但是你可能會遇到這樣的問題,如圖:

Android Studio

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

Android Studio

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

Android Studio

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

Android Studio

需要我們開啟一個專案,我們可以用剛才已經配置好的 Flutter SDK 的命令列建立一個 Flutter 專案,如執行以下命令

cd ~/desktop
flutter create new_flutter
複製程式碼

命令執行完成後,在桌面就會生成一個 Flutter 專案,再用 Android Studio 開啟,專案開啟後會提示安裝 Flutter 外掛和依賴 Dart 語言外掛 ,安裝完之後我們可以去建立一個模擬器。

開啟 Tools>AVD Manager ,點選 Create Virtual Device... 來建立一個模擬器,選擇一個裝置,點選 Next,如圖

Android Studio

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

Android Studio

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

Android Studio

配置編輯器

前面我們已經配置好了 Flutter SDKiOS 模擬器Android 模擬器 ,最後我們還需要配置一下編輯器,當然您可以選擇 Android Studio 或者 VS Code,這裡我選擇的是輕量級的 VS Code

如對 VS Code 不是很熟悉,可參考我之前寫的 VS Code 編輯技巧

開啟終端進入我們剛才新建的 Flutter 專案

cd new_flutter
複製程式碼

再用 VS Code 開啟專案

code ./
複製程式碼

開啟專案之後 - - X ,開啟擴充套件,安裝 Flutter 外掛,如圖

Android Studio

完成之後,開啟專案目錄 lib->main.dart 檔案, VS Code 會自動提示你安裝 Dart 語言擴充套件包。

執行專案

現在,所有的準備工作都完成了,就可以開發、測試或執行專案了,在上面我們用 Flutter create 命令建立的 Flutter 專案,自帶一個計數器的小功能,我們可以執行看看效果

首先,您需要執行 flutter doctor 來檢查一下環境是否正常

no-shadow
Flutter run

如上圖第二項提示 Android license status unknown. 意思是 Android 協議沒安裝好,可以執行以下命令,來解決問題

flutter doctor --android-licenses
複製程式碼

如上圖第三項是 iOS 真機的檢查項,可以按照提示操作。
如上圖第四項是 Java 的編輯器檢查,可不用理會,如你沒有安裝 IDEA 也不會有這個提示

其實在我另一臺電腦上全部都配置好了 ? ,如圖

no-shadow
Flutter run

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

Flutter run

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

no-shadow
Flutter run

執行 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 選擇模擬器,檢視執行效果,如圖

no-shadow
Flutter Demo

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

相關文章