Flutter的配置其實有一些坑。尤其針對iOS開發(fā)者不太熟悉Android的開發(fā)環(huán)境，萬事開頭難。個人選擇使用Android Studio 作為開發(fā)Flutter的工具，考慮到Google的兼容性。

01安裝Fluter

這里的步驟其實和官方的差不多，大家也可以直接參考官網

1.1 更新HomeBrew

HomeBrew在Mac電腦默認自帶這個工具包。我們只需要安裝Flutter之前先升級它。
打開你的終端輸入命令。

$ brew update

1.2 下載Flutter的SDK

1.2.1 進入官網

image.png

1.2.2 選擇對應系統(tǒng)

image.png

1.2.3 選擇最新版本壓縮包下載

image.png

1.2.4 解壓SDK包

下載完成后，那么接下來就是安裝路徑了。

因為Flutter的SDK中包含了很多命令行工具。我們需要配置環(huán)境變量，所以建議你安裝到你平時放命令行工具程序的地方! 我這里安裝在了根目錄的opt下!
/opt/flutter （僅供參考，安裝在哪里看你自己的習慣）

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

1.3.1 配置鏡像

因為Flutter 在運行的時候,需要去官方下載所需要的資源.那么沒有“梯子”的伙伴你會需要鏡像服務器，以下是官方文檔的友情提示。

image.png

來到你對應Shell的配置文件進行配置。
如果你使用默認的bash那么配置 ~/.bash_profile
如果你使用zsh那么配置~/.zshrc

#Flutter 鏡像配置
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1.3.2 配置Flutter環(huán)境變量

接下來，將Flutter命令行工具的路徑配置一下。還是對應Shell的配置文件中

#Flutter 配置
$ export FLUTTER=/opt/flutter/bin
$ export PATH=$FLUTTER:$PATH

配置完成后，重新打開終端或者輸入命令載入配置

#你自己的配置文件路徑
$ source ~/.bash_profile

那么接下來!我們可以看看Flutter是否配置完成了。Flutter有一個doctor檢測指令。專門用于檢測你的Flutter環(huán)境的。

$ flutter doctor

打鉤就是配置OK了. 叉叉就是還沒有配置好的.
我們可以看到首先配置好的是Flutter 運行環(huán)境!

image.png

那么接下來.我們安裝!Android Studio!

02 配置安卓環(huán)境

2.1 安裝Android Studio

我們先安裝Android Studio可以去國內官網下載

image.png

2.2 配置SDK

• 使用flutter doctor檢測

  
  
  image.png
• 解決
  使用提示中的命令升級SDK

$ "/Users/h/Library/Android/sdk/tools/bin/sdkmanager" "platforms;android-28" "build-tools;28.0.3"

2.3 配置安卓環(huán)境變量

在對應的Shell配置文件中寫下.

12 #安卓
 13 export ANDROID_HOME=~/Library/Android/sdk
 14 #安卓模擬器路徑
 15 export PATH=${PATH}:${ANDROID_HOME}/emulator
 16 #安卓tools路徑
 17 export PATH=${PATH}:${ANDROID_HOME}/tools
 18 #安卓 平臺工具
 19 export PATH=${PATH}:${ANDROID_HOME}/platform-tools

2.4 安裝Android Studio的插件

• 檢測環(huán)境，缺少Flutter插件

  
  
  image.png

• 來到Studio的偏好設置里面.

  
  
  image.png
  
  

  當跳出安裝Dart插件的界面時，也點擊Yes進行安裝。

• 安裝完成后重啟Android Studio?？梢钥吹接羞@樣的界面

  
  
  image.png

• 再次進行Flutter的檢測$ flutter doctor會發(fā)現(xiàn)搞定了!

  
  
  image.png

2.5 配置安卓的模擬器

• 打開AndroidStudio在工具欄上的模擬器管理

  
  
  image.png
  
  

  我們點開模擬器.選擇Creat 創(chuàng)建

• 創(chuàng)建設備

  
  
  image.png

• 選擇設備

  
  
  image.png

• 選擇系統(tǒng)并下載

  
  
  image.png

然后下一步! 最后點擊完成

注意這里最好給模擬器一個簡單的名字.因為后期我們可能會用命令啟動模擬器

2.6 配置虛擬機加速

• 來到Android Studio 進入SDK Manager里面… 找到并安裝!

  
  
  image.png
• 來到目錄下! 找到安裝程序

$ ~/Library/Android/sdk/extras/intel/Hardware_Accelerated_Execution_Manager/

image.png

• 查看進程

$ kextstat | grep intel

image.png

03配置iOS環(huán)境

目前1.5.4版本的Flutter需要匹配新版本的Xcode10

• 檢測flutter doctor

  
  
  image.png

• 安裝報錯

  
  
  image.png

• Github的issue里面有答案

  
  
  image.png
• 解決問題

$ brew link  pkg-config
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice 
$ brew install ideviceinstaller

• 配置完成!flutter doctor
  
  image.png
  
  收錄自|原文地址