Cómo escribir un complemento web de Flutter

Introducción

¿Quieres agregar compatibilidad para un complemento de Flutter? En este artículo, verás cómo se agregó compatibilidad web al complemento url_launcher. Antes de leer, te recomendamos familiarizarte con el desarrollo de complementos y los conceptos sobre el desarrollo de paquetes de complementos.

Ejemplo: package:url_launcher

Primero, es necesario crear una aplicación de ejemplo que use package:url_launcher para poder verificar que funciona correctamente.
Configuración
Para poder usar complementos web, debes estar en el canal de desarrollo de Flutter. Ejecuta el siguiente comando para confirmarlo:

$ flutter channel dev
$ flutter upgrade

Ahora, debes habilitar la compatibilidad web a fin de que Flutter pueda configurar tu aplicación para ejecutarse en la Web:

$ flutter config --enable-web

Crea un directorio llamado url_launcher_example (supongamos que es ~/url_launcher_example) y crea un proyecto de Flutter allí:

$ mkdir “~/url_launcher_example”
$ cd “~/url_launcher_example”
$ flutter create .

Uso de package:url_launcher
Nuestra aplicación de ejemplo tendrá solamente un botón que inicie google.com.
Primero, actualiza pubspec para crear la dependencia con package:url_launcher. En pubspec.yaml, en dependencies, agrega la siguiente línea (resaltada en negrita):

name: url_launcher_example
 ...
dependencies:
  flutter:
    sdk: flutter
  url_launcher: 5.2.3
  ...

Luego, reemplaza todo el contenido de lib/main.dart con lo siguiente:
https://medium.com/media/288972317514c5b76509f5d340d79b94/href
Para verificar que la aplicación funcione, ejecútala en tu dispositivo Android o iOS, o usa el simulador y ejecuta la aplicación normalmente con flutter run. La aplicación debe verse como en la captura de pantalla. Prueba a hacer clic en el botón Launch! y verifica que se abra Google.

Aplicación de ejemplo para abrir una URL

Ahora, puedes ejecutar la misma aplicación en la Web con flutter run -d chrome. La aplicación debería abrir y mostrar la versión para dispositivos móviles, pero no debería suceder nada al hacer clic en Launch!. Empecemos a escribir el complemento web para url_launcher.

Creación de package:url_launcher_web

Crea un directorio nuevo llamado url_launcher_web (supongamos que es ~/url_launcher_web):

$ mkdir “~/url_launcher_web”
$ cd “~/url_launcher_web”

Lamentablemente, no hay una plantilla para complementos web en este momento (es decir, no puedes usar flutter create), así que tendrás que crear el complemento manualmente. Sin embargo, antes de empezar a codificar, debemos analizar cómo se realizará la implementación.
Información sobre package:url_launcher
Echemos un vistazo a la implementación de package:url_launcher para que sepas qué hacer con package:url_launcher_web. El código principal se encuentra aquí. Estas son las partes más importantes que debes tener en cuenta:
https://medium.com/media/03c15edfdcd548e0fec0ba40c98db037/href
Casi todos los complementos de Flutter se escriben de este modo. Crean un MethodChannel y el complemento usa el canal para enviar una llamada de método a la plataforma (es decir, Android o iOS) del complemento. Por lo tanto, la lógica de funcionamiento de este complemento en Android es que hay código escrito en Java que registra un MethodChannel en Android. El MethodChannel aguarda llamadas de método, las cuales invocan el código de Android necesario para iniciar una URL. Para lograr que este complemento funcione en la Web, debes hacer lo mismo que en las implementaciones de Android e iOS: crear un MethodChannel que aguarde llamadas de método e inicie la URL específica cuando las reciba.
Implementación de package:url_launcher_web
Las implementaciones web de los complementos de Flutter se escriben como paquetes de Dart. Empecemos con pubspec.yaml. Suponiendo que estás en el directorio url_launcher_web que creaste antes, genera un archivo llamado pubspec.yaml y pega el siguiente código en el archivo:
https://medium.com/media/1d767c3a24e4ed2827f642698c6e1ae1/href
Información importante para tener en cuenta:

  • La sección platforms: incluye una sección para web: que declara el nombre de la clase en la que implementarás el complemento y el nombre de archivo que contiene la clase.
  • La dependencia flutter_web_plugins te permite registrar la implementación web de url_launcher.

Declaramos que nuestra implementación será una clase denominada UrlLauncherPlugin y la escribiremos en url_launcher_web.dart, así que hagamos eso ahora. Asegúrate de crear primero un directorio lib/. Luego, edita lib/url_launcher_web.dart y pega el siguiente código en el archivo:
https://medium.com/media/b2106dadcc15a869428141afde8cd330/href
Hay varios puntos importantes que debemos tener en cuenta en la implementación. Analicemos cada uno de ellos:
Registrar el complemento con registerWith
Al igual que en Android o iOS, los complementos web deben inicializarse antes de que la aplicación se ejecute. Esto se realiza en el método estático registerWith, que utiliza un Registrar (que proviene de package:flutter_web_plugins).
En este caso, registramos un MethodChannel para que detecte mensajes entrantes de la aplicación. Observa cómo inicializamos el MethodChannel con registrar.messenger. Todos los MethodChannel tienen un BinaryMessenger que usan para enviar y recibir mensajes. De forma predeterminada, un MethodChannel usa el BinaryMessenger predeterminado definido en Flutter. Dicho BinaryMessenger envía mensajes desde la aplicación hacia la plataforma, pero nosotros queremos escribir un complemento que se encuentre en la plataforma y reciba mensajes de la aplicación. Por lo tanto, debemos inicializar el MethodChannel con otro BinaryMessenger. Afortunadamente, el Registrar que se envía al complemento en registerWith tiene el mensajero adecuado. Si lo usamos para inicializar el MethodChannel, tendremos un MethodChannel que recibe llamadas de método de la aplicación.
Control de las llamadas de método
El MethodChannel que creamos registró handleMethodCall como el controlador de llamadas de método. Es decir que invocaremos a este controlador cada vez que el MethodChannel de la aplicación (el que creamos en package:url_launcher) envíe una llamada de método al MethodChannel de la plataforma (el que creamos en registerWith).
Si el controlador recibe una llamada de método dirigida al método ‘launch’, invocará a _launch y se abrirá una ventana nueva con la URL especificada.

Usar el complemento web en la aplicación de ejemplo

¡Qué buen aspecto tiene nuestro complemento web! Llegó el momento de usarlo en la aplicación de ejemplo que creamos antes.
Modifica pubspec en ~/url_launcher_example para agregar una dependencia vinculada a ~/url_launcher_web. Los cambios deberían ser similares a la imagen que aparece debajo. Asegúrate de usar la ruta correcta correspondiente a tus directorios:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: 5.2.3
  url_launcher_web:
    path: ../url_launcher_web

Ahora, ejecuta la aplicación de ejemplo nuevamente con flutter run -d chrome. Prueba a hacer clic en el botón Launch!. Debería abrirse google.com en una pestaña nueva.
¡Felicitaciones! Lograste agregar compatibilidad web a un complemento de Flutter.
Source: Google Dev

Deja un comentario