在开发Flutter的过程中,由于我们需要开发苹果APP,所以,我们就需要配置一下苹果的Flutter环境,接下来,就一步步的给大家展示 Mac本如何配置Flutter
一、准备工作
- 升级MacOS到最新的系统(建议是最新的系统)
- 安装最新的Xcode
- 电脑上面安装brew https://brew.sh/
二、下载 Flutter、配置 Flutter 环境变量、配 置 Flutter 镜像
- 下载Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos - 把下载好的 Flutter SDK 随便减压到你想安装 Sdk 的目录如 /Users/admin/Downloads/flutter
- 解压好后,打开终端(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文件夹,右键有一个显示简介
- 配置好后,按下
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
- 首先我们要创建自己的项目文件夹,比如我就在桌面创建了后,利用命令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
运行起来您的项目了