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

1,029 阅读1分钟

官方文档-> 点击

本文只针对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
  1. 然后输入以下命令创建flutter module
//my_flutter为你的module名字
flutter create -t module my_flutter
  1. 切换到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
 }
  1. 让宿主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'
))
  1. 项目同步成功后需要在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()
    }
  1. 添加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);