flutter 学习一 混编环境搭建

系统要求

您的开发环境必须满足安装 了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嵌入到现有应用程序中。

1. 使用CocoaPods依赖性管理器和已安装的Flutter SDK。（本篇文章只做这一种分享）
2. 为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 <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

在AppDelegate.m：

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)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