最近捣腾了一下Flutter,故写下这篇文章给大家分享一下如何在mac下安装Flutter.
安装环境
- Android Studio 4.0.1
- Xcode 11.7
- flutter 1.20.4
准备工作
0x00 安装 Android Studio
Android Studio是Google官方提供的Android应用IDE,官网下载链接:戳这里,当前最新版本为4.0.1。
运行Android Studio,按照向导提示一步一步走下去:
-
选择Do not import settings.
Do not import settings -
弹框选择cancel.
选择cancel -
弹出点击Next.
Next -
install Type选择Standard,点击Next.
选择Standard - 静静等待组件下载并自动安装完成.
0x01 安装Xcode
如果您是苹果开发者可以跳过此步。Xcode直接在App Store安装即可,安装完成打开Xcode自动安装配置组件,完成后输入命令open -a Simulator打开 iOS 模拟器,至此Xcode安装完毕。
0x02 安装Flutter
去 Flutter官网下载当前最新稳定版本(1.20.4),如果官网无法打开,可以去Flutter.cn下载:
下载完成后放到你想要的目录解压,笔者放到了~/Flutter
目录下,zip包解压后flutter的bin目录的路径为:~/Flutter/flutter/bin
。
对于macOS系统,我们可以编辑~/.bash_profile文件,将flutter命令添加到环境变量PATH中,添加如下代码:
export PATH=~/Flutter/flutter/bin:$PATH
添加完成后重启命令行工具,我们来试试输入flutter --version
命令查看当前版本,配置正确的话,可以得到当前flutter的版本:
admin@admindeMac ~ % flutter --version
Flutter 1.20.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision fba99f6cf9 (6 days ago) • 2020-09-14 15:32:52 -0700
Engine • revision d1bc06f032
Tools • Dart 2.9.2
至此我们初步完成了flutter的基本环境安装,由于Flutter源站在国内可能不太稳定,因此谷歌中国开发者社区(GDG)专门搭建了临时镜像,使得我们的 Flutter 命令行工具可以到该镜像站点下载所需资源。编辑~/.bash_profile 文件,添加如下代码配置镜像站点环境变量:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如果后续读者发现镜像站点无法访问,可以去Flutter社区获取最新的中国可用镜像站点,更新~/.bash_profile文件即可。
至此,我们已经把几个比较重要的工具安装完成,接下来可以使用flutter doctor
命令来检查一下flutter的环境是否完全搭建好:
可以看到[!]标注的是警告,我们可以按照提示运行
flutter doctor --android-licenses
解决。而[x]标注的是错误,必须解决,这里提示我们没有安装Flutter plugin和Dart plugin。我们打开Android Studio->Prefenrencs->Plugin,在Marketplace栏搜索flutter,安装flutter plugin:
安装完成后重新运行flutter doctor
命令,可以看到已经没有错误了:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.15.6 19G2021, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.7)
! CocoaPods 1.7.5 out of date (1.8.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to
your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade:
sudo gem install cocoapods
[✓] Android Studio (version 4.0)
[!] Connected device
! No devices available
运行Hellow word
在flutter/examples目录下,有一些flutter的实例项目,用Android Studio打开hello_world目录,首次打开hellow_word项目,会提示'Pub get'has not been run:
我们点击右侧的'Get dependencies',Android Studio会自动运行flutter pub get
:
flutter pub get
Running "flutter pub get" in hellow_word... 1.7s
Process finished with exit code 0
0x00 iOS模拟器运行
在顶部设备列表选择'Open iOS Simulator'打开iOS模拟器,选择指定的iOS模拟器后直接Run即可。
0x01 Android模拟器运行
我们需要先添加一个安卓模拟器,在工具栏右侧点击AVD Manager按钮添加安卓模拟器:
详细添加过程不再赘述,这里我创建了一个Pixel3 API 27的模拟器,选择之后开始Run。
遇到的问题
如果你可以顺利的编译并运行到安卓模拟器上,可以跳过此段内容。
在编译运行过程,我遇到了一个错误:
Exception in thread "main" java.util.zip.ZipException: error in opening zip file
解决方法:
在根目录使用快捷键Shift+Command+.显示隐藏文件和目录,删除.gradle
目录,重新编译运行项目,这个时候会重新创建.gradle
目录并下载相应文件,耐心等待即可。
总结
本文主要介绍了flutter的环境搭建过程,并在iOS和Android模拟上成功运行hellow_word项目。希望本文可以给你带来帮助。
注意:随着时间的推移,相关开发环境可能会升级更新,文中的方法不一定适用。