不得不看的Flutter与Android混合开发

虽然flutter能够跨渠道,但由于现在几乎都是现成的项目,所以现在几乎都是采用native+flutter的混合开发计划。那么该计划该怎样完成尼?

1、flutter模块的导入

首要,切换到native项目的根目录的上一级目录。以笔者项目为例,路径为D:\FlutterHybrid\FlutterHybridAndroid,然后经过命令cd ../切换到上一级目录。再履行下面命令来创立一个flutter模块。

    flutter create -t module flutter_module

上面的flutter_module便是咱们创立的flutter模块称号。

当flutter模块创立成功后,咱们就需求经过以下过程来导入该模块。

1. 首要在在settings.gradle文件中增加如下代码。

```
    setBinding(new Binding([gradle:this]))
    evaluate(new File(
            settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy'
    ))
```

增加完成后,就能够在Android Studio中看到flutter模块,如下图。

不得不看的Flutter与Android混合开发

2. 其次,在能够正确显现flutter模块后,咱们就需求经过implementation project(':flutter')来导入该模块。增加成功后就开始编译项目,这时候就或许会遇到如下过错。

不得不看的Flutter与Android混合开发

这便是咱们需求留意的一点,native项目的minSdkVersion不能小于Flutter模块的minSdkVersion。解决计划便是把native项目的minSdkVersion的值修改为大于flutter模块的minSdkVersion的值

经过上面两步后,native项目就成功导入了flutter模块,这时候就能够来运转native项目。但在运转native项目时却又或许出现如下过错。

不得不看的Flutter与Android混合开发

该问题该怎样解决尼?其实在上图的最下面已经给出解决计划了,便是native项目有必要使用Java 8,不然不让运转。所以咱们需求在app目录下的build.gradle文件中增加如下代码。

    android {
        compileOptions {
            sourceCompatibility 1.8
            targetCompatibility 1.8
        }
    }

然后持续运转native项目,这时候就能够在设备上跑起来了,但怎样验证flutter模块是否打包进apk里尼?这时候就能够凭借Android Studio的apk分析东西。经过该东西能够发现apk包由以下内容组成。

不得不看的Flutter与Android混合开发

其间flutter_assets寄存的便是flutter代码,到这儿native项目就成功的导入了flutter模块。

留意:如在果项目中使用AndroidX,就会导致很严重的兼容性问题。所以如果项目中使用了AndroidX,则要稳重导入flutter模块。如果一定要导入,则能够去阅览flutter官方供给的解决计划——AndroidX compatibility。

2、native项目加载flutter页面

经过前面的一些操作,咱们就在Native项目中成功依赖了flutter模块,那么下面学习怎样在Native项目中加载flutter页面。经过检查flutter模块代码能够发现,该模块供给了以下两种办法来加载flutter页面。

  1. 将flutter页面构建成View,经过addView来显现flutter页面
  2. 将flutter页面构建成Fragment,经过对fragment的操作来显现flutter页面

2.1、将flutter页面构建成View

在flutter模块的Flutter类中给咱们供给了一个办法——createView。经过该办法,咱们能够将flutter页面构建成一个View。而View的相关操作想必对于Android开发者来说都不生疏,所以就经过addView将flutter页面增加到相应的当地。完成代码如下:

    public void onLoadFlutter(View view) {
        View flutterView = Flutter.createView(this, getLifecycle(), "route1");
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 600);
        layoutParams.topMargin = 100;
        addContentView(flutterView, layoutParams);
    }

2.2、将flutter页面构建成fragment

同样,flutter模块也供给了办法——createFragment,经过该办法就将flutter页面构建成一个fragment,然后依据fragment的操作将flutter页面增加到相应的当地。完成代码如下:

    public void onLoadFlutter(View view) {
       FragmentTransaction transaction= getSupportFragmentManager().beginTransaction();
       transaction.replace(R.id.someContainer,Flutter.createFragment("这儿是flutter页面"));
       transaction.commit();
    }

2.3、flutter页面

在前面叙述了怎样在native项目中加载flutter页面,下面就来看一下flutter页面的代码。代码还使很简单的,基本的都是创立module时主动生成的代码。

import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(MyApp(
      initParams: window.defaultRouteName,
    ));
class MyApp extends StatelessWidget {
  final String initParams;
  MyApp({Key key, @required this.initParams}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
        initParams: initParams,
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  final String initParams;
  MyHomePage({Key key, this.title, this.initParams}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState(initParams);
}
class _MyHomePageState extends State<MyHomePage> {
  final String initParams;
  _MyHomePageState(this.initParams);
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'initParams:$initParams',
              style: TextStyle(color: Colors.red),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

能够发现,在上面代码中,咱们传入了一个初始化特点,它其实便是一个路由称号,但其实咱们也传入一个json或许其他类型的数据,从而来做一些其他操作。其实这样就能够看做native与flutter之间的一种通讯。

3、flutter模块的调试

3.1、flutter模块的热重载

flutter的优势之一便是在开发过程中能够经过热重载功用来完成快速的调试,但经过运转上面代码就会发现,flutter模块代码修改后无法当即收效,需求重新打包Native才能收效。这样就让flutter的一个重大优势失效了,降低了调试功率。那么咱们能不能在混合项目中做到flutter模块的热重载尼?其实也是能够的,但需求经过一些过程。

1. 首要,关闭当时使用,留意:是要杀死当时使用所在进程,而不是退出使用

2. 其次,在flutter模块中输入命令flutter attach,就会显现以下内容。

不得不看的Flutter与Android混合开发

3. 最终,再次打开使用,就会出现如下内容。

不得不看的Flutter与Android混合开发

请留意图中的这段话

? To hot reload changes while running, press “r”. To hot restart (and rebuild state), press “R”.

它告知咱们如果要热重载就按r键,想要热重启就按R键。当修改flutter代码后,按下r键,就会出现以下提示,代表修改成功。

不得不看的Flutter与Android混合开发

经过上面的一些过程,咱们就能够在混合项目中使用flutter的热重载功用,做到flutter修改后的当即收效。

3.2、flutter模块的调试

其实混合项目的flutter模块调试与flutter项目的的唯一却别便是怎样在Android Studio与设备之间树立socket衔接。在flutter项目中,咱们能够直接点击debug按钮来进行调试,但在混合项目中,该按钮就不起作用了,得经过其他办法来树立衔接。Android Studio给咱们供给了flutter attach按钮,经过该按钮,flutter模块就能跟设备树立衔接,就能对flutter模块进行调试。

不得不看的Flutter与Android混合开发

4、总结

经过上面的一些解说,信任就能够使用native+flutter的混合开发了。但仔细一点就会发现,在前面的解说中,flutter模块并没有与native项目进行通讯,那么该怎样通讯尼?在笔者的下一篇文章会进行具体解说。

最终

如果你看到了这儿,觉得文章写得不错就给个赞呗?

更多Android进阶指南 能够具体Vx重视大众号:Android老皮 解锁 《Android十大板块文档》

1.Android车载使用开发系统学习指南(附项目实战)

2.Android Framework学习指南,助力成为系统级开发高手

3.2023最新Android中高档面试题汇总+解析,离别零offer

4.企业级Android音视频开发学习道路+项目实战(附源码)

5.Android Jetpack从入门到通晓,构建高质量UI界面

6.Flutter技能解析与实战,跨渠道首要之选

7.Kotlin从入门到实战,全方面提升架构根底

8.高档Android插件化与组件化(含实战教程和源码)

9.Android 性能优化实战+360全方面性能调优

10.Android零根底入门到通晓,高手进阶之路

敲代码不易,重视一下吧。ღ( ・ᴗ・` )