Flutter入门(2):安卓 / iOS安装 Flutter
1. 安装指南
安装可以参考官方文档
由于iOS系统只能用Mac开发,本文介绍一下在Mac上的安装教程
- iOS:Xcode 安装及模拟器安装
- Android:Android Studio、gradle及模拟器安装
2. iOS 安装指南
2.1 首先安装 Xcode
安装比较简单,可以直接 Apple Store 下载,或者去渠道网站下载DMG包。
下载完成后,傻瓜式下一步安装即可。
2.2 模拟器安装
一般来说,Xcode安装完成后,会自动带有几个最新模拟器,所以这一步可以忽略。使用下方命令可以直接打开模拟器。
open -a Simulator
如果需要自定义安装模拟器,可以打开 Xcode -> Preferences -> Components,在这里下载和安装对应版本的模拟器。
运行 Flutter
flutter 对 Xcode 没有集成工具,只能使用以下命令进行调试。
具体可以参考第一个flutter程序
flutter run
3. Android 安装指南
3.1 首先安装 Android Studio
安装比较简单,直接去官网下载安装即可,傻瓜式安装。
注意:proxy 设置记得选 Auto,不然加载工程的时候可能会卡死很长时间。
3.2 安装 Flutter
打开 Android Studio -> Preferences -> Plugin -> 搜索 Flutter -> Install。
安装完成后重启 Android Studio 即可。
3.3 安装模拟器
打开 Android Studio 后,打开右上角对应图标
android_simulator.jpg
AVD Manager.png
在 AVD Manager 页面自行选择安装模拟器。
3.4 安装 gradle
注意:建议开VPN下载,下载速度较慢,容易超时,然后解决比较麻烦。
下边是我这边踩坑经历,以及解决方案。
下图是每次打开都不会再次更新 grade,而是如下图报错
gradle_outtime.jpeg
Failed to open zip file.
Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
Grade sync failed: Cause: error in opening zip file Consult IDE for more details
首先执行以下命令,可以Finder中查看隐藏文件。
defaults write com.apple.finder AppleShowAllFiles -boolean true;killall Finder
先检查当前下载的 gradle 版本,打开工程的 gradle.properties 文件,查看 distributionUrl 对应的版本号
gradle_properties.png
打开 /User/<Mac Name>/.gradle/wrapper/dists,找到对应版本的 gradle,删除对应文件夹
在Android 上方选择 File -> Invalidate Caches / Restart.. ,会重新安装 grade
3.5 flutter doctor 对 Android 报错(如有,解决方案如下)
运行 flutter doctor 报错如下
flutter_error_android.png
Android license status unknown.
Try re-installing or updating your Android SDK Manager.
See https://developer.android.com/studio/#downloads or visit
https://flutter.dev/docs/get-started/install/macos#android-setup for
detailed instructions.
解决方案如下,先打开 SDK Manager
sdk_manager_1.jpg
安装 Android SDK Tools (Obsolete) ,按下图步骤操作,最后 Apply
sdk manager tools.jpg flutter_error_android.png
这时候再次运行 flutter doctor,出现以下提醒
flutter_warning_android.png
运行以下指令
flutter doctor --android-licenses
按照提示一路输入 y 回车,如下图安装完成
licenses accepted.png
这时候再次执行 flutter doctor
flutter_success.png