讓我們一起用Mac 搭建 Flutter 開發(fā)環(huán)境
本文轉(zhuǎn)載自微信公眾號「網(wǎng)羅開發(fā)」,作者網(wǎng)羅開發(fā)。轉(zhuǎn)載本文請聯(lián)系網(wǎng)羅開發(fā)公眾號。
最近由于業(yè)務(wù)需要,開始進(jìn)行 Flutter 的研究,由于 Flutter 的環(huán)境搭建在官網(wǎng)上有些細(xì)節(jié)不是很清楚,筆者重新整理輸出
1. 配置鏡像
由于在國內(nèi)訪問 Flutter 有時(shí)可能會受到限制,F(xiàn)lutter 官方為中國開發(fā)者搭建了臨時(shí)鏡像,大家可以將如下環(huán)境變量加入到用戶環(huán)境變量中:
- vim ~/.bash_profile
- 輸入 i 進(jìn)入編輯模式,復(fù)制粘貼添加下面的環(huán)境變量
- # flutter 鏡像
- export PUB_HOSTED_URL=https://pub.flutter-io.cn
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 按 esc 進(jìn)入命令模式,輸入 :wq 退出保存
- 執(zhí)行 source ~/.bash_profile 使配置生效
2. 下載 Flutter SDK
下載穩(wěn)定的 1.22.6版本到本地:Flutter SDK 1.22.6 https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_1.22.6-stable.zip
3. 配置 Flutter SDK 環(huán)境
- 下載完之后解壓,然后將 flutter sdk 放入 /Library 目錄
- 在環(huán)境變量中添加 path,方便訪問 flutter sdk(具體步驟和第 1 步類似)
- # 鏈接 flutter sdk
- export PATH="$PATH:/Library/flutter/bin"
- 配置完成之后執(zhí)行下面命令,就會自動檢查并配置 flutter 環(huán)境
- flutter doctor
- 根據(jù)執(zhí)行結(jié)果,自行將環(huán)境完善即可
4. 創(chuàng)建一個(gè) Flutter 項(xiàng)目并運(yùn)行
4.1 終端
最簡單的方法是終端直接輸入下面的命令即可快速創(chuàng)建一個(gè) flutter 應(yīng)用并運(yùn)行起來
- flutter create myapp
- cd myapp
- flutter run
4.2 Android Studio
- 安裝插件:
https://flutter.cn/docs/get-started/editor?tab=androidstudio
- 創(chuàng)建/運(yùn)行項(xiàng)目:
https://flutter.cn/docs/get-started/test-drive?tab=androidstudio
4.3 VSCode
- 安裝插件
- 創(chuàng)建項(xiàng)目
cmd+shift+p 打開命令面板,輸入 Flutter,選擇 Flutter: New Application Project 即可創(chuàng)建一個(gè) flutter 應(yīng)用
- 運(yùn)行項(xiàng)目
使用 VSCode 打開項(xiàng)目,cmd+shift+p 打開命令面板,輸入 Flutter選擇 Flutter: Run Flutter Docktor 將應(yīng)用運(yùn)行起來