Mac笔记本配置Flutter开发环境

在开发Flutter的过程中,由于我们需要开发苹果APP,所以,我们就需要配置一下苹果的Flutter环境,接下来,就一步步的给大家展示 Mac本如何配置Flutter
一、准备工作
  1. 升级MacOS到最新的系统(建议是最新的系统)
  2. 安装最新的Xcode
  3. 电脑上面安装brew https://brew.sh/
二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像
  1. 下载Flutter SDK
    https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
  2. 把下载好的 Flutter SDK 随便减压到你想安装 Sdk 的目录如 /Users/admin/Downloads/flutter
  3. 解压好后,打开终端(Command+空格 搜索终端),输入下面这行命令
 vim ~/.bash_profile

输入后,就进入下面这个情况

在这里插入图片描述
默认是无法编辑的,需要按下你的i键进入可编辑状态,将下面这些复制进去,这里需要注意一下:第一行的 PATH= 这个路径是你自己的FlutterSDK路径,不要用我的这个

export PATH=/Users/admin/Downloads/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如何查看您的FlutterSDK路径?

方法一:
新建一个终端窗口,将你的SDK拉入进新窗口中,就会显示他的路径了
在这里插入图片描述
点击访答,找到你的Flutter路径
在这里插入图片描述
直接将你的Flutter文件夹拉入到终端当中,就会展示文件夹的路径了

方法二:
找到Flutter文件夹,右键有一个显示简介
在这里插入图片描述

  1. 配置好后,按下Esc,输入命令::wq 保存并退出Flutter,这时候,你的环境就配置完毕了, 您可以再次输入我们上面的哪个vim命令进入查看一下,如果有的话,那就没问题了,接下来,就是输入下面这行命令,让您的环境配置生效了
 source ~/.bash_profile

输入这个命令之后,如果命令行出现下面这个,恭喜您,您的Flutter SDK环境已经配置完毕了
在这里插入图片描述

注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话,可能 sdk 没有配置成功,也可能 sdk 下载的时候没有下载全

三、运行 flutter doctor 命令检测环境

首次运行会出现以下错误,不要慌,我们来解决掉它在这里插入图片描述
在修改这些错误之前,要先安装个brew,这个相当于我们Windows中的npm,专门用来安装包的
地址:https://brew.sh

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

由于每个人的报错情况是不同的,因为我的Mac本之前配置过brew,有一些环境是已经安装好了的,所以我只需要执行一个命令就行,但是如果读者您的错误 和我上面截图的错误不同,比较多的话,就利用brew运行 终端给出的解决办法,也就是To install下面的那些,就是需要我们运行的命令行如果有不懂如何解决的,可留言@我

运行完这些命令后,我们再一次运行flutter doctor检测,可以看到,我们的Mac环境已经搭建完毕了
在这里插入图片描述
上面的那个红X是因为我们没有配置Android模拟器的问题,并不影响我们使用,如果需要配置的话,可以参考配置Windwos的环境或者看我的另外一篇文章:利用VScode搭建Flutter环境开发

四、命令行工具生成 Flutter 项目
sudo flutter create flutterdemo
  1. 首先我们要创建自己的项目文件夹,比如我就在桌面创建了后,利用命令cd 进入到我们的项目路径
    在这里插入图片描述进入来后,我们就可以利用创建项目的命令创建项目了
    在这里插入图片描述
    输入创建命令后,需要输入您的电脑密码,回车后,就能够创建成功您的第一个Flutter项目了
    在这里插入图片描述
    Flutter已经提示我们可以运行该项目拉~~~~
五、修改 Flutter Sdk 目录的权限以及项目的 权限

保险起见,我们需要给我们的Flutter项目和SDK加上可以修改的权限或者 最高权限
在这里插入图片描述

sudo chmod -R 777 * 

代表递归给当前文件夹下的所有文件添加最高权限

六、Xcode 打开 flutter 项目 模拟器运行项 目

首先打开项目,进入到IOS当中
在这里插入图片描述
双击,Xcode就可以打开Flutter项目了
在这里插入图片描述

在这里插入图片描述
点击运行后,首次运行可能会花费时间比较长,所以需要等待一下。
还有的问题就是已经安装上了demo,但是一直打不开,我们称为假卡死状态,这个时候,您只需要将demo删除掉,从新再一次的运行就可以解决了。
成功运行
在这里插入图片描述

七、在 Vscode 中配置 开发 Flutter 项目

首先去Vscode官网,下载最新版的Vscode(AppStore搜不到)

下载好后,安装Flutter插件以及Dart插件,一般安装了Flutter后,Dart都会随带安装上
在这里插入图片描述
接着就是导入您的Flutter项目,就可以直接Flutter run运行起来您的项目了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值