在 macOS 上安裝和配置 Flutter 開發環境


在 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>