es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo agregar el botón de retroceso al WebView en Flutter para cerrar por completo el WebView?

¿Cómo agregar el botón de retroceso al WebView en Flutter para cerrar por completo el WebView?

04 Jun, 2023 Programación

Actualmente, cuando toco una imagen, debería abrir un WebView ya que el objeto de imagen tiene una URL asociada. Estoy usando la biblioteca url_launcher para Flutter, y he implementado el código de la siguiente manera:

onTap: () async {
  final url = image.url;
  if (await canLaunch(url)) {
    await launch(
      url,
      forceSafariVC: true,
      forceWebView: true,
      enableJavaScript: true,
    );
  }
},

Mi comprensión es que esto lanza un WebView, que es un navegador dentro de la aplicación en lugar de llevar al usuario fuera de la aplicación y hacia una aplicación de navegador separada. Esto funciona bien, pero la página carga mucho más lento y los elementos de JavaScript no funcionan correctamente (por ejemplo, el texto animado en los sitios web). Por otro lado,

onTap: () async {
  final url = banners[index].url;
  if (await canLaunch(url)) {
    await launch(
      url
    );
  }
},

funciona mucho mejor ya que es más rápido y todo carga correctamente, pero abre un navegador externo, lo cual no es lo que quiero.

Otro problema es que me gustaría agregar un botón de “Hecho” en la esquina superior izquierda del WebView para salir completamente del WebView y volver a donde estaba en la aplicación. Sólo tengo un botón de retroceso en la esquina inferior izquierda (en el emulador de Android), que me permite ir a la página anterior en el navegador.

¿Cómo puedo personalizar el diseño del WebView si no tengo acceso a él? Parece que url_launcher maneja la creación del WebView internamente, así que me pregunto cómo puedo acceder desde el código anterior para agregar ese botón.

¡Gracias!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar un botón “Hecho” en la esquina superior izquierda del WebView, deberá usar la biblioteca flutter_inappwebview en lugar de url_launcher. Esta biblioteca permite una mayor personalización del WebView, incluida la adición de botones personalizados y la modificación del diseño.

    Aquí hay un ejemplo de cómo implementarlo:

    InAppWebView(
  initialUrl: image.url,
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true, // enable JS for animated text
    ),
  ),
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(
      handlerName: 'closeWebView',
      callback: (args) {  // close the WebView
        Navigator.of(context).pop();
      },
    );
  },
  onLoadStop: (controller, url) async {
    controller.evaluateJavascript(
      source:
        "document.querySelector('body').insertAdjacentHTML('beforeend', '<button onclick="\"window.flutter_inappwebview.callHandler(\'closeWebView\')\"" style="\"position:" fixed;="" top:="" 20px;="" left:="" 20px;\"="">Hecho</button>');",
      ); // add 'Done' button to top left corner
  },
)

    En este código, estamos utilizando el widget InAppWebView en lugar de launch, y pasando image.url como initialUrl. Esto abrirá un WebView en la aplicación en lugar de un navegador externo.

    También establecemos javaScriptEnabled en true, para que el texto animado funcione correctamente.

    Para agregar el botón “Hecho”, usamos el callback onLoadStop. Esto se llama cuando el WebView ha terminado de cargar la página. Dentro de este callback, usamos controller.evaluateJavascript para insertar el botón directamente en la página web, utilizando HTML y Javascript.

    Finalmente, usamos controller.addJavaScriptHandler para crear una función de devolución de llamada que se llamará cuando se haga clic en el botón. Esta función simplemente cerrará el WebView y devolverá al usuario a la pantalla anterior en la aplicación.

    Al usar flutter_inappwebview y personalizar el diseño usando Javascript, se puede crear una integración más perfecta entre la aplicación y el WebView, y agregar botones o elementos personalizados según sea necesario.

Comments are closed.