系统要求
您的开发环境必须满足安装 了Xcode的Flutter的 macOS系统要求。Flutter支持iOS 8.0及更高版本。
要求读者必须在安转flutter 的环境下,并对 flutter有一定的了解的前提下。
如何把 flutter 集成入现有的项目
要将Flutter嵌入到现有应用程序中,请首先创建Flutter模块。找到现有项目的路径:some/path/
然后在相同路径下建立Flutter的项目。
从命令行运行:
cd some/path/
flutter create --template module wm_flutter
在处创建了Flutter模块项目some/path/wm_flutter/。在该目录中,您可以运行与flutter 其他Flutter项目中相同的命令,例如flutter run --debug或flutter build ios。您还可以通过Flutter和Dart插件在Android Studio / IntelliJ或VS Code中运行该模块 。该项目包含模块的单视图示例版本,然后将其嵌入到现有应用程序中,这对于增量测试代码中仅Flutter的部分很有用。
模块组织
wm_flutter/
├── .ios/
│ ├── Runner.xcworkspace
│ └── Flutter/podhelper.rb
├── lib/
│ └── main.dart
├── test/
└── pubspec.yaml
将您的Dart代码添加到lib/
目录中。
将Flutter依赖项添加到my_flutter/pubspec.yaml
,包括Flutter软件包和插件。
该.ios/
隐藏的子文件夹包含一个Xcode工作区,你可以运行你的模块的独立版本。这是一个包装程序,用于引导您的Flutter代码,并包含帮助程序脚本,以帮助构建框架或使用CocoaPods将模块嵌入到现有应用程序中。
将Flutter模块嵌入到现有应用程序中
有两种方法可以将Flutter嵌入到现有应用程序中。
- 使用CocoaPods依赖性管理器和已安装的Flutter SDK。(本篇文章只做这一种分享)
- 为Flutter引擎,已编译的Dart代码和所有Flutter插件创建框架。手动嵌入框架,并在Xcode中更新现有应用程序的构建设置。
最终项目目录结构
some/path/
├── wm_flutter/
│ └── .ios/
│ └── Flutter/
│ └── podhelper.rb
└── weimai_ios/
└── Podfile
如果您现有的应用程序(MyApp)还没有Podfile,请按照 CocoaPods入门指南 将a添加Podfile到您的项目中。
- 将以下几行添加到您的Podfile:
flutter_application_path = '../wm_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
- 对于每个需要嵌入Flutter的Podfile目标,请调用install_all_flutter_pods(flutter_application_path)。
target "Micropulse" do
install_all_flutter_pods(flutter_application_path)
end
- 运行pod install
到此为止项目中已经添加flutter。
添加Flutter单个页面
启动FlutterEngine和FlutterViewController
要从现有的iOS启动Flutter屏幕,请启动 FlutterEngine和FlutterViewController。
该FlutterEngine作为主机 Dart VM和您的Flutter运行,并FlutterViewController连接到
一个FlutterEngine通过UIKit的输入事件到Flutter,并通过所呈现的显示帧 FlutterEngine。
FlutterEngines是一个引擎作用需要提前预热,不然在打开FlutterViewController
时候有(iOS端)200ms的一个延时效果。
的FlutterEngine寿命可能与FlutterViewControllerde 相同 或比FlutterViewController更长。
创建一个FlutterEngine
创建的正确位置FlutterEngine是特定于您的主机应用程序的。例如,我们演示了FlutterEngine在应用程序启动时在应用程序委托中创建一个 作为属性公开的。
Objcective-V
在AppDelegate.h:
#import
#import
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
在AppDelegate.m:
#import
#import "AppDelegate.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
// Runs the default Dart entrypoint with a default Flutter route.
[self.flutterEngine run];
// Used to connect plugins (only if you have plugins with iOS platform code).
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
用FlutterEngine显示FlutterViewController
以下示例显示了ViewController
带有UIButton
钩子的通用名称, 以表示[FlutterViewController](https://api.flutter.dev/objcdoc/Classes/FlutterViewController.html)
。在FlutterViewController
使用FlutterEngine
中创建的实例AppDelegate
。
@import Flutter;
#import "AppDelegate.h"
#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Make a button to call the showFlutter function when pressed.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self
action:@selector(showFlutter)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Show Flutter!" forState:UIControlStateNormal];
button.backgroundColor = UIColor.blueColor;
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)showFlutter {
FlutterEngine *flutterEngine =
((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
FlutterViewController *flutterViewController =
[[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];
}
@end
现在,您的iOS应用程序中已嵌入Flutter屏幕。
备注:参考 https://flutter.dev/docs/development/add-to-app/ios/project-setup