ios原生嵌套Flutter模块

一.创建Flutter module

cd 项目根目录
flutter create --template module my_flutter
//my_flutter可以自己命名

==注：若运行flutter命令出现command not found: flutter==

通过以下命令解决

export PATH=`pwd`/flutter/bin:$PATH
#pwd需要根据实际路径来

执行完毕后，Flutter module将会创建在ios项目/my_flutter目录下

二.将Flutter模块嵌入到现有应用程序中

将Flutter模块嵌入到现有iOS应用程序中有两种方式：

使用CocoaPods和已安装的Flutter SDK（推荐）。
为Flutter引擎，已编译的Dart代码和所有Flutter插件创建 frameworks。手动嵌入 frameworks，并在Xcode中更新现有应用程序的构建设置。

这里使用CocoaPods

此方法需要所有的相关开发的人员安装 Flutter 环境。

修改iOS应用程序中 Podfile 文件，如果没有则手动创建，内容如下：

flutter_application_path = 'my_flutter/' # my_flutter可根据实际目录修改路径
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'Native_Flutter' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  install_all_flutter_pods(flutter_application_path)

end

执行pod install 命令

==注若报错：[!] InvalidPodfilefile: No such file or directory @ rb_sysopen - ./my_flutter/.ios/Flutter/podhelper.rb.==

需要在my_flutter文件夹下执行一下

flutter run

把.ios和.android等flutter配置生成出来。

三.创建FlutterEngine 和 FlutterViewController

AppDelegate.h:

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

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (nonatomic,strong) FlutterEngine *flutterEngine;

@end

AppDelegate.m:

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

- (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 YES;;
}

控制器：

#import <Flutter/Flutter.h>

//button点击事件：跳转到flutter页面,默认情况下 FlutterEngine 加载 lib/main.dart 文件中的 main() 方法
- (void)handleButtonAction {
    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];

}

四.跳转到指定页面

flutter：

注册路由

routes: <String, WidgetBuilder>{
          "MyFlutterPage": (context) => MyFlutterPage(),
        });

通过全局FlutterEngine实例化FlutterViewController，并setInitialRoute设置初始化路由，这里发现设置的初始化路由路由并不管用

控制器：

    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [flutterViewController setInitialRoute:@"MyFlutterPage"];
    [self presentViewController:flutterViewController animated:YES completion:nil];

方法一：

设置FlutterViewController的pushRoute
这里其实只是让flutter方面push一次

    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [flutterViewController pushRoute:@"MyFlutterPage"];
    [self.navigationController pushViewController:flutterViewController animated:YES];

方法二：

新建一个FlutterViewController并把setInitialRoute设置为跳转的路由，不通过全局的FlutterEngine创建

    FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
    [flutterViewController setInitialRoute:@"MyFlutterPage"];
    [self.navigationController pushViewController:flutterViewController animated:YES];

但是在debug上发现会出现闪屏，亲测打包后基本看不出问题

放一个之前自己学习时写的demo，希望可以帮助新入门的老铁们，有好的建议可以提一下，我们一起进步，奥利给！！！
https://github.com/Baffin-HSL/Flutter_UI

基本元素

自定义的页面

基本功能学习