Mac搭建Flutter+Dart開(kāi)發(fā)環(huán)境

1 下載 Flutter SDK

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
推薦下載Stable channel, 即穩(wěn)定版

2 解壓SDK

把下載好的 Flutter SDK 隨便解壓到你想安裝Sdk的目錄, 比如

image.png

查看當(dāng)前渠道
flutter channel

image.png

可使用以下命令切換渠道

flutter channel master
flutter upgrade

如果遇到報(bào)錯(cuò)
git: Aborting
Switching channels failed with error code 1.
cd 到flutter安裝目錄, 執(zhí)行
git checkout .
然后重新執(zhí)行

flutter channel master
flutter upgrade

可能中間會(huì)失敗幾次, 多試幾次就可以了


image.png

3 安裝Dart

Dart官網(wǎng) https://dart.dev/get-dart

安裝Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

安裝dart
 brew tap dart-lang/dart
 brew install dart

如果報(bào)錯(cuò)
Error: An exception occurred within a child process: DownloadError: Failed to download resource "dart" Download failed: https://storage.googleapis.com/dart-archive/channels/stable/release/2.7.2/sdk/dartsdk-macos-x64-release.zip

解決方法
根據(jù)報(bào)錯(cuò)里面的地址, 手動(dòng)下載, 然后解壓放到

/usr/local/Homebrew/dart-sdk

4 配置環(huán)境變量

把 Flutter和Dart安裝目錄的 bin 目錄配置到環(huán)境變量,然后把 Flutter國(guó)內(nèi)鏡像也配置到環(huán)境變量里面

vim ~/.bash_profile

添加以下內(nèi)容

# >>> flutter init >>>
export PATH=~/Development/flutter/bin:$PATH
export FLUTTER_ROOT=~/Development/flutter

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# >>> flutter init >>>

# >>> dart init >>>
export DART_HOME=~/Development/flutter/bin/cache/dart-sdk/bin
export PATH="${DART_HOME}:${PATH}"
# >>> dart init >>>

注: ~/Development/flutter是步驟2中解壓的SDK的存放路徑

使內(nèi)容生效
source ~/.bash_profile
輸入
flutter -h
如果能出來(lái)一些命令說(shuō)明 flutter sdk 配置成功。
注意如果配置完成后輸入 flutter -h 告訴你 flutter 不是內(nèi)置命令之類(lèi)的錯(cuò)誤的話,可能 sdk 沒(méi)有配置成功,也可能 sdk 下載的時(shí)候沒(méi)有下載全

5 分別執(zhí)行下面命令

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

brew update

brew install --HEAD libusbmuxd

brew link libusbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstaller

brew install ios-deploy

brew install cocoapods

pod setup

可能在運(yùn)行 brew install --HEAD libimobiledevice 會(huì)報(bào)錯(cuò),多試幾次就成功了--__--||, 如果還是不成功, 可以換成下面的命令
brew install libimobiledevice

6 安裝Android SDK

可以自己下載SDK安裝, 也可以通過(guò)Android Studio安裝, 這里推薦用Android Studio來(lái)安裝, 后續(xù)也方便查看項(xiàng)目代碼

Android Studio下載地址 https://developer.android.google.cn/studio/

安裝完后, 打開(kāi), 根據(jù)提示安裝好相應(yīng)的SDK即可

7 檢測(cè)是否配置完成

flutter doctor

如果出現(xiàn)下圖, 就是配置成功


image.png

如果出現(xiàn)報(bào)錯(cuò) Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.

image.png

打開(kāi)Android Studio -> Preference -> 搜索框搜索SDK -> Android SDK -> SDK Tools -> 勾選Android SDK Command-line Tools(latest) -> OK

image.png

等待下載完即可, 然后重新執(zhí)行flutter doctor執(zhí)行檢驗(yàn)

如果安裝的Flutter SDK是2.10, 則會(huì)報(bào)錯(cuò) HTTP Host Availability HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host: Operation timed out

解決方法

1 找到flutter sdk的文件目錄,打開(kāi)flutter\packages\flutter_tools\lib\src\http_host_validator.dart

2 將https://maven.google.com/修改為https://dl.google.com/dl/android/maven2/

3 關(guān)閉終端,重新打開(kāi)終端

4 去到flutter sdk的文件目錄, 找到bin目錄,刪除cache文件夾

5 在終端重新運(yùn)行flutter doctor, 問(wèn)題解決。


image.png

8 命令行工具生成 Flutter 項(xiàng)目

flutter create flutterdemo

9 修改 Flutter Sdk 目錄的權(quán)限以及項(xiàng)目的權(quán)限

sudo chmod -R 777 /Users/darren/Development/flutter (Flutter SDK 目錄)
sudo chmod -R 777 /Users/darren/Desktop/VS Code projects/Flutter/flutterdemo (項(xiàng)目目錄)

10 運(yùn)行iOS項(xiàng)目

注: 打開(kāi)項(xiàng)目之前一定得先修改權(quán)限

Xcode打開(kāi)項(xiàng)目目錄 -> ios -> Runner.xcodeproj -> Command + R 運(yùn)行

11 VS Code 中安裝 Flutter 插件 Dart 插件

安裝VS Code https://code.visualstudio.com/

設(shè)置 -> Extensions -> 搜索并安裝 Flutter插件 Flutter Widget Snippets插件 Dart插件

12 用VS Code運(yùn)行

打開(kāi) flutter 項(xiàng)目進(jìn)行開(kāi)發(fā), 執(zhí)行
flutter run

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容