iOS 工程師的 Flutter 踩坑筆記 — 開發環境建置
嗨!大家今天過得好嗎?歡迎回到理…
喔不對,歡迎來到 iOS 工程師的 Flutter 踩坑筆記!
我是 Charles,一個開發 Swift 將近一年的 iOS工程師,
因為同事的大力「傳教」,使我一腳踏進了 Flutter 的世界,也許未來有機會使用 Flutter 開發跨平台產品也說不定呢 (笑
關於 Flutter 的介紹,可以參考官方網站的 FAQ
那麼,開始來建置環境吧!
安裝 Flutter 環境
身為一位 iOS 開發者,當然是使用Mac系統來設置啊!
需求空間:700 MB (不包含Xcode或Android Studio等開發工具的空間唷)
- 使用 Terminal 將下載的 SDK 解壓縮到你想要的資料夾,如官網範例:
cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip
- 在 Terminal 設定環境變數
export PATH=`剛才設定的位置`/flutter/bin:$PATH
- 你也可以使用 .bash_profile 來設定環境變數
可參考文末參考連結
touch ~/.bash_profile
open ~/.bash_profile
將路徑輸入到檔案中,然後存檔並關閉
export PATH=`剛才設定的位置`/flutter/bin:$PATH
執行並檢查路徑
source $HOME/.bash_profile
echo $PATH
- 在 Terminal 執行 Flutter doctor
flutter doctor
flutter doctor 可以幫你檢查是否有缺少的安裝或設定問題,
若出現問題會以紅色叉叉顯示並提示如何解決,例如:
[-] Android toolchain - develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
當所有問題都解決時便以綠色勾勾顯示:
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, localezh-Hant-TW)[✓] 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)[✓] VS Code (version 1.30.2)[✓] Connected device (1 available)• No issues found!
安裝 IDE
Flutter 可以使用 Android Studio / IntelliJ / Visual Studio Code 來開發,
由於使用 Android 系統的模擬器會需要 Android Studio 來設置,所以這邊就直接選擇安裝 Android Studio,
會需要997 MB 的空間
- 安裝 Flutter 所需的 Plugin
需要安裝 Flutter Plugin & Dart Plugin
開啟 Android Studio > Preferences > Plugins
搜尋 Flutter > install ,這邊會順便安裝 Dart
安裝完成後重啟 Android Studio 就大功告成啦!
設定模擬器
上面我們將開發環境都設置好了,但要看到自己辛苦寫的程式碼畫面是否如自己預期的一樣,就得實際運行才知道囉!
所以接下來就來設定模擬器吧!
- iOS Simulator
1.前往官方網站下載 Xcode (或從App Store下載)
2.開啟 Xcode 或使用 Terminal 下指令同意 license
sudo xcodebuild -license
3.在 Terminal 下指令開啟模擬器
open -a Simulator
- Android Emulator
1.開啟 Android Studio > Tools > AVD Manager > CREATE VIRTUAL DEVICE
2.選擇機型 > NEXT > 選擇系統版本 > NEXT > 確認 > FINISH
建立專案並運行在模擬器上
- 建立新專案
建立新專案有兩種方式:
使用Terminal 指令
先進到你指定的資料夾
flutter create ’專案名稱‘
再開啟 Android Studio 開啟專案資料夾即可進行開發
使用Android Studio
開啟 Android Studio
選擇 Start a new Flutter project
選擇 Flutter Application
依序填入專案名稱、專案路徑與專案描述後 > NEXT
開啟專案
- 運行在模擬器上
執行模擬器也有兩種方式:
使用 Terminal 指令
在專案的資料夾下執行
flutter run
若同時開啟不同的模擬器或裝置,他會要你指定 Device ID 選擇要執行的裝置,若只有開啟一種時則會直接執行
使用 Android Studio
點選右上工具列圖示,最左邊選擇裝置,再按三角形即可執行(或從工具列選擇Run > Run’main.dart’)
看到這邊,你以為這樣大功告成了嗎?
……
……
……
對,你猜對了
我們完成了 Flutter 基礎開發環境的建置
選擇一個最舒服的姿勢,開始第一個專案吧!