Posted at

FlutterでネイティブのViewをそのまま表示できるPlatformViewを使う方法

FlutterのPlatformViewという ネイティブのViewをFlutterのWidgetのように表示できる というものです。

自分のプロジェクトでは画像の加工をよくやるので、結構使いそうです。

メモとして残します。

今回はiOSだけ紹介しますが、Androidも基本的には変わりません。

Androidでやる場合はこちら → https://medium.com/flutter-community/flutter-platformview-how-to-create-flutter-widgets-from-native-views-366e378115b6


info.plist を編集する

下記を info.plist を追加しましょう。

<key>io.flutter.embedded_views_preview</key>

<true/>


Flutter側を編集する

Flutter側はこれだけです。

 UiKitView( viewType: "ramdom_noise",),


iOS側

iOS側はAppDelegate.swiftを使います。

import UIKit

import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
) -> Bool {

let viewFactory = FluffViewFactory()
registrar(forPlugin: "kitty").register(viewFactory, withId: "ramdom_noise")

GeneratedPluginRegistrant.register(with: self)

return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}

public class FluffViewFactory: NSObject, FlutterPlatformViewFactory {
public func create(
withFrame frame: CGRect,
viewIdentifier viewId: Int64,
arguments args: Any?
) -> FlutterPlatformView {
return FluffView(frame, viewId: viewId, args: args)
}
}

public class FluffView : NSObject, FlutterPlatformView {
let frame: CGRect
let viewId: Int64

init(_ frame: CGRect, viewId: Int64, args: Any?) {
self.frame = frame
self.viewId = viewId
}

public func view() -> UIView {
return UISlider(frame: frame)
}
}

これで画面に Sliderが表示されます。


参考

https://medium.com/@phoomparin/how-to-use-native-uis-in-flutter-with-swift-platform-view-8b4dc7f833d8