Flutter的环境配置以及一些常见问题

Posted 2021-02-18 lzyckd1

flutter & androidStudio

flutter的下载与配置

flutter是Google推出的基于Dart语言开发的跨平台开源UI框架，能够支持安卓与ios。

flutter框架的下载地址为：

• Windows
• macOS
• Linux

若在上述网址中无法顺利下载，也可以去flutter的github下载，注意，github上flutter包含不稳定的测试版，目前flutter-1.17.0-stable为最近的稳定版。

在下载后，将zip压缩文件解压至你希望的flutter安装路径即可，在这里，笔者的解压路径为D:flutter。

在解压后，需要配置一些环境变量，在用户变量中新增：

FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
PUB_HOSTED_URL https://pub.flutter-io.cn

在系统环境变量加入你的flutter的bin目录路径。

这是因为调用该框架时可能需要进行下载，这两个网址是flutter的国内镜像，镜像网址可能会更新，具体请参考这里。

在完成上述步骤后，找到flutter路径下的flutter_console.bat，运行并键入命令：

flutter doctor

第一次使用可能会耗时较长。此时可能会部分报错，请先忽略并进入接下来Android相关配置。

AndroidStudio的下载与配置

点击这里根据所需版本进行下载，按照指引进行安装即可。

完成后再使用flutter doctor命令(在cmd即可)。

若所有配置完全正确，则该命令显示应该如下：

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.0, on Microsoft Windows [Version 10.0.17763.1217], locale zh-CN)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[√] IntelliJ IDEA Ultimate Edition (version 2019.3)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

第五个为!是因为还没有连接安卓设备或者安卓虚拟机。

若：

• 第一项报错，建议重新下载flutter。

• 第二项报错，请键入下面命令：

  flutter doctor --android-licenses
  

  若有提问y/n，全选y即可。若失败后，

  提示类似于：

  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
  

  检查你的电脑是否配置好了JDK，若没有，百度Java环境配置，若有，请查看你的JDK版本，flutter支持JDK8，对于更高的版本，会因为部分文件的确实而报错，有两种解决办法：

  • 降低JDK版本

  • 下载相关依赖文件，可以在这里下载，将此压缩包中的文件解压，将里面的文件复制至android的sdk oolsjaxb路径中并去除版本号，若没有则新建。

    再在android的sdk oolsin路径下找到sdkmanager.bat，在约66行处找到一行set ...，修改为

    set CLASSPATH=%APP_HOME%jaxbactivation.jar;%APP_HOME%jaxbjaxb-impl.jar;%APP_HOME%jaxbjaxb-xjc.jar;%APP_HOME%jaxbjaxb-core.jar;%APP_HOME%jaxbjaxb-jxc.jar;%APP_HOME%jaxbjaxb-api.jar;%APP_HOME%jaxbistack-commons-runtime.jar;%APP_HOME%libdvlib-26.0.0-dev.jar;%APP_HOME%libjimfs-1.1.jar;%APP_HOME%libjsr305-1.3.9.jar;%APP_HOME%lib
    epository-26.0.0-dev.jar;%APP_HOME%libj2objc-annotations-1.1.jar;%APP_HOME%liblayoutlib-api-26.0.0-dev.jar;%APP_HOME%libgson-2.3.jar;%APP_HOME%libhttpcore-4.2.5.jar;%APP_HOME%libcommons-logging-1.1.1.jar;%APP_HOME%libcommons-compress-1.12.jar;%APP_HOME%libannotations-26.0.0-dev.jar;%APP_HOME%liberror_prone_annotations-2.0.18.jar;%APP_HOME%libanimal-sniffer-annotations-1.14.jar;%APP_HOME%libhttpclient-4.2.6.jar;%APP_HOME%libcommons-codec-1.6.jar;%APP_HOME%libcommon-26.0.0-dev.jar;%APP_HOME%libkxml2-2.3.0.jar;%APP_HOME%libhttpmime-4.1.jar;%APP_HOME%libannotations-12.0.jar;%APP_HOME%libsdklib-26.0.0-dev.jar;%APP_HOME%libguava-22.0.jar
    
    

    修改后运行这个bat文件，在powershell中：

    sdkmanager.bat --update
    

    应该就会正常。

    之后再在cmd中flutter doctor --android-licenses，全选y即可。

• 第三项报错，是AndroidStudio的版本问题。

• 第四项报错，是IDEA的版本问题。IDEA可在下载一些插件后进行flutter编程。

之后，启动AndroidStudio，第一次启动时时是没有项目的，找到configure-plugins，搜索dart和flutter，下载这两个插件。重启，应该就会有项目是flutter类型的新建选项。

选择flutter类型新建项目，填入你的flutter的路径，在新建时有数种flutter项目类型，选择第一种即可，生成新项目。此时左侧可以看见项目文件结构，在main.dart中将代码替换为：

import ‘package:flutter/material.dart‘;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: ‘Welcome to Flutter‘,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(‘Welcome to Flutter‘),
        ),
        body: new Center(
          child: new Text(‘Hello World‘),
        ),
      ),
    );
  }
}

这是我们flutter的hello world。

这是是无法运行的，因为没有相应的安卓设备或虚拟机，请在tool中找到AVD Manager，选择一个虚拟机下载并启用，即可运行代码，相应的，你的Android虚拟机上可以看见一行hello world。

在这里，可能会遇到bug，请在cmd中打开/项目名/android路径利用gradlew进行debug，这类命令可以得到详细信息。另外一个奇怪的点是在AndroidStudio中直接运行代码可能会出现奇怪的问题，但是在cmd中使用gradlew build则可能能够正确运行。