Flutter是google的一个跨平台、高性能的移动UI框架，可以作为库或者模块集成到现有的应用程序中。
本篇文章以iOS已有项目集成Flutter为例进行说明，如果有安卓集成Flutter需求，请参阅Flutter文档。
集成Flutter
1.创建Flutter模块
要将Flutter集成到现有项目中，首先创建Flutter模块，命令行运行：
cd yourproject/path/
flutter create --template module my_flutter
执行完后，在yourproject/path/my_flutter中生成了Flutter模块项目。在该目录中，你可以运行一些flutter命令，比如flutter run --debug、flutter build build ios。
注意：
path可以自己定，但是一定要和后边Podfile文件的路径一致。
my_flutter目录结构如下：
.
├── .android
├── .dart_tool
├── .gitignore
├── .idea
├── .ios
│ ├── Flutter
│ │ └── podhelper.rb
│ ├── Runner.xcodeproj
│ └── Runner.xcworkspace
├── .metadata
├── .packages
├── README.md
├── build
├── lib
│ └── main.dart
├── xxdemo_flutter.iml
├── xxdemo_flutter_android.iml
├── pubspec.lock
├── pubspec.yaml
└── test
- 在lib目录下放置自己的Dart代码
- Flutter依赖项添加到
my_flutter/pubspec.yaml，包括Flutter软件包和插件。 -
.ios包含一个Xcode工作区，自己的iOS代码不要添加到这里，这里的更改不会显示到已有的iOS项目中，并且可能会被Flutter覆盖。 -
.ios/目录是自动生成的，不要对其进行源码控制。
2. 将Flutter模块集成到已有应用程序中
官方推荐使用CocoaPods依赖管理工具来安装Flutter SDK，这种方式要求当前项目的每个开发人员本地都必须安装Flutter SDK版本。
如果你的项目还没有使用CocoaPods，可以参考CocoaPods官网或者CocoaPods入门来给项目添加CocoaPods依赖管理工具。
2.1 Podfile文件
我们要通过CocoaPods管理Flutter SDK，需要再Podfile文件中增加以下内容：
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
// 对于每个需要集成Flutter的Podfile target，添加如下内容
install_all_flutter_pods(flutter_application_path)
这里需要注意的是，如果你的Flutter模块目录结构与官方文档推荐的不一致，需要自己调整相对路径，以保证安装正确。Podfile详情案例如下：
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
inhibit_all_warnings!
# path修改为调整后的相对路径
flutter_application_path = './XXDemo/Vendors/xxdemo_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
2.2 运行pod install
pod install主要做了以下事情：
- 解析
Generated.xcconfig文件，获取 Flutter工程配置信息，文件在my_flutter/.ios/Flutter/目录下，文件中包含了Flutter SDK路径、Flutter工程路径、Flutter工程入口、编译目录等。 - 将Flutter SDK中的
Flutter.framework通过pod添加到Native工程。 - 使用
post_install这个pod hooks来关闭Native工程的bitcode，并将Generated.xcconfig文件加入Native工程。
3. 加载Flutter页面
在AppDelegate.h文件中：
@import UIKit;
@import Flutter;
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
在AppDelegate.m文件中：
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Used to connect plugins.
#import "AppDelegate.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter"];
// Runs the default Dart entrypoint with a default Flutter route.
[self.flutterEngine run];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
在某个页面触发push或present动作，进入到Flutter页面：
@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];
[self.navigationController pushViewController:flutterVC animated:YES];
}
@end
遇到的问题
1. Podfile is out of date
使用Android Studio运行Flutter项目，App卡在启动页或者首页加载状态，控制台输出红色log日志：
Warning: Podfile is out of date
This can cause a mismatched version of Flutter to be embedded in your app, which may result in App Store submission rejection or crashes.
If you have local Podfile edits you would like to keep, see https://github.com/flutter/flutter/issues/24641 for instructions.
To regenerate the Podfile, run:
rm ios/Podfile
之前这个项目运行一直没有问题，最近升级了Flutter版本，估计是升级导致的，解决问题的办法日志中也已经给出，进入到Flutter项目根目录下，执行命令：
rm ios/Podfile
重新运行项目，会重新生成新的Podfile文件，这时项目正常启动，问题解决。
网友评论