MacOS上搭建Flutter開發環境

1.flutter官網下載最新的安裝包,https://flutter.io/sdk-archive/#macos

2.解壓安裝包到你想安裝的目錄。直接解壓或者是用unzip命令

3.打開mac終端,輸入命令 open -e .bash_profile打開環境變量配置,在打開的文件中添加下面這段配置:

export PATH=$PATH:/Users/caojing/flutter/flutter/bin  
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

其中第一行的PATH 是你flutter的解壓后的目錄路徑,第二行和第三行是路徑下面的tools和 platform-tools文件夾,
最后兩行是flutter的國內鏡像。
配置完成后,執行source ~/.bash_profile命令,刷新當前終端窗口。

4.配置完成后在終端輸入命令:flutter doctor檢查你的環境并在命令行窗口中顯示報告。命令執行完成后會出現下面這段代碼,我這里是Android studio環境已經配置好了,所以如果Android studio環境沒配置好需要配置好Android studio環境,這個下面會講到。當然如果你是iOS開發也可以直接配置Xcode環境。

caojingMBP:~ caojing$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.6 19G73, locale
    zh-Hans-CN)
 
[?] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[?] Xcode - develop for iOS and macOS (Xcode 11.6)
[?] Android Studio (version 4.0)
[!] IntelliJ IDEA Ultimate Edition (version 2020.1.2)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.
[?] Connected device (1 available)

! Doctor found issues in 1 category.

在windows中配置環境變量實際上更簡單,打開環境變量配置對話框,將上面的環境變量配置到Windows中即可。這里就不做過多說明。

Android Studio配置和使用

1.在Android Studio上安裝flutte和dart插件

  1. 打開插件設置 (macOS:Preferences>Plugins, Windows:File>Settings>Plugins)

  2. 選擇Marketplace,在搜索框中輸入flutter和dart插件分別安裝。

  3. 重啟Android Studio后插件生效。

2.安裝完成后,我們可以新建一個flutter項目來體驗一下flutter的熱重載功能

  1. 選擇 File>New Flutter Project 。

  2. 選擇 Flutter application 作為 project 類型, 然后點擊 Next。

  3. 輸入項目名稱 (如 myapp),然后點擊 Next。

  4. 點擊 Finish。

  5. 等待Android Studio安裝SDK并創建項目。