Flutter开发者进阶：接入iOS原生页面

Flutter开发者进阶：接入iOS原生页面

前言

在 Flutter APP 的开发过程中，有时不仅需要使用 Flutter 提供的组件，还需要使用原生的组件。

例如在对接外部 SDK 时，如果自己重新实现 SDK 的逻辑，无疑是本末倒置。

在这种情况下有两种方式可以使用：

1. 将 Flutter 项目转为 Flutter Module，打包为 aar ，在原生项目中引用，使用原生的方式调用 Flutter，这无疑增加了很多原生开发的工作。

2. 将 SDK 引入到 Flutter 中，作为一个 Flutter Plugin，建立方法通道（method channel），调用原生的方法或者页面。

本篇文章将讨论第二种方法。

将一个带有页面的原生IOS SDK 接入 Flutter 中使用。

话不多说直接开始

创建插件

创建一个 Flutter Plugin

flutter create --template=plugin --platforms=ios ios_sdk_flutter_plugin

创建完成后，在 ios_sdk_flutter_plugin 的 ios 目录下，有两个目录： Assets 和 Classes

Classes 目录中已经有了插件实现文件 IosSdkFlutterPlugin.swift

迁入原生代码

我们将整个SDK的源码直接拷贝到 Classes 目录中。

删除 info.list

删除Xcode项目管理相关文件

修改插件实现代码

// 省略 import 代码

public class IosSdkFlutterPlugin: NSObject, FlutterPlugin {
  public static func register(with registrar: FlutterPluginRegistrar) {
    let channel = FlutterMethodChannel(name: "ios_sdk_flutter_plugin", binaryMessenger: registrar.messenger())
    let instance = IosSdkFlutterPlugin()
    registrar.addMethodCallDelegate(instance, channel: channel)
  }

  public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
    switch call.method {
    case "getPlatformVersion":
      result("iOS " + UIDevice.current.systemVersion)
    case "openNativePage":
      // 获取当前的UIViewController
      if let rootViewController = UIApplication.shared.keyWindow?.rootViewController {
        // 创建并显示你的ViewController，可以是OC代码的页面，直接调用
        let viewController = YourViewController()
        rootViewController.present(viewController, animated: true, completion: nil)
        result(nil)
      } else {
        result(FlutterError(code: "NO_ROOT_VIEW_CONTROLLER", message: "No root view controller found", details: nil))
      }
    default:
      result(FlutterMethodNotImplemented)
    }
  }
}

注册插件

在 Flutter 项目的 pubspec.yaml 文件中，添加如下代码：

dependencies:
  flutter:
    sdk: flutter
  ios_sdk_flutter_plugin: 
    path: ./ios_sdk_flutter_plugin

重新安装依赖

flutter clean
flutter pub get

在 Flutter 中调用

 await MethodChannel("ios_sdk_flutter_plugin").invokeMethod("openNativePage");

运行 Flutter

flutter run 

现在你可以在你的 Flutter 项目中看到原生 iOS 页面的调起。

总结

Flutter 接入原生页面，主要通过 Flutter Plugin 的方式，通过 MethodChannel 调用原生的页面。

iOS 的原生 SDK 调用相对安卓要更顺畅一些，不需要引入特殊的实现去获取上下文，几乎是创建成功，引入插件，调用方法，就完成了。

至此，iOS 和安卓的原生 SDK 引入都已完成。

如果是同一个外部 SDK 的话，还可以将他们融合为一个插件，并且将通道的调用统一到 lib 文件夹里的 dart 文件里面

这样就完成了一个跨 iOS 和安卓两大平台的 Flutter 插件。