将Flutter以Module形式嵌入已有项目

官方文档-> 点击

本文只针对Android客户端集成操做，如下是亲自试手，按照官方文档有些小改动。

已有项目相关环境：

1. minSdkVersion 16
2. gradle 插件v3.1.1
3. gradle 版本 v4.10.1
4. flutter SDK版本 v1.5.4-hotfix.2

集成步骤（Mac os）

1. 打开terminal,进入到你项目的根目录

cd some/yourproject
复制代码

2. 而后输入如下命令建立flutter module

//my_flutter为你的module名字
flutter create -t module my_flutter
复制代码

3. 切换到flutter module的android目录下，并让flutter进行debug

cd .android/

./gradlew flutter:assembleDebug
复制代码

这样就生成了flutter-debug.aar(路径：'.android/Flutter/build/outputs/aar/.')。 4. 确认你的宿主App的build.gradle配置有：

compileOptions {
     sourceCompatibility 1.8
     targetCompatibility 1.8
 }
复制代码

5. 让宿主App以来flutter module，打开根项目settings.gradle

include ':app'

setBinding(new Binding([gradle:this]))
//YourProjecyName 为你项目的文件名，按照官方文档的写法，会找不到对应的路径，少了一个层级
evaluate(new File(
        settingsDir.parentFile,
        'YourProjecyName/my_flutter/.android/include_flutter.groovy'
))
复制代码

6. 项目同步成功后须要在app的build.gradle文件中添加flutter的依赖。

//官网的方式
dependencies{
    implementation project(':flutter')
}
//上面的方式各类报错，没法找到对应的module

//换了种方式

dependencies{
  implementation project(path: ':flutter')
}

复制代码

终于整个项目跑通了，去app内的文件内，也能引入flutter相关的Api。大功告成。

Flutter加入到项目中

有两种方式能够将flutter的视图添加到原生项目中：

如下是flutter入口函数main.dart

import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:bear_flutter/ui/WolfPage.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route){
  switch(route){
    case 'route1':
      return WolfPage();
    default:
      return Center(
        child: Text("haha"),
      );
  }
}

复制代码

1. 添加Flutter fragment

在原生Activity添加FlutterFragment

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_wolf_flutter)
        //route1 为flutter项目中的叶脉你路由名字
        supportFragmentManager.beginTransaction().replace(R.id.container, Flutter.createFragment("route1"))
                .commit()
    }
复制代码

2. 添加flutterView

//route1 为flutter项目中的叶脉你路由名字
View flutterView = Flutter.createView(
      MainActivity.this,
      getLifecycle(),
      "route1"
    );
    FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
    layout.leftMargin = 100;
    layout.topMargin = 200;
    addContentView(flutterView, layout);
复制代码