開發環境設置：安裝Flutter並迎接你的Hello World! 時刻

2022 iThome 鐵人賽

DAY 7

Mobile Development

Flutter 30: from start to store系列第 7 篇

14th鐵人賽

Ray Chang

2022-09-22 00:06:32

6133 瀏覽

分享至

flutter

今天要帶大家安裝flutter以及快速地helloworld一下，步驟如下：

安裝flutter
創建並啟動新的flutter專案
在iOS simulator及Android emulator 上運行flutter app
在新flutter專案新增一行 hello world

好的，那我們就開始做吧！

安裝flutter

下載SDK(software development kit)

到官網下載mac版的工具包。在官網有分 flutter for Intel Mac / Apple Silicon Mac 兩種，安裝時要注意一下
Windows版的安裝方法在這邊

在Terminal 設定檔加入flutter指令路徑

安裝到本機之後，把flutter SDK 放在想要放的地方，並在shell設定檔內指定flutter指令的讀取路徑
如此terminal在執行flutter時可以找到要執行的flutter程式具體在哪邊
1. 依照自己電腦使用的shell類別，在terminal下指令開啟bash/zsh設定檔.bashrc 或 .zshrc
2. 在設定檔下方加入
```
# flutter
export PATH="$PATH:YOUR_FLUTTER_PATH/flutter/bin"
```
  記得將YOUR_FLUTTER_PATH改成自己實際存放剛才下載好的flutter檔案包的地方，例如
```
# flutter
export PATH="$PATH:$HOME/flutter/bin"
```
3. 改完存檔，並重啟Terminal以套用新的設定。
4. 在Terminal 下指令flutter --version，若是成功顯示flutter版本，就是flutter指令設定完成囉！

檢查flutter安裝狀況

透過flutter內建的 flutter doctor可以檢查目前開發的機器上還缺少哪些需要的工具
```
lutter doctor
``
```
會看到如下的圖示

就代表flutter開發環境安裝成功囉！

Trouble Shoooting

若是當前的Flutter開發環境有任何的問題，flutter doctor都會提出警告

以下列出幾個常見問題：

cmdline-tools component is missing

Android toolchain- develop for Android devices (Android SDK version 33.0.0)
cmdline-tools component is missing
Run 'path/to/sakmanager --install "emdline-tools; latest"'
See https://developer.android.com/studio/command-line for more details.

則可能是command line tools沒有正常安裝，請參照上一篇Android Studio 「安裝SDK」的部分

Android License status unknown.

Android License status unknown.
Run "flutter doctor --android-licenses"to accept the SDK licenses.
See "https://flutter.dev/docs/get-started/instati/macos#android-setup" for more detaits.

代表你尚未同意下載好的SDK的使用規範，照著指示執行

$ flutter doctor --android-licenses

閱讀使用規範後同意即可

Cocoapod not installed

CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on ios or macOS

For more info, see https://flutter.dev/platform-plugins

To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

代表Cocoapod沒有正確安裝，請參照前面iOS篇「安裝Cocoapods」的部分

創建並啟動新的flutter專案

創建Flutter專案

首先在想要放專案的路徑上執行指令
```
$ flutter create [project name]
```
這次我們的專案叫APOD，所以是執行
```
$ flutter create apod
```
就會看到flutter幫你建好一個apod資料夾。至於為什麼會叫做APOD，就賣個關子明天說明囉～

設定VSCode IDE

接著使用IDE開啟專案，我這邊IDE是使用VSCode(點此下載)，因為VSCode提供了Flutter相關的extension，開發起來非常方便。
如果你也是使用VSCode，可以點選旁邊的方塊圖示(extensions)來安裝extensions，如下圖所示
這邊要安裝 Dart以及Flutter Extension
- Dart:協助解析Dart code以及提供linter和app debugger
- Flutter:提供開發時debug的小工具

專案頁面

用VScoded開啟apod，進到專案後我們看到這個樣子
這邊列舉幾個專案結構中的重點
- android：存放andorid版app的程式碼、資源、設定的地方
- ios：存放ios版app的程式碼、資源、設定的地方
- lib：開發Flutter時主要用到的資料夾，所有關於Flutter的資源都會放在這裡
- test：存放測試檔案的地方
- pubspec.yaml:管理app套件、設定、版本號的地方，可以視為app的設定檔
- pubspec.lock：安裝套件時系統會詳細紀錄下載套件的版本號和來源，盡量不要手動更改這個檔案
其他如 macos, windows, web等等資料夾再次說明了Flutter是一個跨平台開發，寫一套code也可以做成網頁、mac/windows desktop app...等等多個平台的應用程式，不過本次主題是雙系統mobile app，在此就不多加贅述囉～
點選右下角的flutter平台管理工具會出現一個視窗

它讓我們在開發時能輕鬆切換各個要啟動flutter app的平台。
如果我們在前面幾章有成功建立iOS Simulator和Android Emulator，那些可用的裝置就會在這邊供你選擇喔～
最後是拉出IDE內整合的Terminal，方便我們下指令

啟動app

首先使用平台管理工具選好自己要啟用的平台/裝置
在開發時，可以選擇用下列任一方式啟動：
1. 透過介面進行debug操控：在上方工具列 Run> Start Debugging 或直接fn+F5。可以看到Xcode出現了一行按鈕組：
  
  後面的章節會陸續帶出這些按鈕的功用
2. 透過terminal進行debug操控：下指令 flutter run
此時flutter extension會幫你啟動模擬器開始build app並啟動
- ios版(需選取simulator)
- android版(需選取emulator)
可以看到剛創建的專案預設為一個簡單的計數器。
就這樣，我們成功開啟一個flutter app了！

Hello World!

第一次碰flutter，我們還是要來儀式性地Hello World一下：
開啟專案目錄的lib>main.dart，找到

更改其中的'Flutter Demo Home Page'文字為Hello World!。
按下按鈕組中的「閃電按鈕」，或者在剛才運作flutter run的Terminal視窗按一下按鍵 r，然後看看右邊的模擬器，是否有什麼改變呢？

Recap

今天我們進行flutter的安裝及專案初始化：

安裝flutter SDK
創建flutter專案
- flutter create [project name]
- flutter開發相關的檔案都會放在專案中的lib directory
- pubspec.yaml 是管理app套件、設定、版本號的地方
在simulator及emulator上運行flutter app
- 透過Xcode flutter extension選定平台
- 使用快捷鍵fn+F5或指令flutter run啟動debug模式的app
更改app bar的title為Hello World!