Flutter调研(1)-Flutter从安装到运行成功的一些坑
工作需要,因客户端有部分页面要使用flutter编写,需要QA了解一下flutter相关知识,因此,做了flutter调研,包含安装,基础知识与demo编写,第一部分是安装与环境配置。
——
在mac上实现flutter的从安装到运行,以下基于Android Studio,xcode相关设置后续补充
1、首先,国内访问flutter有时会有限制,以防万一,使用镜像
将以下环境变量添加到用户环境变量里
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2、官网下载flutter安装包
https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos
选择稳定版Stable channel,下载后解压到你想安装的目录里,如:
cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
临时添加到flutter到path中
export PATH=`pwd`/flutter/bin:$PATH
3、终端执行 flutter doctor
(提示command not fount 的话:1不在flutter文件夹所在目录下2未设置PATH环境变量)
根据指示查看当前是否有缺失
安卓需要安装androif Studio,IOS需要安装xcode
如果提示Android licenses 不被信任或者unkown,按照提示执行
flutter doctor –android-licenses ;然后对提示回复y
(如果licenses提示有问题的话,这一步必须要通过必须要执行,否则会导致后面程序无法执行)
4、IDE添加插件
Preferences-plugins添加Flutter和Dart插件
5、如果没有安装gradle需要安装gradle
安装连接 http://www.androiddevtools.cn/
在Android开发工具中,可以下载gradle。然后在电脑Application目录中,找到Android Studio.app右键查看包文件,找到Content/gradle目录将刚刚下载解压后的gradle文件copy到该目录中。
之后在终端输入 vi ~/.zshrc,打开后输入:
GRADLE_HOME=/Applications/Android\ Studio.app/Contents/gradle/gradle-4.1;
export GRADLE_HOME
export PATH=PATH: :GRADLE_HOME/bin
注意:配置中Android Studio.app中要加一个 \ 转义,不然也会报错
保存退出后输入:source ~/.zshrc 使配置生效
然后在终端输入 gradle -version检查是否安装成功
6、创建Flutter应用
选择 File>New Flutter Project 。
选择 Flutter application 作为 project 类型, 然后点击 Next。
输入项目名称 (如 myapp),然后点击 Next。
点击 Finish。
等待Android Studio安装SDK并创建项目。
mac连接手机成功后,点击debug,正常来说就能看到启动的应用程序了
7、FAQ
然而实际上并不一定能正常。。。
1)如果运行失败提示,
Finished with error: Please review your Gradle project setup in the android/ folder.
可能性1,翻墙
第一步:修改掉项目下的android目录下的build.gradle文件,把google() 和 jcenter()这两行去掉。改为阿里的链接。
buildscript { repositories { //google() //jcenter() 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:3.1.2' } } |
第二步:修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化
flutter.gradle文件中repositories中是google() 和 jcenter(),
repositories{
google()
gcenter()
}
把google() 和 jcenter()这两行注释掉,改为阿里的链接。
buildscript { repositories { //jcenter() //maven { // url 'https://dl.google.com/dl/android/maven2' //} 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:3.1.2' } } |
可能性2:如果更改后还是提示这个错误,检查下是否下载并成功安装gradle,没有的话重新安装下
2)执行时,如果一直卡在Flutter Resolving dependencies…
项目下的android目录下的build.gradle文件以及Flutter SDK包下的flutter.gradle文件
classpath ‘com.android.tools.build:gradle:3.0.1’
最后的版本号和gradle的版本号要一致否则无法运行,大概在这个位置
C:\Program Files\Android\Android Studio\gradle\m2repository\com\android\tools\build\gradle
3)
Minimum supported Gradle version is 5.1.1. Current version is 4.10.2. If using the gradle wrapper, try editing the distributionUrl in /Users/wenfangzhu/AndroidStudioProjects/flutter_app/android/gradle/wrapper/gradle-wrapper.properties to gradle-5.1.1-all.zip
这个提示是所指示的位置的配置不对,应该改成5.1.1