Flutter环境搭建(Linux系统)以及Android项目创建Flutter module

最新推荐文章于 2024-04-05 04:55:22 发布

yzpyzp

最新推荐文章于 2024-04-05 04:55:22 发布

阅读量903

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/yzpbright/article/details/115467768

版权

Android 专栏收录该内容

624 篇文章 17 订阅

订阅专栏

环境搭建

官网：https://flutter.dev/docs/get-started/install

1.下载Flutter sdk

https://flutter.dev/docs/development/tools/sdk/releases?tab=linux
本次下载的是2.0.4版本：https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_2.0.4-stable.tar.xz

Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。

2.下载完成后进行解压

3.配置环境变量

https://flutter.dev/docs/get-started/install/linux#update-your-path
https://flutterchina.club/setup-linux/

环境变量的配置文件是用户目录下的.bashrc或者是.bash_profile，根据具体操作系统而定。

配置环境变量包括两部分：
1.在配置文件中配置flutter/bin的环境变量
2.PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL的环境变量，配置为国内的镜像节点：

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

PUB_HOSTED_URL 是 Dart 依赖包地址
FLUTTER_STORAGE_BASE_URL 是 FLUTTER 依赖文件地址

这个在flutter官网也提到了：Using Flutter in China

如果不配置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL环境变量，则执行flutter相关命令时可能会报错，因为默认会去连接 https://pub.dartlang.org 和 https://storage.googleapis.com

windows系统的安装请参考：
https://flutter.dev/docs/get-started/install/windows
https://flutterchina.club/setup-windows/

如果不配置PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL的环境变量，则执行flutter命令时会去连接 https://pub.dartlang.org, 如下图(这是windows系统下的，linux系统也是一样的)：
在这里插入图片描述

在这里插入图片描述

4.执行`flutter doctor`检测flutter是否还需要安装平台依赖

第一次运行一个flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

flutter doctor
Running "flutter pub get" in flutter_tools...                       9.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on Linux, locale zh_CN.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.52.1)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

报错：Android license status unknown.
解决：执行flutter doctor --android-licenses 进行接受相关协议。

flutter doctor --android-licenses
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:581)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
        ... 5 more

报错： java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema

java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema问题的解决

方案1.下载相关的jar包

可以选的仓库：
https://search.maven.org/

方案2.把java版本切换为java8

java 9 以及以后的版本把很多jar包砍掉了，查看当前系统使用的java版本，是java11，需要安装jdk1.8，然后切换为jdk1.8即可。
参考：https://blog.csdn.net/qq_31667705/article/details/79627940

步骤:
(1).打开终端，输入：

sudo add-apt-repository ppa:openjdk-r/ppa

(2).升级系统资源包并安装openjdk1.8：

sudo apt-get update 
sudo apt-get install openjdk-8-jdk

(3).在多个JDK版本中切换JDK，使用 update-alternatives 命令进行切换：

sudo update-alternatives --config java
sudo update-alternatives --config javac

这里是切换为 java8：

sudo update-alternatives --config java
有 2 个候选项可用于替换 java (提供 /usr/bin/java)。
  选择       路径                                          优先级  状态
------------------------------------------------------------
  0            /usr/lib/jvm/java-11-openjdk-amd64/bin/java      1111      自动模式
  1            /usr/lib/jvm/java-11-openjdk-amd64/bin/java      1111      手动模式
* 2            /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java   1081      手动模式

要维持当前值[*]请按<回车键>，或者键入选择的编号：1081
有 2 个候选项可用于替换 java (提供 /usr/bin/java)。

  选择       路径                                          优先级  状态
------------------------------------------------------------
  0            /usr/lib/jvm/java-11-openjdk-amd64/bin/java      1111      自动模式
  1            /usr/lib/jvm/java-11-openjdk-amd64/bin/java      1111      手动模式
* 2            /usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java   1081      手动模式

sudo update-alternatives --config javac
链接组 javac (提供 /usr/bin/javac)中只有一个候选项：/usr/lib/jvm/java-8-openjdk-amd64/bin/javac
无需配置。

(4).检查JDK版本：

java -version

openjdk version "1.8.0_282"
OpenJDK Runtime Environment (build 1.8.0_282-8u282-b08-0ubuntu1~20.04-b08)
OpenJDK 64-Bit Server VM (build 25.282-b08, mixed mode)

系统当前使用的java版本的确是java8

5.执行flutter doctor --android-licenses

切换成jdk1.8后再执行 flutter doctor --android-licenses 不再报错，然后直接不断按y接受所有协议即可。
执行完成最后会输出：

All SDK package licenses accepted

6.再次执行flutter doctor

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version 10.0.18363.1316], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] IntelliJ IDEA Community Edition (version 2020.3)
[√] Connected device (2 available)

• No issues found!

所有都通过。

如果提示：

[!] Android Studio (not installed)

那么需要给flutter指定android studio的路径：

flutter config --android-studio-dir="android-studio的路径"

7.安装Dart和Flutter插件

Android Studio需要安装Dart和Flutter两个插件。

在plugins里搜索Dart和Flutter，进行安装。
安装完成后重启Android Studio

8.设置Flutter SDK path

file -> setting -> Languages & Frameworks，选择Flutter标签，将右侧的Flutter SDK path设置为本地的flutter安装目录。

9.flutter环境搭建完成

至此，可以开始创建flutter project以及flutter module。

执行 flutter --version 可以查看flutter版本号。

Android项目新建一个flutter module

1.新建一个flutter module

点击 file -> new -> new module，此时可以选择flutter module
在这里插入图片描述

在这里插入图片描述

输入project name，module name后点击finish，发现Android Studio会一直卡在creating flutter module：在这里插入图片描述
网上找了很多解决方案，
https://blog.csdn.net/Ericpengjun/article/details/90107509
https://www.jianshu.com/p/afe422e12b94

都不能解决…

最后采用的方案是杀掉Android Studio进程，然后重启Android Studio，打开Android项目，然后用命令flutter create -t module XXXmodule创建 flutter module 解决的：

~/AndroidStudioProjects/FlutterDemo$ flutter create -t module flutter_module

命令执行完成后，我们可以看到Android项目中多了一个与app这个主module同级的名称为flutter_module的module。

2.在settings.gradle和app/build.gradle中添加配置

(1). 在项目根目录下的setting.gradle文件中添加配置：

// 加入下面配置，flutter_module是新建的flutter module的名称
include ':flutter_module'
setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir,
        'flutter_module/.android/include_flutter.groovy'
))

添加之后的setting.gradle内容：

rootProject.name = "FlutterDemo"
include ':app'

// 加入下面配置，flutter_module是新建的flutter module的名称
include ':flutter_module'
setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir,
        'flutter_module/.android/include_flutter.groovy'
))

这句代码的意思

evaluate(new File(
        settingsDir,
        'flutter_module/.android/include_flutter.groovy'
))

是指settings.gradle所在的目录下的flutter_module/.android/include_flutter.groovy文件，去执行这个grooxy文件。

看下这个include_flutter.groovy文件

def scriptFile = getClass().protectionDomain.codeSource.location.toURI()
def flutterProjectRoot = new File(scriptFile).parentFile.parentFile

gradle.include ":flutter"
gradle.project(":flutter").projectDir = new File(flutterProjectRoot, ".android/Flutter")

def localPropertiesFile = new File(flutterProjectRoot, ".android/local.properties")
def properties = new Properties()

assert localPropertiesFile.exists(), "❗️The Flutter module doesn't have a `$localPropertiesFile` file." +
                                     "\nYou must run `flutter pub get` in `$flutterProjectRoot`."
localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }

def flutterSdkPath = properties.getProperty("flutter.sdk")
assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
gradle.apply from: "$flutterSdkPath/packages/flutter_tools/gradle/module_plugin_loader.gradle"

(2). 然后在app下的build.gradle文件中添加原生项目对flutter的依赖，在dependencies {}闭包中添加:

    implementation project(':flutter')

注意这里是implementation project(':flutter') ，flutter工程是创建Flutter module的过程中自动生成的。

这样就成功地将Flutter引入到了Android原生项目中。

由于这里是使用 flutter create -t module flutter_module 命令创建的flutter module，所以需要手动添加上述配置，如果是使用Android Studio的可视化操作的 new -> new module -> flutter module创建的flutter module，则Android Studio会在对应的配置文件中自动添加相关配置，不需要再手动添加。

implementation project(':flutter')的’:flutter’项目指的是
在这里插入图片描述
flutter_module/.android 下的这个flutter模块?

3.运行app

app可以正常运行

4.Android原生Activity页面启动flutter页面

/**
 * Android项目里创建flutter module，并在Android原生Activity页面中启动flutter页面。
 *
 */
public class MainActivity extends AppCompatActivity {

    private Button jumpBtn;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        jumpBtn = findViewById(R.id.jumpBtn);
        jumpBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                gotoFlutterPage();
            }
        });

        // 通过FlutterView引入Flutter编写的页面
/*        View flutterView = Flutter.createView(this, getLifecycle(), "route1");
        FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
        layout.leftMargin = 100;
        layout.topMargin = 200;
        addContentView(flutterView, layout);

        FlutterView flutterView = new FlutterView(this);*/

    }

    /**
     * 跳转到flutter页面
     *
     * 跳转原理其实也是Activity之间的跳转，也是需要创建一个Activity来承载flutter的视图页面，这个Activity也需要注册到AndroidManifest.xml中；
     * 但是也可以使用flutter sdk里自带的FlutterActivity，这样就不需要手动创建一个新的Activity了，但是FlutterActivity同样也需要注册到AndroidManifest.xml中。
     */
    public void gotoFlutterPage() {
        gotoFlutterPage1();
    }

    /**
     * 跳转方式1：
     * 普通的跳转方式，会有问题：加载flutter页面时会白屏，并且加载比较缓慢
     */
    public void gotoFlutterPage1() {
        Intent intent = FlutterActivity.createDefaultIntent(this);
        startActivity(intent);
    }

    /**
     * 跳转方式2：
     * 引擎跳转方式，
     * FlutterActivity.createDefaultIntent()也就是ithNewEngine()这种方式
     */
    public void gotoFlutterPage2() {
        Intent intent = FlutterActivity.withNewEngine().initialRoute("second").build(this);
        startActivity(intent);
    }

    /**
     * 跳转方式3：
     * 加缓存加引擎跳转方式，
     */
    public void gotoFlutterPage3() {
        Intent intent = FlutterActivity.withCachedEngine("engine_id").build(this);
        startActivity(intent);
    }


}

5.与flutter页面的交互

点击flutter页面的按钮，可以正常交互
在这里插入图片描述

总结：主要遇到的问题

1.Flutter搭建环境时执行flutter doctor --android-licenses时报错： java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema

执行flutter doctor --android-licenses时报错：Exception in thread “main” java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
两种解决方案：
方案(1)：如果要使用java 9以及以上的版本，则需要手动去maven仓库下载很多jar包。
方案(2)：如果要使用java 8则需要去安装java 8，并将系统的java版本切换为java 8，那么就不用下载其他jar包了。

2.新建flutter module时Android Studio会一直卡在creating flutter module

解决方案：
方案(1)：杀掉as进程，重启as后，打开项目，看看flutter module是否正常运行
方案(2)：杀掉as进程，重启as后，打开项目，用命令flutter create -t module XXXmodule创建 flutter module
方案(3)：不杀掉as进程，继续等待，有时候等的久一点，就创建成功了

源码

https://github.com/helloyzp/FlutterDemo

参考：

flutter环境配置遇到的坑
 flutter java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
Ubuntu14.04下安装最新OpenJdk1.8
安装Flutter环境遇到Android license status unknown问题解决，支持Java9,Java10,Java11
Ubuntu19搭建Flutter开发环境：3、为Android Studio安装Flutter和Dart插件

Flutter学习小计：Android原生项目引入Flutter
Flutter(Android 混合开发)
在Android Studio中创建Flutter工程
 android项目引入flutter moudle依赖步骤

解决创建Flutter项目卡住/卡死/无响应等问题
 Android Studio创建flutter应用，卡在Creating Flutter Project的解决办法
 android studio安装和flutter project创建卡住问题解决
 Flutter开发-使用命令创建Flutter App/Module/Plugin/Package

Flutter.createView找不到方法？
android 添加flutter module模式最新解决找不到io.face.flutter 包问题

yzpyzp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module

官网：https://flutter.dev/docs/get-started/install下载Flutter sdk：https://flutter.dev/docs/development/tools/sdk/releases?tab=linux本次下载的是2.0.4版本：https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_2.0.4-stable.tar.xz下载完成后进行解压。配置
复制链接

扫一扫