前言
前面的文章介绍了纯Flutter项目的打包方式，但是对于很多人来说可能已经存在了一套Android框架的项目，所以如何在现有原生Android项目中添加Flutter成了大部分人的需求，下面我们就来看下如何在现有的Android项目中添加Flutter项目。
正文
1、创建Flutter项目
在集成之前，首先我们要有自己的原生Android项目，如下图
图中画出了Android项目的完整路径，下面就要划重点了，很多人在这上面遇到了坑
我们创建Flutter项目要在上图中的Flutter文件夹下，注意，注意，注意，一定不能在nativewithflutter文件下，这里是深坑，千万不要掉进去，我们cd到Flutter文件夹下执行
flutter create -t module xxxx
PS: xxxx就是你想要创建的flutter项目名称
创建完成之后一个和我们Android原生项目平级的Flutter项目就创建完成了，如下图
2、添加Flutter到当前Android项目
- 在Android项目根目录下的settings.gradle文件中，添加如下代码
setBinding(new Binding(gradle:this))
evaluate(
new File(
settingsDir.parentFile,
"native_flutter/.android/include_flutter.groovy"
)
)
如下
上面的native_flutter要改成你自己刚刚创建的flutter项目的module名称
- 在Android项目的app目录下，build.gradle文件中，在android{}节点下添加如下信息
android {
...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
...
}
- 在Android 项目的app目录下，build.gradle文件中，在dependencies下添加依赖
dependencies {
...
implementation project(':flutter')
}
添加完成之后，在原生Android项目中添加Flutter的准备工作就完成了，下面来填下在集成过程中遇到的坑
1、androidx.的冲突
如果你的Android项目中使用的是com.android.support库，在创建flutter moudle的时候，使用的是androidx.库，这个时候就要解决库的迁移问题，我的解决方案是把新生成的androidx.的库，换成了com.android.support.的库，具体的迁移版本可以参考这篇文章
接下来，我们看下如何在项目中使用flutter项目，其实对Android来说，我们加入对Flutter的Widget其实就是一个View，所以在android中用Flutter就是用一个view去承载Flutter项目，所以我们首先要在我们的Android项目中创建一个FlutterView.
FlutterView flutterView = Flutter.createView(this,getLifecycle(),"flutter_view");//这个initialRoute是传入到Flutter项目中的，用来区分标识不同的界面
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView,layoutParams);
完整的代码如下
在Flutter项目中添加
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route){
switch (route) {
case "flutter_view":
return NativeFlutter();//自己定义的展示的界面
break;
default:
return MyApp();
}
}
window.defaultRouteName 会接受到主项目中传入的路由路径，然后返回对应的Widget，之后这个view就完全可以做一套整个Flutter app去处理了
完整的NativeFlutter Widget是这样的
import 'package:flutter/material.dart';
class NativeFlutter extends StatefulWidget {
NativeFlutter();
@override
_NativeFlutterState createState() => _NativeFlutterState();
}
class _NativeFlutterState extends State<NativeFlutter> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Text(
"这是Flutter项目中的视图",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.black
),
),
);
}
}
下面看下运行效果
结尾
截止到现在，在原生项目中添加Flutter项目就介绍完了
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。
Flutter 系列文章
- Flutter 学习 - 开篇
- Flutter 学习 - 基础框架
- Flutter 学习 - 网络请求和数据解析
- Flutter 学习 - Widget 之 Text
- Flutter 学习 - Widget 之 RichText
- Flutter 学习 - Widget 之 Image和Icon
- Flutter 学习 - Widget 之 TextField
- Flutter 学习 - Widget 之 菜单按钮
- Flutter 学习 - Widget 之 布局 Widget
- Flutter 学习 - 容器类Widget
- Flutter 学习 - 可滚动的 Widget
- Flutter 学习 - 功能类Widget
- Flutter 学习之打包 - 纯Flutter项目生成Android包
