Mac下Flutter 工程搭建

環(huán)境:
MacPro電腦系統(tǒng)macOS Big Sur 11.6
Flutter SDK
Xcode
Andriod Studio

1 安裝Flutter

安裝步驟可以直接參考官網(wǎng)官網(wǎng)

1.1 下載Flutter SDK

1.1 進(jìn)入官網(wǎng)

image.png

1.1.2 選擇對(duì)應(yīng)的系統(tǒng)

image.png

1.1.3 下載最新壓縮包

image.png

sdk下載傳送門

1.1.4 解壓SDK包

下載完成后,接下來就是安裝路徑。
因?yàn)镕lutter的SDK中包含了很多命令行工具,所以建議安裝到你平時(shí)放命令行工具程序的地方!這里放在了家目錄下~/flutter(目錄僅供參考)

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

Flutter在運(yùn)行的時(shí)候去要去服務(wù)器下載資源,而資源又在國外的服務(wù)器上,所以這個(gè)地方要么你“科學(xué)上網(wǎng)”,要么就是使用鏡像服務(wù)器。
其實(shí)官網(wǎng)早就有提示


image.png

1.2.1 鏡像配置

來到shell進(jìn)行配置文件配置
本機(jī)使用的zsh,所以配置~/.zshrc文件。如果沒有此文件,請(qǐng)執(zhí)行

touch ~/.zshrc

如果你的mac默認(rèn)的是bash,請(qǐng)配置~/.bash_profile文件

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

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

同樣是在~/.zshrc或者~/.bash_profile中配置

#flutter 環(huán)境變量
export FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH

??FLUTTER=(你的flutter安裝地址)
文件配置完成后,執(zhí)行

source ~/.zshrc
#bash 執(zhí)行 source ~/.bash_profile

執(zhí)行結(jié)束后,檢查flutter安裝情況,執(zhí)行

flutter doctor

會(huì)出現(xiàn)如下結(jié)果


image.png

對(duì)號(hào)表示沒有問題,叉號(hào)表示沒安裝好

2 Xcode安裝

直接前往Appstore安裝,這里就不再啰嗦

3 配置Andriod Studio

3.1 下載ndriod Studio

國內(nèi)官網(wǎng)傳送門下載

image.png

3.2配置SDK

直接根據(jù)安裝引導(dǎo),整個(gè)過程無需“科學(xué)上網(wǎng)”
當(dāng)然我們還可以直接在Andriod Studio 偏好設(shè)置頁面


image.png

如果要下載的sdk顯示不全,請(qǐng)去掉Hide Obsolete Packages中的對(duì)號(hào)

3.3配置flutter插件

image.png

當(dāng)出現(xiàn)如下彈框時(shí)


image.png

選擇Install 進(jìn)行安裝
安裝完成 重啟Andriod Studio后,出現(xiàn)如下頁面


image.png

3.4 解決證書問題

3.4.1 執(zhí)行 flutter doctor出現(xiàn)如下報(bào)錯(cuò)

image.png

可以執(zhí)行

flutter doctor --android-licenses

當(dāng)提示是否接受許可時(shí),直接一頓y

3.4.2 如果如下報(bào)錯(cuò)

image.png

在偏好設(shè)置中,先下載最新的SDk


image.png

然后繼續(xù)執(zhí)行上面flutter doctor --android-licenses
最后執(zhí)行flutter doctor,可以看到關(guān)于Android license的報(bào)錯(cuò)已經(jīng)沒有了。

3.5 更換夜神模擬器(自己選擇,可以不換)

因?yàn)楹糜?,支持Mac,所以就換(關(guān)鍵還能玩游戲)


image.png

安裝完,直接啟動(dòng)模擬器,然后就能在as中使用了


image.png

3.5.1如果發(fā)現(xiàn)模擬器卡在99%不動(dòng)了,請(qǐng)看看這里

image.png

3.5.2如果打開了夜神模擬器,發(fā)現(xiàn)as上搜索不到

第一步 檢查Virtual Box的狀態(tài)是否是正在運(yùn)行


image.png

第二步 執(zhí)行

#進(jìn)入夜神軟件目錄
cd /Applications/NoxAppPlayer.app/Contents/MacOS
#連接夜神模擬器
adb connect 127.0.0.1:62001

然后就可以在as中選擇夜神模擬器了

4 創(chuàng)建flutter工程

直接創(chuàng)建個(gè)flutter工程,開始搞起來

4.1 創(chuàng)建flutter工程

4.1.1 選擇New Flutter Project

image.png

4.1.2 Flutter

image.png

4.1.3 工程名稱

image.png

這里的工程名字不能用駝峰命名法,只能小寫+下劃線隔開
此時(shí)你開心的run,然后控制臺(tái)輸入出卡住了

4.2 Gradle卡住

然后發(fā)現(xiàn),你首次運(yùn)行的時(shí)候,卡在這一塊,因?yàn)镚radle的Maven倉庫在國外服務(wù)器,然后你懂的哈···


image.png

解決這個(gè)問題,換個(gè)國內(nèi)鏡像

4.2.1 修改flutter安裝目錄中的flutter.gradle文件

執(zhí)行:

# ~/flutter 你的flutter安裝路徑
vi  ~/flutter/packages/flutter_tools/gradle/flutter.gradle

增加改鏡像地址

buildscript {
    repositories {
//        google()
//      mavenCentral()
//更換鏡像地址
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
    }
}

4.2.2 修改工程目錄中的build.gradle文件

文件目錄項(xiàng)目-andriod-build.gradle


image.png

修改完之后,繼續(xù)run

4.2.3 大功告成 結(jié)束

我這里用的夜神模擬器,你可以選擇web、iOS模擬器等都可以


image.png

以上就是本人在創(chuàng)建mac環(huán)境下flutter工程遇到的問題和解決方法,如果有什么不對(duì)的地方,還敬請(qǐng)大神指點(diǎn)。

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

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

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