Flutter混合开发项目搭建

官方提供的集成步骤详见:
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
))     

目录结构如下:


0bc3eb99-face-4ab8-af0b-de3f3a4028e3.png

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 
#import AppDelegate.m

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

AppDelegate.m

#import  // 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 
#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代码,进行热重载更新。

你可能感兴趣的:(Flutter混合开发项目搭建)