Usando JavaScript en Flutter…!!!

Si, como lo escuchaste se puede conectar Javascript con Flutter. Con el uso de ciertos paquetes esto lo hace posible. Vamos a codear…..

Tabla de Contenido

Sobre el Package

Estructura del Ejemplo

Implementación

Sobre el Package

Existen varios package que podemos usar para ejecutar código JavaScript en Flutter, pero en este caso vamos a usar “js_interop”, el cual nos permitirá conexión entre las dos plataformas.

Estructura del Ejemplo

Vamos a trabajar con lo siguiente:

JavaScript

Objeto JS con 4 propiedad que sera utilizado en el ejemplo.

// Ejemplo JS archivo
window.objectFlutter = {
    name: '',
    surname: '',
    getNameAndSurname: function() {
        return this.name + ' ' + this.surname;
    },
    getJsonNameAndSurname: function() {
        return { name: this.name, surname: this.surname };
    }
}

Dart

Declaración de funciones que vamos a consumir desde Flutter.

extension type InterfaceObjectFlutter._(JSObject _) implements JSObject {
  external String get name;
  external set name(String name);
  external String get surname;
  external set surname(String name);
  external String getNameAndSurname();
  external JSONObject getJsonNameAndSurname();
}

Implementación

Instalación del package

 $ dart pub add js_interop

Creando archivo Javascript dentro de web/ejemplo.js

// Ejemplo JS archivo
window.objectFlutter = {
    name: '',
    surname: '',
    getNameAndSurname: function() {
        return this.name + ' ' + this.surname;
    },
    getJsonNameAndSurname: function() {
        return { name: this.name, surname: this.surname };
    }
}

Importando archivo JavaScript dentro del proyecto web/index.html.

<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
<!-- Agregando clase ejemplo JS code -->
<script src="ejemplo.js" defer></script>

Usando funciones en flutter main.dart.

Con este ejemplo tratamos lo siguiente:

• Seteamos el nombre y apellido en la clase objectFlutter JavaScirpt.
• Obtener el valor en string del nombre y apellido de la funcíon getNameAndSurname.
• Obtenemos el nombre y usuario de un la función getJsonNameAndSurname la cual devuelve un JsonObject, para lo cual declararemos una interfaz conociendo la estructura del JSON llamada JSONObject, la cual nos retornara como parámetros tanto el nombre como el apellido.

// Importación de libreriás
import 'dart:js_interop';

// Creando clase que extendide desde la función getJsonNameAndSurname
extension type JSONObject._(JSObject _) implements JSObject {
  external String get name;
  external String get surname;
}

// Creando clase que va a extender el objeto de javascript (objectFlutter)
extension type InterfaceObjectFlutter._(JSObject _) implements JSObject {
  external String get name;
  external set name(String name);
  external String get surname;
  external set surname(String name);
  external String getNameAndSurname();
  external JSONObject getJsonNameAndSurname();
}

// Enlazando la clase con el objeto de javascript
@JS()
external InterfaceObjectFlutter get objectFlutter;

// Función principal
void main() {
  // Creando objeto de la clase InterfaceObjectFlutter
  var object = objectFlutter;
  // Asignando valores a las propiedades del objeto
  object.name = 'Boris';
  object.surname = 'Benalcazar';

  // Imprimiendo en consola el nombre y apellido
  print("Hola ${object.getNameAndSurname()} \n\n\n\n");

  // Imprimiendo en consola el nombre y apellido desde JSON
  print("Hola ${object.getJsonNameAndSurname().name} desde JSON\n\n\n\n");
}

Conclusión

En la actualidad podemos integrar cualquier tipo de función JavaScript dentro de Flutter, con el package que hemos usado o con otros disponibles en el mercado.