初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
使用镜像
由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
不过建议手动添加环境变量到用户变量中
可先运行命令 然后查看 环境变量 中有没有PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL两个字段 如果没有则手动添加进去
获取Flutter SDK
- 去flutter官网下载其最新可用的安装包,点击下载;
注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包 。
-
将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。
-
在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
注意: 由于一些flutter命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。
更新环境变量
要在终端运行 flutter 命令, 你需要添加以下环境变量到系统PATH:
- 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
- 在“用户变量”下检查是否有名为“Path”的条目:
1. 如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
2. 如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
- 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。
重启Windows以应用此更改
对flutter出现的问题进行修正
加载AndroidSDK 配置AndroidSDK环境变量(配置完变量注意重启电脑生效)
安装Flutter和Dart插件
需要安装两个插件:
- Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
- Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).
使用IntelliJIDEA时记得**插件
即引入SDK
大坑!!!!
Java版本不匹配会出现下面的错误
✗ Android license status unknown
PS C:\WINDOWS\system32> D:\AndroidSDK\tools\bin\sdkmanager --update
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:583)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
... 5 more
网上找到的解决方法
export SDKMANAGER_OPTS="--add-modules java.se.ee"
实验失败
找到了另外一个解决方法
编辑你的sdkmanager脚本文件,替换第31行为如下的内容
# 原内容:
# DEFAULT_JVM_OPTS='"-Dcom.android.sdklib.toolsdir=$APP_HOME"'
# 替换内容:
DEFAULT_JVM_OPTS='"-Dcom.android.sdklib.toolsdir=$APP_HOME" -XX:+IgnoreUnrecognizedVMOptions --add-modules java.se.ee'
然后再次运行一下sdkmanager --update ,等待更新完成之后, 再次运行flutter doctor --android-licenses , 输入 y接受协议即可.
依旧不行 因为我的java版本太高 11以上这个方法不适用
所以我准备降级到java8
终于一切准备就绪
flutter doctor无错误
用官方的案例测试一下
flutter run
然后又又又又出错
D:\AndroidTest\flutter_first_test>flutter run
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle... 1.2s
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "D:\AndroidTest\flutter_first_test\android\gradlew.bat" exited abnormally:
Starting a Gradle Daemon (subsequent builds will be faster)
> Configure project :app
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
FAILURE: Build failed with an exception.
* Where:
Script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 23
* What went wrong:
Could not compile script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle'.
> startup failed:
script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle': 23: unexpected char: 0xA0 @ line 23, column 1.
? ? ? ? maven { url 'https://maven.aliyun.com/repository/jcenter' }
^
1 error
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 20s
Command: D:\AndroidTest\flutter_first_test\android\gradlew.bat app:properties
Please review your Gradle project setup in the android/ folder.
D:\AndroidTest\flutter_first_test>flutter run
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle... 1.7s
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "D:\AndroidTest\flutter_first_test\android\gradlew.bat" exited abnormally:
> Configure project :app
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
FAILURE: Build failed with an exception.
* Where:
Script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 24
* What went wrong:
Could not compile script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle'.
> startup failed:
script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle': 24: unexpected char: 0xA0 @ line 24, column 1.
? ? ? ? maven { url 'https://maven.aliyun.com/repository/jcenter' }
^
1 error
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 1m 1s
Command: D:\AndroidTest\flutter_first_test\android\gradlew.bat app:properties
Please review your Gradle project setup in the android/ folder.
然后查了一下 是镜像的问题 因为没有科学上网
所以需要改一下镜像
解决方法:
第一步:修改build.gradle,注释掉jcenter(),google()。使用阿里的镜像。原因是jcenter google库无法访问到导致的问题。虽然我有万能的爬墙工具,开启全局代理依然被我们伟大的发改委墙掉了!
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.2.1'
}
}
allprojects {
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' }
}
}
第二步:修改flutter.gradle 文件路径为:flutter>packages>flutter_tools>gradle>flutter.gradle
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.2.1'
}
}
如果使用模拟器运行,会出现白屏,报错Failed to setup Skia Gr context,字面翻译就是影像不能显示,需要运行时加上配置参数flutter run --enable-software-rendering,Android studio选中run->Edit Configurations(我没有出现这种情况 但是以防以后出现 先将解决方案写在这)
终于运行成功!