flutter 小白從零開(kāi)始,有ios、安卓、vue開(kāi)發(fā)經(jīng)驗(yàn)。---2024年3月,記。
一、相關(guān)工具安裝
1. Android Studio
- 安卓原生開(kāi)發(fā)工具
- 版本:Android Studio Hedgehog | 2023.1.1 Patch 2
2. Xcode
- 蘋果原生開(kāi)發(fā)工具
- 目前版本 Version 15.2 (需要配合mac系統(tǒng)版本Sonoma14.2)
- cocopods 更新最新版
3.Visual Studio Code
- Web開(kāi)發(fā)工具
- Version: 1.85.1 (Universal)
二、flutterSDK下載
1.官網(wǎng)下載flutterSDK 地址:
- 文檔:文檔說(shuō)明下載選擇方法
- 全部SDK下載:全部SDK版本下載地址
文檔說(shuō)明.jpg
2、參見(jiàn)文檔說(shuō)明,因?yàn)槲业膍ac系統(tǒng)是Intelc處理器,所以此處我選擇x64版本,如果是新版mac處理器是

下載地址.jpg
3.注意事項(xiàng)
- 工具必須都更新到最新版,否則后續(xù)安裝會(huì)拋錯(cuò)
三、flutter環(huán)境配置
1. 配置路徑內(nèi)容總結(jié)如下:
- 官方推薦路徑~/development
#flutter配置
#1.flutter環(huán)境變量(注意export PATH=此地址是在電腦中的flutterSDK安裝路徑,可能發(fā)生改變)
export PATH="/Users/用戶名/development/flutter/bin:$PATH"
#2.flutter鏡像地址
export PUB_HOSTED_URL="https://pub.flutter-io.cn"
export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
#3.android sdk目錄
export ANDROID_HOME="/Users/用戶名/Library/Android/sdk"
#4.android tools目錄
export PATH=${PATH}:${ANDROID_HOME}/emulator
#5.android tools目錄
export PATH=${PATH}:${ANDROID_HOME}/tools
#6.android 平臺(tái)工具目錄
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2 打開(kāi)以下兩個(gè)文件,添加上述配置內(nèi)容
$ open ~/.bash_profile
$ open ~/.zshrc
- 保存更新
$ source ~/.zshrc
$ source ~/.bash_profile
四、檢查flutter是否配置成功
- 打開(kāi)終端輸入以下指令
- 注意如果只配置.bash_profile不配置.zshrc,必須在執(zhí)行source ~/.bash_profile后的終端窗口中執(zhí)行flutter doctor,否則會(huì)報(bào)錯(cuò) zsh: command not found: flutter
- 但是我們上面已經(jīng)配置完.zshrc ,這樣新建窗口不需要source更新也能直接使用flutter指令
$ flutter doctor

執(zhí)行結(jié)果.jpg
發(fā)現(xiàn)兩個(gè)問(wèn)題解決方法
問(wèn)題描述
- 問(wèn)題1:安卓配置環(huán)境安裝失敗,提示未安裝cmdline-tools
- 問(wèn)題2:未允許一些SDK條款
解決辦法
- 提示:網(wǎng)上有些案例說(shuō)是直接打開(kāi)Android Studio菜單--Settings-->Android SDK-->SDK Tools-->下載Android SDK Command-lin,不過(guò)我在實(shí)際操作時(shí),這里是沒(méi)有這個(gè)選項(xiàng)可以下載的,所以我使用傳統(tǒng)命令行下載方式去下載缺少的command-tool工具,步驟如下:
1.打開(kāi).zshrc文件更新配置
$ open ~/.zshrc
2.添加安卓sdk的bin目錄
#android tools bin目錄
export PATH=${PATH}:${ANDROID_HOME}/tools/bin
3.更新配置使生效
source ~/.zshrc
4.在當(dāng)前終端窗口,根據(jù)上圖錯(cuò)誤提示1安裝cmd-tool
sdkmanager --install "cmdline-tools;latest"
5.安裝成功后,再次根據(jù)上圖錯(cuò)誤提示2同意一些條款,即執(zhí)行以下命令,并一輸入y,回車即可。
$ flutter doctor --android-licenses
6.更新flutter,并再次檢查flutter配置環(huán)境
$ flutter upgrade
$ flutter doctor
7. 配置成功

配置成功.png
8. 此時(shí)再次檢查
- Android Studio菜單--Settings-->Android SDK-->SDK Tools-->
-
已經(jīng)有cmdtools了
Command-line Tools.jpg
五、配置完成,進(jìn)行開(kāi)發(fā)
flutter開(kāi)發(fā)工具選擇方法
- 功能簡(jiǎn)單,不需要原生配合:直接選擇Visual Studio
- 需要原生配合:三個(gè)工具都需要用到

