Flutter-官方推荐的Flutter与原生交互插件Pigeon

插件介绍

一个代码生成工具，让Flutter和宿主平台更安全、更简单、更快地通信。通过Dart入口，生成两端通用的模板代码，原生则只需重写模板内的接口，无需管理Method Channel的实现。参数可以通过模板来同步生成。这样确实方便很多，关于系统的三种方式可以参考这篇文章(Flutter 与原生通信的三种方式)。

插件信息

插件地址：pub.flutter-io.cn/packages/pi…

插件版本：pigeon: 3.0.3

插件的使用

Flutter的准备工作

在Flutter项目的lib目录外创建一个pigeons文件夹，在pigeons文件夹中创建schema.dart

因为目前是原生和Flutter混编，我需要从原生获取用户信息和获取localHost，所以schema.dart的代码如下

/// Description : 定义与原生通信--通过自动生成减少手写代码量
/// 请求参数和返回结果都必需是类结构 否则无法生成文件
/// - Flutter 调用 Native 方法 ( @HostApi() )
/// - Native 调用 Flutter 方法 ( @FlutterApi() )

///Flutter 调用原生代码
@HostApi()
abstract class UserInfoApi {
  ///获取用户信息
  UserInfo getUserInfo();
  ///获取LocalHost用于抓包
  String getLocalHost();
}

///用户信息实体类
class UserInfo {
  String? userId;
  String? realName;
  String? phone;
  String? headImg;
}
复制代码

使用到的命令

命令拆解：
①` flutter pub run pigeon`  
生成代码的命令

②` --input pigeons/schema.dart `
指定生成代码的输入`dart`文件

③ `--dart_out lib/schema.dart `
指定输出生成`dart`文件的目录文件

④ `--objc_header_out ios/Flutter/FlutterPluginRegistrant/Classes/schema.h  `
指定要生成的`iOS`的`.h`文件路径

⑤ `--objc_source_out ios/Flutter/FlutterPluginRegistrant/Classes/schema.m  `
指定要生成的`iOS`的`.m`文件路径

⑥ `--java_out android/Flutter/src/main/java/io/flutter/plugins/Schema.java `
指定要生成的`Android`的`.java`文件路径

⑦  `--java_package "io.flutter.plugins`
指定`Android`的包名，在`android/src/main/`下的`AndroidManifest.xml`里的`package`

⑧ `--objc_prefix Z`（可选）指定生成OC文件的前缀为Z，前缀自己定义为自己的。

复制代码

在项目目录~/flutter_pigeon_plugin下，直接执行，命令太麻烦了，这里我就创建了一个脚本，每次有更新的时候直接运行脚本就可以了。

创建脚本

这个脚本就是根据上面的命令写的，这个也是在pigeons文件夹创建的run pigeon.sh脚本。

flutter pub run pigeon \
  --input pigeons/schema.dart \
  --dart_out lib/schema.dart \
  --objc_header_out ios/Flutter/FlutterPluginRegistrant/Classes/schema.h \
  --objc_source_out ios/Flutter/FlutterPluginRegistrant/Classes/schema.m \
  --java_out android/Flutter/src/main/java/io/flutter/plugins/Schema.java \
  --java_package "io.flutter.plugins"

  # 点击绿色三角形按钮，或者选择文件右键选择运行此文件，开启运行以上脚本文件，
  # 然后会自动生产跨端通信的Android文件(Java文件)和iOS文件（Object_C）
 No newline at end of file
复制代码

这个就是运行脚本后自动生成的文件

截屏2022-05-14 17.44.11.png

截屏2022-05-14 17.44.41.png

截屏2022-05-14 17.46.14.png

如何进行通信呢？

举个例子：上面我不是写了两个方法，那假如我想抓包，就需要设置成Mac的ip

Flutter端代码

if (!kReleaseMode){
  UserInfoApi().getLocalHost().then((value) {
    if(value.isNotEmpty){
      (_dio!.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (HttpClient client) {
        client.findProxy = (uri) {
          return "PROXY $value:8888";
        };
      };
    }
  });
}
复制代码

原生端代码

首先肯定要把Flutter Module引入原生工程，这里就不做说明了。创建了一个类继承自FlutterViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [GeneratedPluginRegistrant registerWithRegistry:self.engine];
    //这里是需要传入一个对象的
    UserInfoApiSetup(self.binaryMessenger, [UserInfoAPI new]);
}

- (void)viewWillAppear:(BOOL)animated {

    [super viewWillAppear:animated];
    self.navigationController.navigationBarHidden = YES;
}

- (void)viewWillDisappear:(BOOL)animated {

    [super viewWillDisappear:animated];
    self.navigationController.navigationBarHidden = NO;
}
复制代码

还需要创建一个遵循UserInfoApi协议的类，并且实现协议方法

@interface UserInfoAPI : NSObject<UserInfoApi>

@end

@implementation UserInfoAPI
- (nullable UserInfo *)getUserInfoWithError:(FlutterError * _Nullable __autoreleasing * _Nonnull)error {
    UserInfo *userInfo = [[UserInfo alloc] init];
    return userInfo;
}

- (nullable NSString *)getLocalHostWithError:(FlutterError * _Nullable * _Nonnull)error {
    return @"10.210.3.16";
}
@end
复制代码

Flutter页面返回原生页面

这样就实现了Flutter调用原生的方法，一般我们跳转到Flutter页面中，想返回原生页面也可以实现，通过调用原生的方法，原生处理返回，比如iOS端可以这样实现

if ([mthodStr isEqualToString:@"closeFlutterVC"]) {
   //调用popViewControllerAnimated
}
复制代码

Flutter返回Android端则直接可以调用方法完成

SystemNavigator.pop();
复制代码

原生进入Flutter页面

//这里可以传入要进入flutter页面的路由
TestViewController *flutterVC = [[IAskFlutterViewController alloc] initWithProject:nil initialRoute:@"" nibName:nil bundle:nil];[self.navigationController pushViewController:flutterVC animated:YES];
复制代码

Android端其实也是同理，实现getInitialRoute方法，返回要跳转页面的路由即可。

Flutter集成iOS原生遇到的问题汇总：

下面列举一些最近在进行混编时遇到的一些问题：

Failed to register observatory port with mDNS with error -65555.

官方描述

On iOS 14 and higher, enable the Dart multicast DNS service in the Debug version of your app to add debugging functionalities such as hot-reload and DevTools via flutter attach.

解决方法

将应用程序的Info.plist重命名为Info-Debug.plist。复制一个名为Info-Release.plist的副本，并将其添加到Xcode项目中

截屏2022-05-14 18.54.49.png

在Info-Debug.plist中，添加键 Bonjour services 并将值设置为 _dartobservatory._tcp

可选的设置Privacy - Local Network Usage Description，并将值设置为Allow Flutter tools on your computer to connect and debug your application.This prompt will not appear on release builds.

截屏2022-05-14 18.58.50.png

在TARGETS中， build settings 修改 Info.plist File 路径 path/to/Info.plist 为 path/to/Info-$(CONFIGURATION).plist.

截屏2022-05-14 19.02.49.png

In iOS 14+,debug mode Flutter apps can only be launched from Flutter tooling,IDEs with Flutter pl...

截屏2022-05-14 19.05.12.png

分析原因

在 iOS14 的真机上安装了 debug模式编译出来的 flutter 应用，那么在断开编译安装连接后，将无法从桌面上打开该应用程序

解决方案

使用flutter的release模式，终端输入

flutter run --release
复制代码

修改main.dart的配置

截屏2022-05-14 19.15.04.png

截屏2022-05-14 19.10.22.png

Reason: tried: '/usr/lib/swift/App.framework/App' (no such file), '/usr/lib/swift/App.framework/App' (no such file),

分析原因

Flutter的App.framework没有导入

解决办法

打开 Pods-xx-frameworks.sh，然后添加以下代码

install_framework "${PODS_ROOT}/../flutter/.ios/Flutter/App.framework"

No podspec found for `Flutter` in `../flutter/.ios/Flutter/engine`

分析原因

这个是在这个路径下缺少这个文件

解决办法

可以看下其他Flutter项目下，是否有这个文件直接拷贝过来，这个就是和Flutter引擎相关的文件。假如有ios文件夹，看下这个文件下有没有那个文件

Undefined symbol: OBJC_CLASS$_TestViewController

截屏2022-05-14 19.42.06.png

分析原因

这个是我创建一个继承自FlutterViewController的类，没有发现

解决办法

在这个里面添加这个类的.m文件即可

截屏2022-05-14 19.43.12.png

底部Widget不跟随键盘弹起而弹起

分析原因

默认resizeToAvoidBottomInset:true，Scaffold 内部会将 mediaQuery.viewInsets.bottom 参与到 BoxConstraints 的大小计算，也就是键盘弹起时调整了内部的 bottom 位置来迎合键盘。

解决办法

设置 resizeToAvoidBottomInset: false

后续再遇到新的问题，会继续更新的～

总结

由于以前都是使用原生的通信方式，那种确实麻烦一些，使用这个插件的方式确实比较简单。但是这样有点增加了代码阅读的难度，没有直接原生通信的可读性高，凡事都有两面性就看自己去衡量了。