flutter超详细环境搭建(Mac版)

windows环境搭建教程传送门

下载flutterSdk

进入fluttersdk下载页,下载后双击解压放入自己文件夹，博主放入的的位置是/Users/[用户名]/Sdk下面。

配置环境变量

网上各种教程都是使用vim进行编辑的，但是博主不喜欢这样，我是使用vscode进行编辑的，看操作

使用mac访达进入/Users/[用户名]，使用命令command+shift+.显示隐藏文件，找到文件.bash_profile使用vscode打开

# flutter sdk位置
export PATH=/Users/[用户名]/Sdk/flutter/bin:$PATH
export PATH=/Users/[用户名]/Sdk/flutter/bin/cache/dart-sdk/bin:$PATH
# 这个因为众所周知的原因配置flutter 网络环境
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

保存后，别急 此时终端输入flutter命令还是提示找不到，别急，进入终端输入命令vim .zshrc

source ~/.bash_profile

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

image.png

下载Android studio

进入官网下载，安装过程我这里就不诉说了，对于android sdk的下载地址，介意大家可以和fluttersdk一样新建一个文件夹放入，在继续在Android studio上安装flutter插件

配置android 环境
继续我们在.bash_profile填上配置

#Android studio环境配置 这里是sdk的安装地址
export ANDROID_HOME="/Users/[用户名]/Sdk/AndroidSdk"
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

操作完之后我们执行flutter doctor

image.png

发现还有两处地方是有问题的，我们继续修复第二项，打开android studio,按照我的界面配置

image.png

image.png

然后继续在终端中输入flutter doctor --android-licenses,然后他会询问什么鬼，一直按y即可。
完成之后我们继续检查下flutter,终端输入flutter doctor

image.png

安装xcode工具

直接在苹果的appstore中下载安装即可,但是别急，还需安装cocoapods

sudo gem install cocoapods

如果终端报错

ERROR :Error 、、、、

那就安装低版本的

sudo gem install cocoapods -v 1.10.0

在执行flutter doctor

image.png

至此我们的环境 安装完毕。

创建第一个flutter项目

flutter create [项目名称]

注意你的虚拟机，因为我们这里安装了xcode 你可以在vscode右下角中选择iphone的虚拟机运行

image.png

至此我们结束了，已经可以跑起来了！！