flutter 产物集成

2019年5月8日 368次阅读来源: Andys

前言

flutter是一个真正实现了一次编码，多端运行的技术，在面对两个平台需要快速开发迭代，或节省人力成本的情况下，flutter是个很好的选择，特别是初创公司。至于flutter和其他技术的效率对比我不在这里多赘述，因为这篇文章重点不在于此。

但是针对市场上很多公司已有项目，有多少公司敢于将项目重新翻一次flutter，踩坑成本和学习成本都成为不可避免的代价！但我们可以选择部分使用flutter，于是乎，我开始寻找现有项目中加入flutter的解决方案。

想法很好，开始着手研究。我发现大体分为两种：一种是flutter官网的项目依赖，第二种是集成flutter产物。由于项目不一定是同一拨人开发native代码和flutter代码，那就有可能出现项目之间的依赖问题，以及进度，代码管理提交问题。所以我更想去了解后者，产物方式集成。这样可以实现两拨开发人员的独立性，也可以将产物发布到服务器，使用gradle来集成，那就是后话了。

然而，我一顿搜索，在我查找了官网、百度、简书、stackoverflow等等可以想到的搜索途径后，我发现没有一篇文章比较直观和简洁，总有一些文章会丢失一些关键性信息，或者含糊不清，或者实现方式比较繁琐、麻烦。我终于忍不住要自己整理一篇文章，来记录，也希望能帮到其他朋友。

值得注意的是，我采用了flutter module的方式集成，而不是flutter app，请大家注意！你可以选择使用Android Studio来创建flutter项目的时候选择 flutter module，也可以使用命令行flutter create -t module flutter_module来创建。

先附上github代码参考地址

flutter代码：http://github.com/Andy888888/flutter_aplus
native代码：http://github.com/Andy888888/flutter_aplus_native

效果图如下（蓝色导航栏界面为flutter效果）：

《flutter 产物集成》效果图 I
效果图 II
动图效果

动图被压缩的比较严重，牺牲了画质。因为有朋友说flutter出来的效果比较卡顿，所以主要给大家感受下流畅度（前提是不要拿debug模式来比较，我集成的是release模式产物）。

好了，废话完了，开整！

Android平台

生成aar文件

创建一个”flutter module”项目，直接点击运行会在.android/Flutter/build/outputs/目录下生成 flutter-debug.aar文件。但是，我们需要的是release文件，使用下面的命令可以生成fltter-release.aar文件

flutter build apk

我们将这个flutter-release.aar当作正常aar文件集成到我们的项目里即可

可能遇到的问题

一般flutter_module项目默认最低版本是16，要求版本不得低于16，视具体情况而定
在集成的时候，需要加入以下代码到gradle，否则报–min-O 最小版本必须大于Level26

compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
}

Android Native 项目中测试aar
作为视图组件插入Activity中


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        flutterModule();
    }

    private void flutterModule() {
        View flutterView = Flutter.createView(MainActivity.this, getLifecycle(), "route2");
        FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 800);
        layoutParams.leftMargin = 100;
        layoutParams.topMargin = 400;
        addContentView(flutterView, layoutParams);
    }
}

作为Activity跳转

首先要在Application的onCreate中注册

FlutterMain.startInitialization(getApplicationContext());

创建一个FlutterModuleActivity

/**
 * 描述:FlutterModuleActivity.
 * <p>
 *
 * @author yanwenqiang.
 * @date 2019/4/15
 */
public class FlutterModuleActivity extends FlutterActivity implements ActivityParams {

    @Override
    public FlutterView createFlutterView(Context context) {
        String route = getIntent().getStringExtra(ROUTE);
        Log.e("路由：",route);

        WindowManager.LayoutParams matchParent = new WindowManager.LayoutParams(-1, -1);
        FlutterNativeView nativeView = this.createFlutterNativeView();
        FlutterView flutterView = new FlutterView(this, null, nativeView);
        flutterView.setInitialRoute(route);
        flutterView.setLayoutParams(matchParent);
        this.setContentView(flutterView);
        return flutterView;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);
    }
}

跳转到FlutterModuleActivity

private void flutterActivity() {
        Intent intent = new Intent(this, FlutterModuleActivity.class);
        intent.putExtra(FlutterModuleActivity.ROUTE,
                "edit-property?{\"keyId\":\"123\",\"trustType\":2}");
        startActivity(intent);
    }

使用MethodChannel实现Flutter调用Native Code

public class FlutterModuleActivity extends FlutterActivity implements ActivityParams {
    // channel path
    private static final String CHANNEL = "flutter.io/lifecycle";
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                (call, result) -> {
                    if (call.method.equals("back")) {
                        finish();
                    }
                });
    }
}

flutter 代码

// channel path
const platform = const MethodChannel('flutter.io/lifecycle');

Future<void> _back() async {
    try {
      await platform.invokeMethod('back');
    } on PlatformException catch (e) {
    }
  }

值得注意的是两端的【channel path】一定要保持一致。

iOS平台

flutter module项目生成iOS release版本 framework

flutter build ios –release

提取并添加App.framework和Flutter.framework到项目

App.framework在/.ios/Flutter目录下。我们自己写的flutter代码就在这个framework里，每次修改flutter代码后，更新这个framework即可
Flutter.framework在/.ios/Flutter/engine目录下。flutter的引擎，几乎不需要更换，除非官方有更新。

《flutter 产物集成》添加 framework
选择 Create folder references

改造AppDelegate

//
//  AppDelegate.h
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate <UIApplicationDelegate, FlutterAppLifeCycleProvider>

@end

//
//  AppDelegate.m
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate
{
    FlutterPluginAppLifeCycleDelegate *_lifeCycleDelegate;
}

- (instancetype)init {
    if (self = [super init]) {
        _lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];
    }
    return self;
}

- (BOOL)application:(UIApplication*)application
didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {
    return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)applicationDidEnterBackground:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidEnterBackground:application];
}

- (void)applicationWillEnterForeground:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillEnterForeground:application];
}

- (void)applicationWillResignActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillResignActive:application];
}

- (void)applicationDidBecomeActive:(UIApplication*)application {
    [_lifeCycleDelegate applicationDidBecomeActive:application];
}

- (void)applicationWillTerminate:(UIApplication*)application {
    [_lifeCycleDelegate applicationWillTerminate:application];
}

- (void)application:(UIApplication*)application
didRegisterUserNotificationSettings:(UIUserNotificationSettings*)notificationSettings {
    [_lifeCycleDelegate application:application
didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication*)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken {
    [_lifeCycleDelegate application:application
didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication*)application
didReceiveRemoteNotification:(NSDictionary*)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application
       didReceiveRemoteNotification:userInfo
             fetchCompletionHandler:completionHandler];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options {
    return [_lifeCycleDelegate application:application openURL:url options:options];
}

- (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url {
    return [_lifeCycleDelegate application:application handleOpenURL:url];
}

- (BOOL)application:(UIApplication*)application
            openURL:(NSURL*)url
  sourceApplication:(NSString*)sourceApplication
         annotation:(id)annotation {
    return [_lifeCycleDelegate application:application
                                   openURL:url
                         sourceApplication:sourceApplication
                                annotation:annotation];
}

- (void)application:(UIApplication*)application
performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem
  completionHandler:(void (^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0) {
    [_lifeCycleDelegate application:application
       performActionForShortcutItem:shortcutItem
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
handleEventsForBackgroundURLSession:(nonnull NSString*)identifier
  completionHandler:(nonnull void (^)(void))completionHandler {
    [_lifeCycleDelegate application:application
handleEventsForBackgroundURLSession:identifier
                  completionHandler:completionHandler];
}

- (void)application:(UIApplication*)application
performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
    [_lifeCycleDelegate application:application performFetchWithCompletionHandler:completionHandler];
}

- (void)addApplicationLifeCycleDelegate:(NSObject*)delegate {
    [_lifeCycleDelegate addDelegate:delegate];
}

@end

创建FlutterModuleViewController

//
//  FlutterModuleViewController.h
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface FlutterModuleViewController : FlutterViewController

@end

//
//  FlutterModuleViewController.m
//  TestFlutter
//
//  Created by 燕文强 on 2019/4/17.
//  Copyright © 2019 燕文强. All rights reserved.
//

#import "FlutterModuleViewController.h"

@interface FlutterModuleViewController ()

@end

@implementation FlutterModuleViewController

- (void)viewWillAppear:(BOOL)animated{
    // 页面进入后隐藏自带导航栏
    [self.navigationController setNavigationBarHidden:YES animated:YES];
    [super viewWillAppear:animated];
    
    // 支持侧滑返回
    self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
    
    // flutter与Native交互
    FlutterMethodChannel *lifecycleChannel = [FlutterMethodChannel
                                            methodChannelWithName:@"flutter.io/lifecycle"
                                            binaryMessenger:self];
    [lifecycleChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
        if([call.method isEqualToString:@"back"]){
            [self.navigationController popViewControllerAnimated:YES];
        }
    }];
}

-(void) viewWillDisappear:(BOOL)animated{
    [self.navigationController setNavigationBarHidden:NO animated:YES];
    [super viewWillDisappear:animated];
}

- (UIView *)splashScreenView{
# warning 重写splashScreenView来处理Native跳转到Flutter页面时，会出现LaunchScreen
    CGRect rect = [UIScreen mainScreen].applicationFrame;
    UIView *view = [[UIView alloc]initWithFrame:rect];
    view.backgroundColor=UIColor.redColor;
    
    return view;
}

@end

跳转到FlutterModuleViewController

- (IBAction)click:(id)sender {
    FlutterModuleViewController *flutterViewController = [[FlutterModuleViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    [flutterViewController setInitialRoute:@"edit-property?{\"keyId\":\"123\",\"trustType\":2}"];
    [self.navigationController pushViewController:flutterViewController animated:YES];
}

运行时记得关闭BitCode

祝你flutter玩的开心！

    原文作者：Andys
    原文地址: https://www.jianshu.com/p/468b2ac77a94
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网

flutter 产物集成

前言

Android平台

生成aar文件

可能遇到的问题

Android Native 项目中测试aar

作为视图组件插入Activity中

作为Activity跳转

iOS平台

flutter module项目生成iOS release版本 framework

提取并添加`App.framework`和`Flutter.framework`到项目

改造AppDelegate

创建FlutterModuleViewController

跳转到FlutterModuleViewController

运行时记得关闭BitCode

祝你flutter玩的开心！

前言

Android平台

生成aar文件

可能遇到的问题

Android Native 项目中测试aar

作为视图组件插入Activity中

作为Activity跳转

iOS平台

flutter module项目生成iOS release版本 framework

提取并添加App.framework和Flutter.framework到项目

改造AppDelegate

创建FlutterModuleViewController

跳转到FlutterModuleViewController

运行时记得关闭BitCode

祝你flutter玩的开心！

提取并添加`App.framework`和`Flutter.framework`到项目