windows環(huán)境搭建教程傳送門(mén)

下載flutterSdk

進(jìn)入fluttersdk下載頁(yè),下載后雙擊解壓放入自己文件夾，博主放入的的位置是/Users/[用戶(hù)名]/Sdk下面。

配置環(huán)境變量

網(wǎng)上各種教程都是使用vim進(jìn)行編輯的，但是博主不喜歡這樣，我是使用vscode進(jìn)行編輯的，看操作

使用mac訪達(dá)進(jìn)入/Users/[用戶(hù)名]，使用命令command+shift+.顯示隱藏文件，找到文件.bash_profile使用vscode打開(kāi)

# flutter sdk位置
export PATH=/Users/[用戶(hù)名]/Sdk/flutter/bin:$PATH
export PATH=/Users/[用戶(hù)名]/Sdk/flutter/bin/cache/dart-sdk/bin:$PATH
# 這個(gè)因?yàn)楸娝苤脑蚺渲胒lutter 網(wǎng)絡(luò)環(huán)境
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

保存后，別急 此時(shí)終端輸入flutter命令還是提示找不到，別急，進(jìn)入終端輸入命令vim .zshrc

source ~/.bash_profile

保存后，即可，輸入 fluuter --version

image.png

下載Android studio

進(jìn)入官網(wǎng)下載，安裝過(guò)程我這里就不訴說(shuō)了，對(duì)于android sdk的下載地址，介意大家可以和fluttersdk一樣新建一個(gè)文件夾放入，在繼續(xù)在Android studio上安裝flutter插件

配置android 環(huán)境
繼續(xù)我們?cè)?code>.bash_profile填上配置

#Android studio環(huán)境配置 這里是sdk的安裝地址
export ANDROID_HOME="/Users/[用戶(hù)名]/Sdk/AndroidSdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

操作完之后我們執(zhí)行flutter doctor

image.png

image.png

image.png

image.png

安裝xcode工具

直接在蘋(píng)果的appstore中下載安裝即可,但是別急，還需安裝cocoapods

sudo gem install cocoapods

如果終端報(bào)錯(cuò)

ERROR :Error 、、、、

那就安裝低版本的

sudo gem install cocoapods -v 1.10.0

在執(zhí)行flutter doctor

image.png

至此我們的環(huán)境 安裝完畢。

創(chuàng)建第一個(gè)flutter項(xiàng)目

flutter create [項(xiàng)目名稱(chēng)]

注意你的虛擬機(jī)，因?yàn)槲覀冞@里安裝了xcode 你可以在vscode右下角中選擇iphone的虛擬機(jī)運(yùn)行

image.png

至此我們結(jié)束了，已經(jīng)可以跑起來(lái)了?。?/p>