如何在现有的iOS工程中接入Flutter

3字数 1415阅读 5537

如何在现有的iOS工程中接入Flutter(详见原文

  1. 本文是参考 官方文档,加上自己的爬坑经验,总结出的,供大家参考~
  2. 关于Flutter的环境安装IDE配置,请参看Flutter中文网

开发环境

Flutter

  • Dart:v2.0.0
  • Flutter:Flutter Release Preview 2
    engine.version = 38a646e14cc25f5a56a989c6a5787bf74e0ea386
  • IDE:Android Studio

iOS

  • Objective-C/Swift:Objective-C
  • Xcode:Version 9.4.1 (9F2000)

一、创建Flutter模块

假设你有一个iOS工程,路径为 ~/Work/Projects/HybridNativeAppWithFlutter(如下图)

假设你有一个iOS工程

在该工程路径下,创建Flutter模块:

cd ~/Work/Projects
flutter create -t module flutter_module

注1: Flutter模块的创建路径 务必xxx.xcodeproj工程文件的上一级目录
例:当前工程文件路径为~/Work/Projects/HybridNativeAppWithFlutter/HybridNativeAppWithFlutter.xcodeproj
则Flutter模块的创建路径必须是~/Work/Projects/HybridNativeAppWithFlutter


注2: 当前笔者是通过 Android Studio 开发Flutter,无法直接创建iOS的Flutter模块(如下图,后续可能会支持),所以建议用官方的方式,通过如上命令来创建

Android Studio 无法直接创建iOS的Flutter模块

二、创建依赖

等待片刻后,终端会输出图左内容,工程目录下会变成图右样子:

完成flutter_module的创建

1. 在Podfile文件中添加Flutter app

Flutter framework 需要通过CocoaPods来管理依赖,假设当前项目已经使用了CocoaPods,则直接在 iOS 工程的Podfile文件中加上如下两句话:

flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

注1:如果当前项目没有使用CocoaPods,请先参考CocoaPods官网《CocoaPods安装方法》进行安装;


注2:完整的Podfile文件如下:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
inhibit_all_warnings!

target 'HybridNativeAppWithFlutter' do
end

flutter_application_path = '../flutter_module'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

然后:

pod install

注: 务必确保工程所有Target的 Enable BitcodeNO(如下图)

设置工程所有Target的 `Enable Bitcode`为`NO`

2.在Xcode工程中添加Dart代码的build phase

如下图,在Xcode工程中,选择TARGET -> Build Phases -> +号 -> New Run Script Phase,然后将如下命令粘贴到文本框中,最后通过快捷键⌘B编译:

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
在Xcode工程中添加Dart代码的build phase

注:务必保证Run ScriptTarget Dependencies phase后面

三、在iOS项目中,通过FlutterViewController跳转至Flutter页面

参考如下代码,修改你的工程文件:

AppDelegate.h/m

  • AppDelegate.h

    #import <UIKit/UIKit.h>
    #import <Flutter/Flutter.h>
    
    @interface AppDelegate : FlutterAppDelegate
    
    @end
    
  • AppDelegate.m

    #import "AppDelegate.h"
    #import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins
    
    @interface AppDelegate () @end
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        [GeneratedPluginRegistrant registerWithRegistry:self];
        return [super application:application didFinishLaunchingWithOptions:launchOptions];
    }
    
    @end
    

ViewController.h/m

  • ViewController.h

    #import <UIKit/UIKit.h>
    
    @interface ViewController : UIViewController
    
    @end
    
    
  • ViewController.m

    #import "ViewController.h"
    #import <Flutter/Flutter.h>
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor lightGrayColor];
        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 {
        FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
        flutterViewController.view.backgroundColor = [UIColor cyanColor];
        [flutterViewController setInitialRoute:@"route1"];
        [self presentViewController:flutterViewController animated:YES completion:nil];
    }
    
    @end
    

此时,如果直接运行、点击按钮后,会看到控制台的报错,并且页面也没有任何内容显示:


修改你的项目代码,运行后会报错

其中,重要的两行提示:

2018-10-23 22:48:48.990075+0800 HybridNativeAppWithFlutter[37728:5932375] Failed to find assets path for "flutter_assets"
2018-10-23 22:48:49.057530+0800 HybridNativeAppWithFlutter[37728:5932574] [VERBOSE-2:engine.cc(114)] Engine run configuration was invalid.

所以,我们要把flutter_assets Flutter.framework 给加入项目中:

把 flutter_assets 加入项目中

注意:flutter_assets不能使用 Create groups 的方式添加,只能使用 Creat folder references 的方式添加进Xcode项目内,否则跳转flutter会页面渲染失败(页面空白)

使用 Creat folder references 的方式添加 flutter_assets 进Xcode项目内

至此,就已经完成了 在现有的iOS工程中接入Flutter 的所有流程~~

运行后的画面 点击按钮,跳转至Flutter页面
运行后的画面
点击按钮,跳转至Flutter页面

四、热启动/热加载 与 Dart代码调试

连接真机或是启动模拟器,可以通过如下命令连通Flutter&iOS项目,实现 热启动/热加载

cd ~/Work/Projects/flutter_module 
flutter attach

此时输入r可热加载,q退出,执行效果如下图:

热启动/热加载

五、下载代码

该示例工程下载地址:https://github.com/AndyM129/HybridNativeAppWithFlutter

【友情提示】

在拉取代码后,若直接运行iOS工程,可能会报错误

在拉取代码后,若直接运行iOS工程,可能会报如上错误。

原因:~/Work/HybridNativeAppWithFlutterDemo/flutter_module/.ios/Flutter/Generated.xcconfig路径下的相关配置中 路径错了(如下图)

相关配置中 路径错了

解决方法是:先运行下 Flutter项目,然后就可以了

六、常见问题

1. 修改了Dart代码,但iOS工程运行时未正确的同步、显示

通常,flutter模块代码做了稍大的修改(如增删的文件)后,flutter与iOS主工程的同步死后就有问题了,后者无法正确显示这些修改。

解决该问题,可以再次将 ~/Work/Projects/flutter_module/.ios/Flutter/flutter_assets目录通过拖拽的方式加入项目中(如下图),再次运行应该就好了~

将 `~/Work/Projects/flutter_module/.ios/Flutter/flutter_assets`目录通过拖拽的方式加入项目中

参考文档

后话

本文原文地址(建议浏览,会及时更新):https://www.jianshu.com/p/af085d4420fd

如果你有好的 idea 或 疑问,请随时提 issue 或 request。

如果你在开发过程中遇到什么问题,或对iOS开发有着自己独到的见解,再或是你与我一样同为菜鸟,都可以关注或私信我的微博。

“Stay hungry. Stay foolish.”

共勉~

推荐阅读更多精彩内容