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