Flutter 学习 - 在原生Android项目中添加Flutter项目

前言

前面的文章介绍了纯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包

更多关于技术相关的内容请关注博主公众号–迷途程序猿