Flutter调研（2）-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