将Flutter添加到现有IOS项目

Flutter融入现有iOS应用指南

最新推荐文章于 2024-06-14 14:56:44 发布

原创最新推荐文章于 2024-06-14 14:56:44 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

ios开发专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍如何在现有的iOS项目中引入Flutter模块，包括创建Flutter模块、配置CocoaPods、禁用Bitcode、添加构建阶段及实现热重载等关键步骤。

参考链接 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

1.创建一个Flutter模块

假设您有一个现有的iOS应用程序some/path/MyApp，并且您希望将Flutter项目作为兄弟

$ cd some/path/
$ flutter create -t module my_flutter

这将创建一个some/path/my_flutter/Flutter模块项目，其中包含一些Dart代码以帮助您入门，以及一个.ios/隐藏的子文件夹，它包含了包含一些Cocoapods和一个帮助程序Ruby脚本的模块项目。

2.使App依赖于Flutter模块

假定的文件夹结构如下：

some/path/
  my_flutter/
    lib/main.dart
    .ios/
  MyApp/
    MyApp/
      AppDelegate.h
      AppDelegate.m (or swift)
      :

将Flutter应用程序添加到Podfile

集成Flutter框架需要使用CocoaPods依赖项管理器。这是因为Flutter框架也需要可用于您可能包含在my_flutter中的任何Flutter插件。

如果您的主机应用程序（MyApp）已经在使用Cocoapods，您只需执行以下操作即可与您的my_flutter应用程序集成：

.将以下行添加到您的Podfile文件

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

其中'path/to/my_flutter/'是你刚才生成的my_flutter文件路径

.运行 pod install

当你更改Flutter与app项目依赖关系的时候需要进入cd到my_flutter文件然后运行 flutter packages get从而刷新podhelper.rb脚本，然后cd进入MyApp文件运行pod install来刷新pod数据

.禁用目标的Bitcode

因为Flutter现在不支持bitcode。您需要禁用ENABLE_BITCODE位于目标Build Settings->Build Options->Enable Bitcode部分的标记

.添加构建阶段以构建Dart代码

MyApp在“项目”导航器中选择顶级项目。在主视图的左侧选择TARGET MyApp，然后选择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

.app项目改造

In AppDelegate.h:

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

@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

.热重启/重新加载和调试Dart代码

连接设备或启动模拟器,然后cd到my_flutter项目

$ cd some/path/my_flutter
$ flutter attach
Waiting for a connection from Flutter on iPhone X...

然后重点打印出来

Done.
Syncing files to device iPhone X...                          4.7s

?  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:54741/
For a more detailed help message, press "h". To quit, press "q".

您现在可以编辑Dart代码my_flutter，按下r终端可以热重新加载更改。