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

最新推荐文章于 2024-08-12 08:15:00 发布

2301_82241859

最新推荐文章于 2024-08-12 08:15:00 发布

阅读量926

点赞数 17

分类专栏：程序员文章标签： flutter android

本文链接：https://blog.csdn.net/2301_82241859/article/details/138585057

版权

程序员专栏收录该内容

483 篇文章 3 订阅

订阅专栏

虽说flutter能够跨平台，但由于现在几乎都是现成的项目，所以不可能用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模块，如下图。

2. 其次，在能够正确显示flutter模块后，我们就需要通过implementation project(':flutter')来导入该模块。添加成功后就开始编译项目，这时候就可能会遇到如下错误。

这就是我们需要注意的一点，native项目的minSdkVersion不能小于Flutter模块的minSdkVersion。解决方案就是把native项目的minSdkVersion的值修改为大于flutter模块的minSdkVersion的值。

经过上面两步后，native项目就成功导入了flutter模块，这时候就可以来运行native项目。但在运行native项目时却又可能出现如下错误。

该问题该怎么解决尼？其实在上图的最下面已经给出解决方案了，就是native项目必须使用Java 8，否则不让运行。所以我们需要在app目录下的build.gradle文件中添加如下代码。

android {
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
}

然后继续运行native项目，这时候就能够在设备上跑起来了，但如何验证flutter模块是否打包进apk里尼？这时候就可以借助Android Studio的apk分析工具。通过该工具可以发现apk包由以下内容组成。

其中flutter_assets存放的就是flutter代码，到这里native项目就成功的导入了flutter模块。

注意：如在果项目中使用AndroidX，就会导致很严重的兼容性问题。所以如果项目中使用了AndroidX，则要慎重导入flutter模块。如果一定要导入，则可以去阅读flutter官方提供的解决方案——AndroidX compatibility。

2、native项目加载flutter页面

经过前面的一些操作，我们就在Native项目中成功依赖了flutter模块，那么下面学习如何在Native项目中加载flutter页面。通过查看flutter模块代码可以发现，该模块提供了以下两种方式来加载flutter页面。

将flutter页面构建成View，通过addView来显示flutter页面
将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 {
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: [
Text(
‘initParams:$initParams’,
style: TextStyle(color: Colors.red),
),
Text(