0

tengo una aplicación que estoy cargando un webview usando flutter_webview_plugin. Estoy usando evalJavascript para llamar a la función en mi código javascript, sin embargo necesito alguna forma de comunicar el javascript con un método en flutter.

Es decir, desde el evalJavascript llamar a un método definido fuera del javascript, en flutter

¿Hay alguna manera de hacer eso?

Cualquier ayuda sería apreciada.

@override
  Widget build(BuildContext context) {
    webView.onUrlChanged.listen((String url){
      if (!url.contains('Dashboard/Detalle')){
        Future.delayed(Duration(milliseconds: 2000), () {
          webView.evalJavascript(
              "document.getElementById('bt_login').style.display = 'none';"
                  + "var btn = document.createElement('BUTTON');"
                  + "btn.id='Boton1';"
                  + "btn.addEventListener( 'click', function(){"
                  + "document.getElementById('bt_login').click();"
                  + "sendCredentials("
                  + "document.getElementById('usuario').value,"
                  + "document.getElementById('password').value"
                  + ")"
                  + "});"
                  + "var t = document.createTextNode('Entrar');"
                  + "btn.appendChild(t);"
                  + "document.body.appendChild(btn);"
                  + "document.getElementById('Boton1').style.color='#FFFFFF';"
                  + "document.getElementById('Boton1').style.backgroundColor='#288DBA';"
                  + "document.getElementById('Boton1').style.height='10%';"
                  + "document.getElementById('Boton1').style.width='100%';"
                  + "document.getElementById('Boton1').style.fontWeight='bold';"
                  + "function sendCredentials(user,password)"
                  + "aqui llamar a mi funcion declarada fuera del eval"

          );
        });
      }
    });
    return WebviewScaffold(
      url: Routes.urlK,
      hidden: true,
      appBar: AppBar(title: Text(Routes.title)),
    );
  }

1 respuesta 1

0

Hay una forma que te permite llamar a métodos de Flutter desde JavaScript, pero hay que tener en cuenta ciertas consideraciones.

Lo primero que tienes que hacer es ponerte a la escucha de cambios en la url y analizar su contenido. Eso es posible a través de este stream:

flutterWebviewPlugin.onUrlChanged.listen((String url) { });

Parseando el contenido de la variables url puedes extraer acciones y parámetros creando tu "API" de comunicación.

En JavaScript tienes que crear una app que envíe eventos mediante cambios en la url.

Si necesitas enviar parámetros los puedes configurar en la URL como si hicieras una petición a un servidor y pasearlo en Flutter en el manejador. Ejemplo:

file://mi_archivo.html/mostrar_mesaje?texto=Holamundo

Lo ideal es que crees una app teniendo un buen sistema de routing para tratar de ser crear tu estándar de comunicación en la app.

Lo que debes tener en cuenta es que usando esta estrategia no puedes devolver valores desde Flutter. Ejecutas código de Flutter sin esperar respuesta en JavaScript ni valor de retorno.

Espero que te sea de ayuda esta estrategia.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.