Muchas veces necesitamos abrir un enlace dentro de nuestras aplicaciones móviles, enlaces que nos permitan abrir un URL en el navegador predeterminado de nuestros usuarios. Hoy veremos como abrir un enlace de forma externa mediante un navegador web en nuestras apps Android e iOS con Flutter y Dart.

Recientemente, me encuentro trabajando en un proyecto de app móvil.

Para este proyecto nos encontramos con Flutter en desarrollo multiplataforma, Android e iOS.

El cliente nos ha solicitado agregar un botón para abrir un sitio web.

Esto es precisamente lo que vamos a ver hoy a detalle.

Si necesitas abrir una URL en el navegador con Flutter y Dart entonces estas en lugar adecuado.

Cabe mencionar que queremos que el enlace sea abierto en la aplicación del navegador del teléfono y no dentro de nuestra propia app.

Para esto vamos a hacer uso de url_launcher por lo que lo primero es agregar la dependencia.

Vamos a nuestro pubspec.yaml y la agregamos.

url_launcher: ^6.0.9

En el evento de nuestro botón o enlace llamar nuestra función encargada de ir a una url determinada.

onPressed: _launchURL,

En la función launchURL agregar lo siguiente:

_launchURL() async {
  const url = 'https://[tu-url-destino].com';
  Uri uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri, mode: LaunchMode.externalApplication);
  } else {
    throw 'No se puede abrir $url';
  }
}

Por supuesto, agregar tu propia dirección destino.

Nosotros aquí revisamos si es posible cargar la URL destino y si es así entonces lo hacemos con la función launchUrl.

Agregamos un parámetro tipo LaunchMode para asegurarnos de que en enlace sea abierto por una aplicación navegador web externa y no en la propia app.

Ahora, al probar veremos como nuestra app, mediante el botón que coloquemos, nos manda al navegador web en la URL indicada.

Y eso es todo, fue un pequeño, pero útil artículo que seguro ocuparemos más de alguna vez en desarrollo de apps con Flutter.

Si esta información sobre cómo abrir una URL en el navegador con Flutter y Dart te ha sido útil, entonces no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo, si tienes cualquier duda relacionada con este tema, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 4 Promedio: 4]

Abrir una URL en el navegador con Flutter y Dart

jonathan__melgoza