Platform views allow you to embed native views in a Flutter app, so you can apply transforms, clips, and opacity to the native view from Dart.

This allows you, for example, to use the native web views directly inside your Flutter app.

On the Dart side, create aWidget and add the build implementation, as shown in the following steps:

In the Dart widget file, make changes similar to those shown innative_view_example.dart:

1. Add the following imports:

   dart

   import'package:flutter/foundation.dart';import'package:flutter/services.dart';

   content_copy

2. Implement abuild() method:

   dart

   Widgetbuild(BuildContextcontext){// This is used in the platform side to register the view.constStringviewType='<platform-view-type>';// Pass parameters to the platform side.finalMap<String,dynamic>creationParams=<String,dynamic>{};​returnAppKitView(viewType:viewType,layoutDirection:TextDirection.ltr,creationParams:creationParams,creationParamsCodec:constStandardMessageCodec(),);}

   content_copy

For more information, check out theAppKitView API docs.

Implement the factory and the platform view. TheNativeViewFactory creates the platform view, and the platform view provides a reference to theNSView. For example,NativeView.swift:

importCocoaimportFlutterMacOS​classNativeViewFactory:NSObject,FlutterPlatformViewFactory{privatevarmessenger:FlutterBinaryMessenger​init(messenger:FlutterBinaryMessenger){self.messenger=messengersuper.init()}​funccreate(withViewIdentifierviewId:Int64,argumentsargs:Any?)->NSView{returnNativeView(viewIdentifier:viewId,arguments:args,binaryMessenger:messenger)}​/// Implementing this method is only necessary when/// the `arguments` in `createWithFrame` is not `nil`.publicfunccreateArgsCodec()->(FlutterMessageCodec&NSObjectProtocol)?{returnFlutterStandardMessageCodec.sharedInstance()}}​classNativeView:NSView{​init(viewIdentifierviewId:Int64,argumentsargs:Any?,binaryMessengermessenger:FlutterBinaryMessenger?){super.init(frame:CGRect(x:0,y:0,width:200,height:200))wantsLayer=truelayer?.backgroundColor=NSColor.systemBlue.cgColor// macOS views can be created herecreateNativeView(view:self)}​requiredinit?(codernsCoder:NSCoder){super.init(coder:nsCoder)}​funccreateNativeView(view_view:NSView){letnativeLabel=NSTextField()nativeLabel.frame=CGRect(x:0,y:0,width:180,height:48.0)nativeLabel.stringValue="Native text from macOS"nativeLabel.textColor=NSColor.blacknativeLabel.font=NSFont.systemFont(ofSize:14)nativeLabel.isBezeled=falsenativeLabel.focusRingType=.nonenativeLabel.isEditable=truenativeLabel.sizeToFit()_view.addSubview(nativeLabel)}}

Finally, register the platform view. This can be done in an app or a plugin.

For app registration, modify the App'sMainFlutterWindow.swift:

importCocoaimportFlutterMacOS​classMainFlutterWindow:NSWindow{overridefuncawakeFromNib(){// ...​letregistrar=flutterViewController.registrar(forPlugin:"plugin-name")letfactory=NativeViewFactory(messenger:registrar.messenger)registrar.register(factory,withId:"<platform-view-type>")}}

For plugin registration, modify the plugin's main file:

importCocoaimportFlutterMacOS​publicclassPlugin:NSObject,FlutterPlugin{publicstaticfuncregister(withregistrar:FlutterPluginRegistrar){letfactory=NativeViewFactory(messenger:registrar.messenger)registrar.register(factory,withId:"<platform-view-type>")}}

For more information, check out the API docs for:

• FlutterPlatformViewFactory
• FlutterPlatformView
• PlatformView

When implementing thebuild() method in Dart, you can usedefaultTargetPlatform to detect the platform, and decide which widget to use:

Widgetbuild(BuildContextcontext){// This is used in the platform side to register the view.constStringviewType='<platform-view-type>';// Pass parameters to the platform side.finalMap<String,dynamic>creationParams=<String,dynamic>{};​switch(defaultTargetPlatform){caseTargetPlatform.android:// return widget on Android.caseTargetPlatform.iOS:// return widget on iOS.caseTargetPlatform.macOS:// return widget on macOS.default:throwUnsupportedError('Unsupported platform view');}}

Platform views in Flutter come with performance trade-offs.

For example, in a typical Flutter app, the Flutter UI is composed on a dedicated raster thread. This allows Flutter apps to be fast, as this thread is rarely blocked.

When a platform view is rendered with hybrid composition, the Flutter UI continues to be composed from the dedicated raster thread, but the platform view performs graphics operations on the platform thread. To rasterize the combined contents, Flutter performs synchronization between its raster thread and the platform thread. As such, any slow or blocking operations on the platform thread can negatively impact Flutter graphics performance.