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

环境搭建

官网: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系统也是一样的):
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第1张图片

Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第2张图片

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
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第3张图片

Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第4张图片
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第5张图片
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第6张图片

输入project name,module name后点击finish,发现Android Studio会一直卡在creating flutter module:Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第7张图片
网上找了很多解决方案,
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环境搭建(Linux系统)以及Android项目创建Flutter module_第8张图片
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页面的按钮,可以正常交互
Flutter环境搭建(Linux系统)以及Android项目创建Flutter module_第9张图片

总结: 主要遇到的问题

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 包问题

你可能感兴趣的:(Android)