Flutter

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

2022-01-04  本文已影响0人  十年之后_b94a

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

至此我们结束了,已经可以跑起来了!!

上一篇下一篇

猜你喜欢

热点阅读