官方提供的集成步骤详见：
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
目前混合开发的集成方案还是preview版本，所以实际使用过程中，容易碰到各种问题，还不够稳定。
本文配置基于：
1.7.8-hotfix-4
官方文档只能用于master分支，所以会有一些细节差异。
创建Flutter工程
假设当前目录结构如下，ios和android工程在同一目录下：
some/path/
- android_project/
- ios_project/
进入some/path/目录，创建Flutter module：
flutter create -t module --org com.example my_flutter
执行完后，目录结构如下：
some/path/
- android_project/
- ios_project/
- my_flutter
my_flutter会生成隐藏的.android和.ios文件夹，注意尽量不要在这两个隐藏文件夹里面添加自己的代码，在pubspec.yaml更新时，这两个文件夹会被重新覆盖，导致后来添加的文件丢失。
配置Android工程
修改原生工程android_project下的app module中的build.gradle，在android{}配置中添加一下内容
android {
//...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
}
依赖Flutter Module工程的方式有两种：依赖aar与直接依赖源码
依赖aar
$ cd some/path/my_flutter
$ flutter build aar
注意：build aar命令到1.7.8-hotfix-4还不支持，master分支已经更新。
在flutter module工程，使用flutter build命令构建出一个aar，然后android_project就去配置依赖这个aar，这样做的优点是android_project项目编译的时候不需要去依赖Flutter SDK，
直接引用aar即可，缺点是开发的时候，没法一键运行。
依赖源码
依赖源码，可以一键运行，不过android_project项目编译的时候需要去依赖Flutter SDK。
android_project项目在setting.gradle添加以下代码
include ':app' // assumed existing content
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'my_flutter/.android/include_flutter.groovy' // new
))
目录结构如下：
Flutter工程以及在pubspec.yaml引用的library，就能作为一个project被引入，最后在build.gradle添加依赖Flutter工程：
dependencies {
implementation project(':flutter')
}
调起Flutter界面
Android端
1、使用FlutterView
// MyApp/app/src/main/java/some/package/MainActivity.java
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);
2、使用FlutterFragment
// MyApp/app/src/main/java/some/package/MainActivity.java
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
tx.replace(R.id.someContainer, Flutter.createFragment("route1"));
tx.commit();
3、使用FlutterActivity
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}
FlutterActivity可以通过intent指定routeName
intent.putExtra("route", "initRoute");
Flutter端
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(_widgetForRoute(window.defaultRouteName));
Widget _widgetForRoute(String route) {
switch (route) {
case 'route1':
return SomeWidget(...);
case 'route2':
return SomeOtherWidget(...);
default:
return Center(
child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
);
}
}
创建FlutterView或者FlutterFragment时，传入了一个initialRoute，也就是window.defaultRouteName的值，这样我们就能够根据routeName来决定跳转到哪个Flutter页面。
配置ios工程
集成Flutter module工程到flutter_host_ios工程需要Cocoapods依赖项管理器，请确保本地安装了cocoapods，如果未安装，可以参考:cocoapods.org/
1、如果ios_project工程中已经使用了cocoapods，将下列配置添加到工程的Podfile文件中:
flutter_application_path = 'path/to/my_flutter/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
2、找到项目TARGETS的Build Phases，点击左上角+号选择New Run Script Phase添加Run Script，在Shell字段下添加下面两行脚本
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
这段跟官方文档有差异，如果是master分支，参考官方文档。
2、执行pod install
每次pubspec.yaml依赖有更新时，都需要重新执行pod install
3、因为Flutter现在不支持bitcode，需要禁用项目TARGETS的Build Settings-> Build Options-> Enable Bitcode部分中的ENABLE_BITCODE标志。
调起Flutter界面
在ios_project中，将AppDelegate改为继承FlutterAppDelegate。
AppDelegate.h
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>AppDelegate.m
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
AppDelegate.m
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins
#include "AppDelegate.h"
@implementation AppDelegate
// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
ViewController.m
#import <Flutter/Flutter.h>
#import "AppDelegate.h"
#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self
action:@selector(handleButtonAction)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Press me" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)handleButtonAction {
FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:false completion:nil];
}
@end
与Android一样，FlutterViewController也可以设置routeName
[flutterViewController setInitialRoute:@"route1"];
但是，这个api目前基本是无法派上用场，上述例子共用了FlutterEngine，在runWithEntrypoint执行之后，main.dart中runApp代码已经执行，后面再去setInitialRoute已经没有效果，FlutterViewController使用initWithNibName等其他方式初始化，不共用FlutterEngine，main.dart还没执行，这种方式setInitialRoute能够起作用，不过跳转到Flutter页面时，会展示launch页面，体验不好。
热重载
在宿主app进程运行以后，进入my_flutter,执行：
$ cd some/path/my_flutter
$ flutter attach
Waiting for a connection from Flutter on Nexus 5X...
attach成功之后，就可以随时修改flutter代码，进行热重载更新。
