集成Flutter到现有项目

集成Fluter到现有iOS & Android项目

---

• 官方详细文档地址：https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

Flutter集成到现有项目功能依旧处于preview状态(2019.01.06)
操作环境：MAC/Linux

共四步：

第一步

如果要集成到现有项目，需要切换Flutter SDK的channel到master，在终端执行：flutter channel master

第二步

创建Flutter项目模版，在终端执行：flutter create -t module flutter_module，
创建完成后，终端执行：

$ cd flutter_module
$ pwd
/some/path/to/flutter_module

/some/path/to/flutter_module路径就是Flutter项目的绝对路径。

此时项目主要目录应该如下：

+ flutter_dir
	+ flutter_module		#Flutter项目
		+ .android/
		+ .ios
		+ lib
			- main.dart		#flutter项目入口代码
	+ HostAndroidProject	#待集成Flutter的Android项目
		- settings.gradle
		- build.gradle
		+ app
	+ HostIOSProject		#待集成Flutter的iOS项目
		+  HostIOSProject
		+ HostIOSProjectTests
		+ HostIOSProjectUITests

第三步

开始集成到项目。

集成到Android项目

---

Android项目SDK配置

• minSdkVersion >= 16
• targetSdkVersion >= 27
• compileSdkVersion >= 27
• android依赖的兼容包系列必须大于27.1.1， con.android.support:xxx:27.1.1+

---

打开Android工程，在settings.gradle文件末尾追加：

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))

同步gradle sync之后，宿主项项目在project视图下变为：

+ Flutter
	+ src
	- build.gradle
+ HostAndroidProject
	- settings.gradle
	- build.gradle
	+ app
		- build.gradle

在HostAndroidProject/app/build.gradle中添加项目依赖(也可以是需要接入Flutter项目的其他模块)：

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

开始编码，创建FlutterActivity，在FlutterActivity的onCreate方法中修改代码：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_flutter)
    // 创建FlutterView，router地址为Page，此处很重要
    val content = Flutter.createView(this, lifecycle, "Page")
    // 设置FlutterView宽高
    val layoutParams = FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT)
    // 添加FlutterView到Activity
    addContentView(content, layoutParams)
}

Flutter集成到Android工作完成。

集成到iOS项目

iOS项目集成Flutter基于CocoaPods， 在HostIOSProject路径下创建podfile文件，如果项目已经集成了pod可忽略创建podfile文件。

poadfile文件中添加代码：

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

target 'FlutteriOSIntergrationDemo' do
end
# 此处路径是flutter_module的绝对路径
flutter_application_path = '/some/path/to/flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

最后在终端执行pod install
使用xcode打开HostIOSProject.xcworkspace，宿主项目的结构视图如下：

+ HostIOSProject
	+ HostIOSProject
	+ HostIOSProjectTests
	+ HostIOSProjectUITests
	+ Products
	+ Pods
	+ Frameworks
+ Pods
	+ Podfile
	+ Development Pods
	+ Frameworks
	+ Products
	+ Targets Support Files

项目依赖添加完成，开始配置脚本：

• 选择 iOS应用的主 TARGET；

• 打开Build Phases Tab；

• 点击 + 按钮，并选择New Run Script；

• 展开Run Script，在Shell区域添加如下脚本代码：

    "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
    "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
  

• 然后拖拽新建的Run Script到Target Dependencies之后。

• 打开Build SettingsTab ，找到Enable BitCode选项，改为NO，如果已经设置过，可忽略此步骤。

项目配置完成，开始编码：

AppDelegate.h

#import <UIKit/UIKit.h>
// 添加flutter头文件
#import <Flutter/Flutter.h>
// 修改app代理的父类为FlutterAppDelegate
@interface AppDelegate : FlutterAppDelegate
@end

AppDelegate.m

#import "AppDelegate.h"
// 添加头文件
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    // 重写application:didFinishLaunchingWithOptions:方法
    [GeneratedPluginRegistrant registerWithRegistry:self];
    return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

ViewController.m

#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
	
	- (void)viewDidLoad {
		[super viewDidLoad];
		UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
	    btn.frame = CGRectMake(100, 100, 198, 45);
	    btn.layer.borderWidth = 1.0f;
	    btn.layer.borderColor = UIColor.grayColor.CGColor;
	    btn.layer.cornerRadius = 10;
	    [btn setTitle:@"Jump" forState:UIControlStateNormal];
	    [btn setTitleColor:UIColor.blackColor forState:UIControlStateNormal];
	    // 设置按钮点击事件为jump
	    [btn addTarget:self action:@selector(jump) forControlEvents:UIControlEventTouchUpInside];
	    [self.view addSubview:btn];
	}

	- (void)jump {
	    NSLog(@"Just jump to flutter");
	    // 创建FlutterViewController，并跳转到Flutter页面
	    FlutterViewController *ctrl = [[FlutterViewController alloc] init];
	    // 设置Flutter页面的router为Page
	    [ctrl setInitialRoute:@"Page"];
	    [self presentViewController:ctrl animated:YES completion:nil];
	}
	
@end

致此，iOS项目集成Flutter完成。

第四步，

设置flutter代码入口。
修改flutter_module/lib/main.dart代码。

import 'package:flutter/material.dart';
import 'dart:ui'; // window
void main() => runApp(_widgetForRoute(window.defaultRouteName));

// 路由方法
Widget _widgetForRoute(String route) {
  switch(route) {
  	// 此处很重要，iOS/Android项目中均设置了路由到flutter页面的路由参数
    case 'Page':
      return MyApp();
    default:
      return Center(
        child: Text(
          "Unknown route: $route",
          textDirection: TextDirection.ltr,
        ),
      );
  }
}

集成工作全部完成。