初次接触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_URLFLUTTER_STORAGE_BASE_URL两个字段 如果没有则手动添加进去


获取Flutter SDK

  1. 去flutter官网下载其最新可用的安装包,点击下载
注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包 。
  1. 将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。

  2. 在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”的条目,如果没有,也添加它们。


    初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
    初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
          重启Windows以应用此更改

对flutter出现的问题进行修正
初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
加载AndroidSDK 配置AndroidSDK环境变量(配置完变量注意重启电脑生效)

安装Flutter和Dart插件

需要安装两个插件:

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).

使用IntelliJIDEA时记得**插件
即引入SDK

大坑!!!!

Java版本不匹配会出现下面的错误

初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
✗ 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 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑

终于一切准备就绪


flutter doctor无错误
初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
用官方的案例测试一下

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(我没有出现这种情况 但是以防以后出现 先将解决方案写在这)
初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑
终于运行成功!
初次接触flutter 从安装flutter到配置环境再到第一次运行案例的过程及踩的各种坑