Analyse what is platform view in flutter ?

Platform Views in Flutter

Platform Views are a mechanism in Flutter that allows you to embed native platform widgets (Android Views or iOS UIViews) directly into your Flutter application's widget tree.

What are Platform Views?

Platform Views enable Flutter apps to display native platform components that aren't available in Flutter's widget catalog, providing seamless integration with platform-specific UI elements.

Use Cases

• Native Maps: Google Maps, Apple Maps
• WebViews: Display web content
• Native Video Players: Platform-specific video controls
• Native Ads: AdMob, Facebook Ads
• Camera Views: Native camera previews
• Native UI Components: Platform-specific controls

How Platform Views Work

dartCopy
// Example: Embedding Android View
import 'package:flutter/services.dart';

class NativeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: 'native-view-type',
      layoutDirection: TextDirection.ltr,
      creationParams: {'text': 'Hello from Flutter'},
      creationParamsCodec: const StandardMessageCodec(),
    );
  }
}

Android Implementation

Dart Side:

dartCopy
class AndroidMapView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AndroidView(
      viewType: 'plugins.flutter.io/google_maps',
      onPlatformViewCreated: _onPlatformViewCreated,
    );
  }

  void _onPlatformViewCreated(int id) {
    print('Platform view created with id: $id');
  }
}

Kotlin Side:

kotlinCopy
class NativeViewFactory(
    private val messenger: BinaryMessenger
) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {

    override fun create(
        context: Context,
        viewId: Int,
        args: Any?
    ): PlatformView {
        return NativeView(context, viewId, args)
    }
}

class NativeView(
    context: Context,
    id: Int,
    creationParams: Any?
) : PlatformView {
    private val view: View = TextView(context).apply {
        text = "Native Android View"
    }

    override fun getView(): View = view

    override fun dispose() {}
}

iOS Implementation

Dart Side:

dartCopy
class IOSMapView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return UiKitView(
      viewType: 'plugins.flutter.io/google_maps',
      onPlatformViewCreated: _onPlatformViewCreated,
    );
  }

  void _onPlatformViewCreated(int id) {
    print('Platform view created with id: $id');
  }
}

Swift Side:

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

class NativeView: NSObject, FlutterPlatformView {
    private let _view: UIView

    init(frame: CGRect, viewId: Int64, args: Any?) {
        _view = UILabel()
        (_view as! UILabel).text = "Native iOS View"
        super.init()
    }

    func view() -> UIView {
        return _view
    }
}

Platform View Types

Registration

Android (MainActivity.kt):

kotlinCopy
class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        flutterEngine
            .platformViewsController
            .registry
            .registerViewFactory(
                "native-view-type",
                NativeViewFactory(flutterEngine.dartExecutor.binaryMessenger)
            )
    }
}

iOS (AppDelegate.swift):

swiftCopy
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let registrar = self.registrar(forPlugin: "native-view")!
        let factory = NativeViewFactory()
        registrar.register(factory, withId: "native-view-type")
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

Performance Considerations

Advantages:

• Access to native platform features
• Consistent with platform design guidelines
• Leverage existing native libraries

Disadvantages:

• Performance overhead (layer composition)
• Increased complexity
• Platform-specific code maintenance
• Potential rendering issues

Best Practices

• Use Platform Views only when necessary
• Consider performance implications
• Test on multiple devices
• Handle platform differences properly
• Implement proper disposal

Important: Platform Views introduce an additional layer of complexity. Use them only when Flutter's built-in widgets cannot meet your requirements.

Learn more at Platform Views Documentation.