前言

各位老鐵，上周末參加了深圳的GDG，在大會(huì)上騰訊的小哥哥接過(guò)Google在I/O大會(huì)上的接力棒，繼續(xù)騙我們學(xué)習(xí)Flutter。于是，我被洗腦了。Ozo......今天就記錄一下Mac環(huán)境下安裝配置Flutter環(huán)境的操作步驟。歡迎大家一起入坑??！

1. 獲取最新的Flutter SDK

注意：記住這里下載flutter的地址，后面會(huì)使用

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

下載flutter.png

2. 進(jìn)入到Flutter保存的目錄下面

export PATH=pwd/flutter/bin:$PATH

設(shè)置路徑.png

注意：這里是要在你下載的路徑下面輸入這行代碼

2.1 國(guó)內(nèi)因?yàn)榫W(wǎng)絡(luò)環(huán)境的原因，大部分會(huì)失敗，我們使用下面Google為中國(guó)地區(qū)提供的鏡像進(jìn)行配置

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="PATH"
cd ./flutter
flutter doctor

國(guó)內(nèi)鏡像配置.png

繼續(xù)在終端運(yùn)行 flutter doctor

運(yùn)行下面的命令檢查一下是否需要安裝依賴項(xiàng)，完成安裝

flutter doctor

運(yùn)行成功.png

在第一次運(yùn)行這個(gè)命令的時(shí)候，會(huì)自動(dòng)下載安裝flutter所需要的相關(guān)依賴項(xiàng)。如果部分安裝失敗，根據(jù)失敗項(xiàng)的提示進(jìn)行安裝。

3 安裝Flutter和Dart

我就用Android Studio作為示例，打開Preferences面板，在Plugins中搜索Flutter，install，安裝時(shí)自動(dòng)安裝Dart，安裝完成后重啟AndroidStudio

安裝Flutter插件.png

重啟Android Studio之后，F(xiàn)ile->New 中出現(xiàn) New Flutter Project，說(shuō)明安裝成功

創(chuàng)建Flutter項(xiàng)目.png

4. 創(chuàng)建Flutter 項(xiàng)目

File -> New -> New Flutter Project，選擇Flutter Application -> Next,這里注意 Flutter SDK的路徑是否正確。這里的SDK路徑就是步驟一中下載flutter的路徑。

新建Flutter.png

安裝過(guò)程問(wèn)題：
在創(chuàng)建的過(guò)程中 Create Flutter project這個(gè)界面會(huì)一直卡主不動(dòng)。
解決方案：
在等待十分鐘時(shí)候，選擇強(qiáng)制退出Android Studio。然后，注意！注意！注意！這個(gè)時(shí)候，AS已經(jīng)把Flutter項(xiàng)目創(chuàng)建好了，我們選擇open打開這個(gè)flutter項(xiàng)目

示例

image.png

結(jié)語(yǔ)

好了，mac上配置flutter的步驟記錄完了。有不懂的地方，歡迎各位老鐵留言。同時(shí)，騙大家學(xué)習(xí)一波flutter。