Mac下Flutter 工程搭建
环境:
MacPro电脑系统macOS Big Sur 11.6
Flutter SDK
Xcode
Andriod Studio
1 安装Flutter
安装步骤可以直接参考官网官网
1.1 下载Flutter SDK
1.1 进入官网
image.png1.1.2 选择对应的系统
image.png1.1.3 下载最新压缩包
image.pngsdk下载传送门
1.1.4 解压SDK包
下载完成后,接下来就是安装路径。
因为Flutter的SDK中包含了很多命令行工具,所以建议安装到你平时放命令行工具程序的地方!这里放在了家目录下~/flutter(目录仅供参考)
1.2 配置环境变量
Flutter在运行的时候去要去服务器下载资源,而资源又在国外的服务器上,所以这个地方要么你“科学上网”,要么就是使用镜像服务器。
其实官网早就有提示
image.png
1.2.1 镜像配置
来到shell进行配置文件配置
本机使用的zsh,所以配置~/.zshrc文件。如果没有此文件,请执行
touch ~/.zshrc
如果你的mac默认的是bash,请配置~/.bash_profile文件
#flutter 镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1.2.2 环境变量配置
同样是在~/.zshrc或者~/.bash_profile中配置
#flutter 环境变量
export FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH
⚠️FLUTTER=(你的flutter安装地址)
文件配置完成后,执行
source ~/.zshrc
#bash 执行 source ~/.bash_profile
执行结束后,检查flutter安装情况,执行
flutter doctor
会出现如下结果
image.png
对号表示没有问题,叉号表示没安装好
2 Xcode安装
直接前往Appstore安装,这里就不再啰嗦
3 配置Andriod Studio
3.1 下载ndriod Studio
国内官网传送门下载
3.2配置SDK
直接根据安装引导,整个过程无需“科学上网”
当然我们还可以直接在Andriod Studio 偏好设置页面
image.png
如果要下载的sdk显示不全,请去掉Hide Obsolete Packages中的对号
3.3配置flutter插件
image.png当出现如下弹框时
image.png
选择Install 进行安装
安装完成 重启Andriod Studio后,出现如下页面
image.png
3.4 解决证书问题
3.4.1 执行 flutter doctor出现如下报错
image.png可以执行
flutter doctor --android-licenses
当提示是否接受许可时,直接一顿y
3.4.2 如果如下报错
image.png在偏好设置中,先下载最新的SDk
image.png
然后继续执行上面flutter doctor --android-licenses
最后执行flutter doctor,可以看到关于Android license的报错已经没有了。
3.5 更换夜神模拟器(自己选择,可以不换)
因为好用,支持Mac,所以就换(关键还能玩游戏)
image.png
安装完,直接启动模拟器,然后就能在as中使用了
image.png
3.5.1如果发现模拟器卡在99%不动了,请看看这里
image.png3.5.2如果打开了夜神模拟器,发现as上搜索不到
第一步 检查Virtual Box的状态是否是正在运行
image.png
第二步 执行
#进入夜神软件目录
cd /Applications/NoxAppPlayer.app/Contents/MacOS
#连接夜神模拟器
adb connect 127.0.0.1:62001
然后就可以在as中选择夜神模拟器了
4 创建flutter工程
直接创建个flutter工程,开始搞起来
4.1 创建flutter工程
4.1.1 选择New Flutter Project
image.png4.1.2 Flutter
image.png4.1.3 工程名称
image.png这里的工程名字不能用驼峰命名法,只能小写+下划线隔开
此时你开心的run,然后控制台输入出卡住了
4.2 Gradle卡住
然后发现,你首次运行的时候,卡在这一块,因为Gradle的Maven仓库在国外服务器,然后你懂的哈···
image.png
解决这个问题,换个国内镜像
4.2.1 修改flutter安装目录中的flutter.gradle文件
执行:
# ~/flutter 你的flutter安装路径
vi ~/flutter/packages/flutter_tools/gradle/flutter.gradle
增加改镜像地址
buildscript {
repositories {
// google()
// mavenCentral()
//更换镜像地址
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
}
}
4.2.2 修改工程目录中的build.gradle文件
文件目录项目-andriod-build.gradle
image.png
修改完之后,继续run
4.2.3 大功告成 结束
我这里用的夜神模拟器,你可以选择web、iOS模拟器等都可以
image.png
以上就是本人在创建mac环境下flutter工程遇到的问题和解决方法,如果有什么不对的地方,还敬请大神指点。