在 macOS 上安裝 Flutter SDK
為 Flutter 設定鏡像配置（解決被牆導致的失敗問題）
<code>export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn/<code>
獲取 Flutter SDK
<code>mkdir ~/developmentcd ~/developmentgit clone https://github.com/flutter/flutter.gitexport PATH="$PATH:`pwd`/flutter/bin" /<code>
運行 flutter doctor 命令（檢查 Flutter SDK 安裝狀態）
<code>flutter doctor/<code>
可能會有如下輸出：
<code>Doctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel dev, v1.14.6, on Mac OS X 10.15.3 19D76, locale zh-Hans-CN)[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)[✓] Android Studio (version 3.5)[!] IntelliJ IDEA Ultimate Edition (version 2019.3.2) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality.[✓] VS Code (version 1.41.1)[!] Connected device ! No devices available! Doctor found issues in 2 categories.➜ flutter git:(dev)/<code>
配置環境變量讓其永久生效
- 在.bash_profile文件中增加下列這行命令
<code>vi ~/.bash_profile/<code>
新增下面內容
<code>export PATH=$PATH:$HOME/development/flutter/bin/<code>
- 運行 source $HOME/.bash_profile 來刷新當前命令行窗口
<code>source $HOME/.bash_profile/<code>
- 通過運行以下命令來驗證 flutter/bin 文件夾是否已經添加到 PATH 環境變量中：
<code>echo $PATH/<code>
驗證 flutter 命令是否可用，可以執行下面的命令檢測：
<code>which flutter/<code>
平臺配置
macOS 可以允許開發 iOS、Android 和 Web（技術預覽版正式發佈）三個平臺的 Flutter 應用，你可以任選一個平臺完成初始配置，以此來搭建並運行起來你的第一個 Flutter 應用。
設置 iOS 開發環境
安裝 Xcode
- 在App Store中安裝 Xcode
- 通過在命令行中運行以下命令來配置 Xcode command-line tools:
<code>sudo xcode-select --switch /Applications/Xcode.app/Contents/Developersudo xcodebuild -runFirstLaunch/<code>
- 運行一次 Xocde 或者通過輸入命令 sudo xcodebuild -license 來確保已經同意 Xcode 的許可協議。
配置 iOS 模擬器
<code>open -a Simulator/<code>
創建並運行一個簡單的 Flutter 應用
- 通過運行以下命令來創建一個新的 Flutter 應用：
<code>flutter create my_app/<code>
- 上述命令創建了一個 my_app 的目錄，包含了 Flutter 初始的應用模版，切換路徑到這個目錄內：
<code>cd my_app/<code>
- 確保模擬器已經處於運行狀態，輸入以下命令來啟動應用：
<code>flutter run/<code>
運行效果
設置 Android 開發環境
安裝 Android Studio
- 下載並安裝 Android Studio。
- 運行 Android Studio，並進入 ‘Android Studio Setup Wizard’，這會安裝最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，這些都是在開發 Android Flutter 應用時所需要的。
配置環境變量
- 在.bash_profile文件中增加下列這行命令
<code>vi ~/.bash_profile/<code>
新增下面內容
<code>export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-toolsexport PATH=$PATH:$ANDROID_HOME/emulator/<code>
- 運行 source $HOME/.bash_profile 來刷新當前命令行窗口
<code>source $HOME/.bash_profile/<code>
- 如果你使用的是ZSH Shell或者是macOS Catalina 以及之後的操作系統需要修改 $HOME/.zshrc 文件
在.zshrc中新增下面一行
<code>source ~/.bash_profile/<code>
新增後執行
<code>source $HOME/.zshrc/<code>
這是因為macOS Catalina默認使用 Z Shell。
使用 Android 真機
在 Android 設備上運行或測試 Flutter 應用之前，你需要一個運行 Android 4.1（API 版本 16）或者更高的設備。
- 在設備上打開 Developer options 和 USB debugging 選項，你可以在 Android documentation 上查看更詳細的方法介紹。
- 通過 USB 接口連接手機和電腦，如果在設備上彈出需要授權彈窗，允許授權以便讓電腦能夠訪問你的開發設備。
- 在命令行中，使用 flutter devices 命令來確保 Flutter 能夠識別出你所連接的 Android 設備。
- 默認情況下，Flutter 會使用當前版本 adb 工具所依賴的 Android SDK 版本，如果你想讓 Flutter 使用別的 Android SDK，你可以通過設置 ANDROID_HOME 環境變量來達到這個目的。
使用 Android 模擬器
根據以下步驟來將 Flutter 應用運行或測試於你的 Android 模擬器上：
- 激活機器上的 VM acceleration 選項。
- 啟動 Android Studio > Tools > Android > AVD Manager，然後選擇 Create Virtual Device 選項。（只有在 Android 項目中才會顯示 Android 子選項。）
- 選擇相應的設備並選擇 Next 選項。
- 選擇一個或多個你想要模擬的 Android 版本的系統鏡像，然後選擇 Next 選項。推薦選擇 x86 或者 x86_64 鏡像。
- 在 Emulated Performance 下選擇 Hardware - GLES 2.0 選項來開啟 硬件加速。
- 確保 AVD 選項配置正確，並選擇 Finish 選項。想要查看上述步驟的更多詳細信息，請查看 Managing AVDs 頁面。
- 在 Android Virtual Device Manager 中，點擊工具欄中的 Run 選項，模擬器會啟動併為你所選擇的系統版本和設備顯示出相應的界面。
設置 Web開發環境
安裝 Chrome瀏覽器
調試 web 應用需要 Chrome 瀏覽器，可直接下載後安裝。
開啟 Web 支持
在 1.12 版本之後，Flutter 已經有了對 Web 應用的早期支持，但你目前需要運行 Flutter 的 beta 頻道。
執行如下命令
<code>export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnflutter channel betaflutter upgradeflutter config --enable-web/<code>
命令執行完畢會創建一個 ~/.flutter_settings 的配置文件：
<code>{ "enable-web": true}/<code>一旦開啟了 Web 支持，運行 flutter devices 命令會輸出一個名為 Chrome 的設備信息。
<code>➜ ~ flutter devices2 connected devices:Chrome • chrome • web-javascript • Google Chrome 79.0.3945.130Web Server • web-server • web-javascript • Flutter Tools/<code>
分享到:
閱讀更多 全棧工程師的產品筆記 的文章
