1.下載SDK
之前是有安裝包吊圾，但是環(huán)境沒(méi)搭建好，使用命令：

git clone -b stable https://github.com/flutter/flutter.git

下載特別慢墙懂，所以查了一下僧界，使用以下命令下載很快：

git clone https://github.com/flutter/flutter.git -b stable --depth 1

2.配環(huán)境變量（Mac和Windows有區(qū)別）
open ~/.bash_profile
export FLUTTER_HOME=/Users/liuffsunny/Desktop/flutter（SDK文件夾）
export PATH=$PATH:$FLUTTER_HOME/bin (flutter環(huán)境變量)
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin (dart環(huán)境變量)

image.png

2.配置鏡像

image.png

最后bash_profile文件里的內(nèi)容：

bash_profile文件

在終端命令輸入：
open ~/.bash_profile //打開(kāi)bash_profile ( 如果不存在這個(gè)文件敌买，需要先創(chuàng)建)
創(chuàng)建步驟：

1. 啟動(dòng)終端Terminal
2. 進(jìn)入當(dāng)前用戶(hù)的home目錄
    輸入cd ~
3. 創(chuàng)建.bash_profile
    輸入touch .bash_profile
4. 編輯.bash_profile文件
    輸入open .bash_profile
  第一種方式
<1>、為在彈出的.bash_profile文件內(nèi)進(jìn)行編輯  
<2>外盯、編輯完成后直接保存文件
<3>、關(guān)閉.bash_profile文件
<4>翼雀、更新配置過(guò)的環(huán)境變量    輸入source .bash_profile
在.bash_profile文件為鎖定狀態(tài)的時(shí)候饱苟，第一種方式是不可行的，那么用第二種方式來(lái)編輯.bash_profile文件
 第二種方式狼渊，在Terminal終端通過(guò)指令來(lái)對(duì).bash_profile文件進(jìn)行編輯
<1>箱熬、輸入 vim .bash_profile
<2>、輸入 i 進(jìn)行編輯模式
<3>狈邑、然后把需要編輯的內(nèi)容鍵入城须，編輯完之后直接按esc退出編輯模式，
<4>米苹、輸入:w進(jìn)行文件的保存糕伐，:wq為保存并退出指令
備注：在實(shí)際開(kāi)發(fā)過(guò)程中，遇到了沒(méi)有寫(xiě)入權(quán)限的問(wèn)題

source ~/.bash_profile //刷新當(dāng)前終端窗口 (在 ~/.bash_profile 中配置環(huán)境變量, 可是每次重啟終端后配置的不生效.需要重新執(zhí)行 : $source ~/.bash_profile)
注意后期執(zhí)行flutter 相關(guān)的命令驱入，一定也是執(zhí)行過(guò)這句之后赤炒。
3.指令
flutter --version // 檢測(cè)SDK版本
dart --version // 檢測(cè)dartSDK版本

image.png

image.png

[!] Android Studio (version 4.1)
    ? Flutter plugin not installed; this adds Flutter specific functionality.
    ? Dart plugin not installed; this adds Dart specific functionality.

在這里選了一下SDK的文件路徑雪情，就好了

image.png

image.png

cd 到文件路徑：
flutter run命令：
報(bào)錯(cuò)：Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

image.png

由于Android Studio有問(wèn)題，flutter doctor檢測(cè)到?jīng)]有可用的設(shè)備尘执，于是轉(zhuǎn)移到VSCode打開(kāi)現(xiàn)有項(xiàng)目舍哄，打開(kāi)dart文件，同意右下角的彈出框誊锭，會(huì)發(fā)現(xiàn)右下角出現(xiàn)了iPhone模擬器可選設(shè)備表悬，如圖所示：

image.png

如果覺(jué)得設(shè)備過(guò)少，可以在

image.png

image.png

在這里繼續(xù)添加丧靡，此時(shí)flutter doctor 檢測(cè)已有可用device蟆沫，
執(zhí)行flutter run，可以看到項(xiàng)目終于跑起來(lái)了温治。good luck饭庞！

終端顯示

運(yùn)行效果顯示

參考鏈接：

vs code 搭建flutter運(yùn)行環(huán)境（mac)