a. 從這裡下載你想要安裝的SDK版本，這邊我選擇最新的 v2.2.3。
b. 我個人習慣將SDK放到家目錄位置上，並直接以flutter當作目錄的名稱以方便識別。
unzip -q ~/Downloads/flutter_macos_2.2.3-stable.zip -d ~
c. 將 flutter SDＫ下工具(~/flutter/bin) 設定至 PATH 上
我自己是使用 zsh 搭配 oh-my-zsh 當作 termianl 的環境設定，因此接下來我需要到 ~/.zshrc 上添加相關的路徑配置
# flutter
export PATH="$PATH:/Users/leo_chen/flutter/bin"
P.S. 完成上述設定後請記得需要重啟terminal或是運行下面指令讓當前terminal吃到PATH的設定
source ~/.zshrc
在完成上面 flutter SDK 的設定後，可透過下面指令查看是否有其他相依的設定尚未配置。
❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.7 19H114 darwin-x64, locale zh-Hant-TW)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (version 2020.3)
✗ Unable to find bundled Java version.
[✓] VS Code (version 1.59.0)
[✓] Connected device (2 available)
! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)
! Doctor found issues in 1 category.
若配置上有問題，會出現類似的提供訊息。
大致上相依賴的套件如下：
這個是 iOS 平台開發程式需要的整合開發環境，可至 App Store 搜尋 Xcode 安裝或是到 Apple Developer 下載
Android Studio 是 Android 平台開發程式需要的整合開發環境，Android Developer 載點。
Android Tools
這個在安裝完 Android Studio 後，通常已預設安裝好對應的 Android SDK，開啟 Android Studio 進入偏好設定可以查看到 SDK 安裝的目徑以及已安裝的Android SDK版本。
Android SDK 內部也有 bin 的目錄，需要綁定到 PATH 的路徑上，這邊透過環境參數將PATH設定至 zshrc，雖然我們不會需要直接操作 Android SDK 的指令，大部份是透過 IDE 介面的執行功能，相關 Android SDK 的環境參數設定可以參考這邊的說明。
# andriod
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH="$PATH:$ANDROID_SDK_ROOT/tools/bin"
export REPO_OS_OVERRIDE="macosx"
這是一款由微軟開發的程式碼編輯器 (連結)，可提供許多不同的擴充功能，能夠視需求打造成開發各種程式語言的IDE開發環境，我個人蠻推薦使用的。
從 2.0 後，Flutter 可以輸出成 Web App，因此 Google 自家的 Chrome 當然也是必備的開發工具之一。
Homebrew 為 macOS上必裝的套件管理工具
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
安裝完成後可以透過brew指令安裝所需套件。
舉個列子來說，雖然安裝完成 Xcode 後預設都有 git 可以使用，不過版本未必是最新的，持續更新相關指令至穩定版本是有必要的，操作方式如下：
brew install git
這個一款用來管理 Xocde 開發專案所需相依套件的工具，可以透過 brew 進行安裝或是參考 官網的安裝說明。
從 flutter doctor 檢查的內容會發現會相關的錯誤或提供訊息，這時候我們可以按照輸出的提示訊息至 google 搜尋相關的解決方法。
[!] Android Studio (version 2020.3)
✗ Unable to find bundled Java version.
查詢相關的網頁資訊後，在 Stack Overflow 上找到答案，原來我近期升級 Android Studio 至北極狐 2020.3.1 版本，對於Java的設定上有問題，有類似狀況可以使用下面的指令操作排除。
cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
Stack Overflow 是程式開發者經常使用討論開發上議題的網站。
確認目前環境設定都完成，內容如下。
❯ flutter doctor -v
[✓] Flutter (Channel stable, 2.2.3, on Mac OS X 10.15.7 19H114 darwin-x64, locale zh-Hant-TW)
• Flutter version 2.2.3 at /Users/leo_chen/flutter
• Framework revision f4abaa0735 (7 周前), 2021-07-01 12:46:11 -0700
• Engine revision 241c87ad80
• Dart version 2.13.4
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/leo_chen/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• ANDROID_SDK_ROOT = /Users/leo_chen/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
? https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
? https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
[✓] VS Code (version 1.59.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.25.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H114 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159
! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)
• No issues found!
完成上述的 SDK 設定後，你可以選擇任何一款你熟悉的IDE工具進行 flutter 應用程式的開發，也可以採用官方上推薦的 Android studio、VS Code、Emacs 選擇一款你較喜歡的方式，上面這三項都有有配置好對應的插件工具，可以提升開發上的效率。
不免俗的，讓我們來創建一個的 Hello World 應用程式吧。
可以直接用個人偏好的編輯器的操作介面創建一個專案，不過我這邊練習用指令創建新的專案
# 創建 flutter workspace
mkdir flutter-example
cd flutter-example
# 使用 flutter 指令創建新的專案
flutter create myapp
cd myapp
接下來可以使用個人偏好的編輯器開啟專案進行開發，目前初始化的目錄結構大致如下
.
├── README.md
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── local.properties
│ ├── myapp_android.iml
│ └── settings.gradle
├── ios
│ ├── Flutter
│ ├── Runner
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── lib
│ └── main.dart
├── macos
│ ├── Flutter
│ ├── Runner
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── myapp.iml
├── pubspec.lock
├── pubspec.yaml
├── test
│ └── widget_test.dart
└── web
├── favicon.png
├── icons
├── index.html
└── manifest.json
假如有不需要的平台環境可以將目錄刪除，後續有需要都可使用 flutter 指令加回來，主要避免在開發運行程式時老是會不小心點到其他平台的設定。
我們先找到 lib/main.dart 這個檔案，這個是 flutter 應用程式執行時的主要入口，先將這隻檔案的內容替換成下面這段程式碼：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World!'),
),
),
);
}
}
使用指令確認好你要運行的平台環境，這邊我使用 Xcode 建立了一個 iPhone 模擬器，透過flutter devices確認 Flutter SDK 探測到相關的設備。
❯ flutter devices
3 connected devices:
iPhone 11 (mobile) • 4A5E9CFB-F805-418F-AC34-DC969F6AFA19 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)
macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H114 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159
接著就可以使用flutter run將應用程式進行編譯且打包成App部署到測試的裝置上，這一步建議使用IDE工具進行操作會比較方便些，我個人是使用 VScode, 操作可以參考官方上的說明。
❯ flutter run
Launching lib/main.dart on iPhone 11 in debug mode...
Running Xcode build...
└─Compiling, linking and signing... 3.1s
Xcode build done. 21.6s
Syncing files to device iPhone 11... 76ms
Flutter run key commands.
r Hot reload. ???
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
? Running with sound null safety ?
An Observatory debugger and profiler on iPhone 11 is available at: http://127.0.0.1:51140/qBoPBwfh8do=/
Activating Dart DevTools... 1,909ms
The Flutter DevTools debugger and profiler on iPhone 11 is available at: http://127.0.0.1:9101?uri=http%3A%2F%2F127.0.0.1%3A51140%2FqBoPBwfh8do%3D%2F
今日成果如下
今日我們已完成Flutter開發環境的準備並且完成了一款應用程式，為了後續閱讀程式碼的必要，明天的章節打算先從 dart 程式基礎開始，理解一下 dart 這套程式語言的語法結構。
iThome鐵人賽
看影片追技術