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 
#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

你可能感兴趣的:(flutter 学习一 混编环境搭建)