史上最全,苹果电脑搭建Flutter开发环境教程以及常见问题汇总
磨刀不误砍柴工,在这一节我们来学习如何基于Mac平台搭建Flutter开发环境。为了方便大家能够快速的搭建环境,我将整个过程归纳为以下几步:
步骤小贴士:
本节最后呢,为大家整理了整个环境搭建过程中常见的问题及解决办法。
首先,我们先来看在Mac搭建Flutter开发环境对系统都有哪些要求?
在Mac上要安装并运行Flutter要满足以下最低要求:
通常只要你的Mac电脑不是太老旧,然后有一定的预留空间,那这些系统要求基本上都是OK的。
由于在国内访问Flutter可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:
//打开 Macintosh HD ▸ Users ▸ 你的用户名 ▸ .bash_profile 文件
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
注意:此镜像为临时镜像,并不能保证一直可用,大家可以从 Using Flutter in China 上获得有关镜像服务器的最新动态。
另外,如果发现Flutter在更新依赖或下载SDK时出现网络相关的问题,可以先去除上面的镜像来定位问题是否为镜像设置导致。
1.点Flutter官网下载其最新可用的安装包。
2.解压安装包到你想安装的目录,如:
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_5.6.11-stable.zip
将Flutter SDK解压到
/你的用户名/Documents/flutter
目录下
3.添加flutter相关工具到path中:
export PATH="$PATH:`pwd`/flutter/bin"
此代码只能暂时针对当前命令行窗口设置PATH环境变量,要想永久将Flutter添加到PATH中请参考下面做法:
$ cd ~
$ vim .zshrc
//或
$ vim .bash_profile
是
.zshrc
还是.bash_profile
取决于你电脑当前使用的是哪个shell文件。对于macOS最新系统已经切到了.zshrc
。
然后添加:
export PATH=/Users/你的用户名/Documents/flutter/bin:$PATH
之后记得保存文件。
上面path配置完成之后,需要关闭终端重新打开,然后运行:
$ flutter doctor
该命令检查你的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示):
例如:
[-] Android toolchain - develop for Android devices
• Android SDK at /Users/xxx/Library/Android/sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
一般的错误会是XCode或Android Studio版本太低、或者没有ANDROID_HOME
环境变量等,可参考一下环境变量的配置来检查你的环境变量:
//Macintosh HD ▸ Users ▸ 你的用户名 ▸ .bash_profile
#Android 环境变量
export ANDROID_HOME=/Users/你的用户名/Library/Android/sdk
#Android 模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools 路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平台工具路径
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
#Android NDK路径
ANDROID_NDK_HOME=/Users/你的用户名/Library/Android/ndk/android-ndk-r10e
#FLutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#Flutter环境变量
export PATH=/你的用户名/Documents/flutter/bin:$PATH
第一次运行一个flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译,以后再运行就会快得多。
要用Flutter开发iOS App需要Xcode 11.0 或更高版本:
2.配置Xcode命令行工具以使用新安装的Xcode版本
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
以上路径时对于最新版Xcode的路径。如果你需要使用不同的Xcode版本,需要指定相应路径。
3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license
同意过了
接下来就可以使用Xcode,在iOS设备或模拟器上运行Flutter App了。
要准备在iOS模拟器上运行并测试您的Flutter应用,请按以下步骤操作:
1.在终端输入如下命令打开一个iOS模拟器:
$ open -a Simulator
2.通过模拟器菜单栏的 硬件>设备
,确保你打开是64位 iPhone 12或更新的模拟器
3.如果模拟器过大,可以通过模拟器的 Window> Scale 菜单下设置设备比例
1.通过如下命令创建一个Flutter项目
$ flutter create my_app
2.命令运行完成之后会在当前目录下创建一个名为my_app
的Flutter项目,然后通过一下命令可以运行它:
$ cd my_app
$ flutter run
要通过flutter run
将Flutter应用安装到iOS真机设备,需要一些额外的工具和一个Apple帐户,还需要在Xcode中进行设置:
当然,用XCode来将Flutter运行在真机上更简单,只需要点一下
run
按钮即可,可以根据需要进行选择这两种不同的运行方式;
遵循Xcode签名流程来配置您的项目:
在你Flutter项目目录中通过 open ios/Runner.xcworkspace
打开默认的Xcode workspace
在Xcode中,选择导航面板左侧中的Runner项目
在Runner target设置页面中,确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时,Xcode会创建并下载开发证书,向您的设备注册您的帐户,并创建和下载配置文件(如果需要)
当你第一次attach真机设备进行iOS开发时,需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到Mac时,请在对话框中选择 Trust
。
然后,转到iOS设备上的设置应用程序,选择 常规>设备管理 并信任您的证书。
1.下载并安装 Android Studio
因为Android网站设在国外,如果你的网络无法访问第一个地址,可以选择使用Google为中国开发者提供的中国网址进行访问。
另外,关于Android Studio的安装和配置,Android官方有比较详细的说明文档https://developer.android.google.cn/studio/intro,大家可以根据需要进行查阅;
2.启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具
本节主要讲解了如何在Mac平台搭建上Flutter开发环境,包括Flutter所必须的iOS和Android开发环境的搭建以及插件的安装。到这里呢使用Mac的小伙伴们已经完成了Flutter的整个开发环境的搭建,接下来就可以进入到Flutter的开发的相关基础知识的学习了。