¿Qué hace flutter-embedding-native-views?
Incrusta vistas nativas de Android, iOS o macOS en una aplicación Flutter. Úsalo al integrar componentes nativos complejos como mapas o vistas web.
Introducción
Flutter permite incrustar vistas nativas en su árbol de widgets mediante el uso de los paquetes AndroidView, UiKitView (para iOS) y NSView (para macOS). Esto es especialmente útil cuando necesitas integrar componentes que no están disponibles como widgets de Flutter o cuando deseas reutilizar código nativo existente.
Requisitos
- Flutter SDK (versión 1.20 o superior para AndroidView, 1.22 o superior para UiKitView)
- Conocimiento básico de desarrollo nativo en la plataforma objetivo
Uso básico
Android
Para incrustar una vista nativa de Android, utiliza el widget AndroidView:
import 'package:flutter/widgets.dart';
import 'package:flutter/services.dart';
class NativeViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AndroidView(
viewType: 'native-view-type',
creationParams: {'message': 'Hola desde Flutter'},
creationParamsCodec: StandardMessageCodec(),
);
}
}
Luego, en el lado nativo (Android), debes registrar un PlatformViewFactory:
// MainActivity.java
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.platform.PlatformViewRegistry;
public class MainActivity extends FlutterActivity {
@Override
public void configureFlutterEngine(FlutterEngine flutterEngine) {
super.configureFlutterEngine(flutterEngine);
flutterEngine.getPlatformViewsController().getRegistry().registerViewFactory(
"native-view-type",
new NativeViewFactory()
);
}
}
iOS
Para incrustar una vista nativa de iOS, utiliza el widget UiKitView:
import 'package:flutter/widgets.dart';
import 'package:flutter/services.dart';
class NativeUIViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return UiKitView(
viewType: 'native-view-type',
creationParams: {'message': 'Hola desde Flutter'},
creationParamsCodec: StandardMessageCodec(),
);
}
}
En el lado nativo (iOS), debes registrar un FlutterPlatformViewFactory:
// AppDelegate.swift
import Flutter
import UIKit
@main
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
let registry = self.registrar(forPlugin: "native-view-plugin")!
let factory = NativeViewFactory()
registry.register(factory, withId: "native-view-type")
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
macOS
Para incrustar una vista nativa de macOS, utiliza el widget NSView:
import 'package:flutter/widgets.dart';
import 'package:flutter/services.dart';
class NativeNSViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return NSView(
viewType: 'native-view-type',
creationParams: {'message': 'Hola desde Flutter'},
creationParamsCodec: StandardMessageCodec(),
);
}
}
Consideraciones
- Rendimiento: Las vistas nativas pueden afectar el rendimiento, especialmente en animaciones. Úsalas con moderación.
- Comunicación: Utiliza canales de plataforma (platform channels) para enviar datos entre Flutter y la vista nativa.
- Personalización: Puedes personalizar la apariencia y el comportamiento de la vista nativa mediante parámetros de creación.