Flutter-Mac環(huán)境搭建

有關(guān)Flutter的介紹我這里就不多說了,可以去Futter中文網(wǎng)去了解。

Flutter開發(fā)個(gè)人建議選擇使用Android Studio 作為開發(fā)Flutter的工具,處于對(duì)Google兼容性的考慮(其它也可以用VSCode)。

接下來直入主題

安裝Flutter

可以直接參考官網(wǎng),步驟差不多

更新HomeBrew

Mac下默認(rèn)帶HomeBrew工具包,不過我們最好在安裝flutter前去更新一下它。

$ brew update

下載Flutter的SDK

  • 首先進(jìn)入官網(wǎng),然后點(diǎn)擊下方所示按鈕

    官網(wǎng)下載

  • 接著按步驟選擇對(duì)應(yīng)系統(tǒng)安裝

    選擇安裝

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

下載
  • 解壓SDK壓縮包
    這里需要配置安裝路徑

注:Flutter因?yàn)榘吮姸嗝钚泄ぞ撸虼宋覀冃枰渲孟颅h(huán)境變量,這里建議把Flutter安裝到你平時(shí)放命令行工具程序的地方(個(gè)人習(xí)慣,僅供參考)

配置環(huán)境變量

  • 配置鏡像

因?yàn)镕lutter運(yùn)行時(shí)會(huì)去官方自動(dòng)下載所需資源,此時(shí)沒'fq'的話會(huì)比較慢,官方文檔里包含友情提示,告訴中國(guó)的使用者安裝配置鏡像服務(wù)器

友情提示

首先找到Shell的配置文件,對(duì)應(yīng)目錄如下:

  • 如果使用的是默認(rèn)的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
  • 配置Flutter環(huán)境變量
    還是在Shell的配置文件中
#Flutter 配置
$ export FLUTTER=/opt/flutter/bin
$ export PATH=$FLUTTER:$PATH

配置完成后載入配置

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

最后檢測(cè)Flutter是否配置完成

$ flutter doctor
終端顯示

這里有問題的話終端也會(huì)明確的指出,并給你相應(yīng)提示

配置安卓環(huán)境

官網(wǎng)安裝Android Studio

官網(wǎng)

然后繼續(xù)flutter_doctor檢測(cè)并按照提示修改解決問題

  • 配置安卓環(huán)境變量
    Shell配置文件中
#安卓
export ANDROID_HOME=~/Library/Android/sdk
#安卓模擬器路徑
export PATH=${PATH}:${ANDROID_HOME}/emulator
#安卓tools路徑
export PATH=${PATH}:${ANDROID_HOME}/tools
#安卓 平臺(tái)工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  • 安裝Android Studio的插件
    在偏好設(shè)置里面
    插件安裝

彈出安裝Dart插件的界面,也要點(diǎn)擊Yes進(jìn)行安裝

安裝完成后重啟Android Studio
可以看到多出了這么一條


啟動(dòng)界面

最后再進(jìn)行 $ flutter doctor 檢測(cè)基本就不會(huì)有問題了

  • 配置安卓的模擬器

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

配置模擬器

點(diǎn)開后選擇創(chuàng)建設(shè)備

創(chuàng)建設(shè)備

選擇設(shè)備


選擇設(shè)備

選擇系統(tǒng)


選擇系統(tǒng)

模擬器名字盡量簡(jiǎn)單,因?yàn)楹笃诳赡軙?huì)用命令啟動(dòng)模擬器

  • 配置虛擬機(jī)加速
    首先進(jìn)入SDK Manager
入口
安裝虛擬機(jī)加速

來到目錄下

$ ~/Library/Android/sdk/extras/intel/Hardware_Accelerated_Execution_Manager/
安裝程序

查看進(jìn)程

$ kextstat | grep intel

配置iOS環(huán)境

需要匹配Xcode版本(當(dāng)前1.7.8需要xcode10)

檢測(cè)flutter doctor

iOS所需環(huán)境

安裝報(bào)錯(cuò)

報(bào)錯(cuò)

可以去github的issues里面找答案

issues截圖

解決問題

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

最后再flutter doctor檢測(cè)一下,沒問題了就配置完成!

?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 1、進(jìn)入官網(wǎng)下載Flutter的sdk,官網(wǎng):https://flutter.dev/docs/developme...
    fanaf閱讀 4,527評(píng)論 0 8
  • 1. 獲取Flutter SDK 解壓安裝包到想要的安裝的目錄 2. 配置環(huán)境變量 3. 測(cè)試環(huán)境 如果看見關(guān)于F...
    小豪丶ace閱讀 267評(píng)論 0 0
  • 前言 本來我是想越過這一段的,但是因?yàn)楹芏嗳肆私馍跎?,便加上鏈?flutter簡(jiǎn)介 環(huán)境搭建 這里主要介紹 Ma...
    AlwaysLight閱讀 662評(píng)論 0 3
  • Flutter Mac 開發(fā)環(huán)境搭建1、下載Flutter SDK2、使用鏡像和配置環(huán)境變量3、查看Flutter...
    MR_詹閱讀 248評(píng)論 0 0
  • 閨蜜對(duì)我說,今晚的文字是不是會(huì)像水開了那樣,翻滾又沸騰呢?期待那么久的夢(mèng)想今天終于實(shí)現(xiàn)了,心情肯定是激動(dòng)又澎湃。 ...
    隨心隨新閱讀 580評(píng)論 0 0

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