Cómo iniciar esquemas de URL nativos en Flutter con el complemento url_launcher

Introducción

El url_launchercomplemento permite que su aplicación Flutter realice acciones como abrir una página web en Safari o crear un enlace profundo a otra aplicación con contexto.

En este artículo, utilizarás url_launcherpara iniciar una página web, un mapa y un número de teléfono.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v1.22.2, Android SDK v31.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create url_launcher_example

Navegue hasta el nuevo directorio del proyecto:

cd url_launcher_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Paso 2: Agregar el url_launchercomplemento

A continuación, necesitaremos agregar el url_launchercomplemento dentro de nuestro pubspec.yaml:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  url_launcher: ^6.0.3

Ahora podemos continuar y ejecutar esto en el simulador o dispositivo iOS o Android de su elección.

Paso 3: Andamiaje de la aplicación

Ahora, ábrelo main.darten tu editor de código.

Reemplace todo en este archivo con un MaterialAppque apunte a un HomePageque se puede encontrar en home.dart:

lib/main.dart

import 'package:flutter/material.dart';import 'package:url_launcher_example/home.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'URL Launcher',      theme: ThemeData(        primarySwatch: Colors.deepPurple,      ),      home: HomePage(),    );  }}

A continuación, cree un nuevo home.dartarchivo y agregue las siguientes líneas de código:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("URL Launcher"),      ),      body: Column(        children: Widget[          ListTile(            title: Text("Launch Web Page"),            onTap: () {},          ),        ],      ),    );  }}

Ahora que hemos establecido una aplicación base, podemos comenzar a usarla url_launcher.

Paso 4: Lanzamiento de páginas web

url_launcherAdmite el lanzamiento de páginas web.

Revise home.darty modifique las siguientes líneas de código:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("URL Launcher"),      ),      body: Column(        children: Widget[          ListTile(            title: Text("Launch Web Page"),            onTap: () async {              const url = 'https://google.com';              if (await canLaunch(url)) {                await launch(url, forceSafariVC: false);              } else {                throw 'Could not launch $url';              }            },          ),        ],      ),    );  }}

Observe cómo verificamos si el dispositivo canLaunchtiene un esquema de URL particular antes de llamar a la launchfunción.

Luego ejecute la aplicación con el emulador de iOS y haga clic en Iniciar página web :

En este caso, llamamos launchcon forceSafariVCel valor establecido en false. Si no se especifica, se utilizará “Safari View Controller”.

Si quisiéramos que tanto iOS como Android abrieran la página web dentro de la aplicación (como WebView, por ejemplo), haríamos algo como esto:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("URL Launcher"),      ),      body: Column(        children: Widget[          // ...          ListTile(            title: Text("Launch Web Page (with Web View)"),            onTap: () async {              const url = 'https://google.com';              if (await canLaunch(url)) {                await launch(url, forceWebView: true);              } else {                throw 'Could not launch $url';              }            },          ),        ],      ),    );  }}

Luego ejecute la aplicación con el emulador de iOS y haga clic en Iniciar página web (con vista web) :

Ahora puedes usarlo url_launcherpara páginas web.

Paso 5: Iniciar Google Maps y Apple Maps

url_launcherAdmite el lanzamiento de mapas.

Revisar home.darty configurar latitud y longitud:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  final String lat = "37.3230";  final String lng = "-122.0312";  // ...}

Nota: Si desea hacer esto en una aplicación real, es posible que desee aprovechar geocodingy geolocatordeterminar la ubicación actual del usuario.

Luego podemos agregar uno nuevo ListTileque se puede usar con los esquemas de URL comgooglemaps:y https::

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  final String lat = "37.3230";  final String lng = "-122.0312";  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("URL Launcher"),      ),      body: Column(        children: Widget[          // ...          ^ListTile(            title: Text("Launch Maps"),            onTap: () async {              final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";              final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";              if (await canLaunch(googleMapsUrl)) {                await launch(googleMapsUrl);              }              if (await canLaunch(appleMapsUrl)) {                await launch(appleMapsUrl, forceSafariVC: false);              } else {                throw "Couldn't launch URL";              }            },          ),        ],      ),    );  }}

Luego, ejecute la aplicación con el emulador de iOS y haga clic en Iniciar mapas :

Ahora puedes usarlo url_launcherpara páginas web.

Paso 6: Iniciar el teléfono

url_launcherAdmite el lanzamiento de llamadas telefónicas.

Revisar home.darty configurar un número de teléfono:

Agreguemos un telephoneNumber:

class HomePage extends StatelessWidget {  final String lat = "37.3230";  final String lng = "-122.0312";  final String telephoneNumber = "01817658822";  // ...}

Luego podemos agregar uno nuevo ListTileque se puede usar con el tel:esquema de URL:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';class HomePage extends StatelessWidget {  final String lat = "37.3230";  final String lng = "-122.0312";  final String telephoneNumber = "01817658822";  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("URL Launcher"),      ),      body: Column(        children: Widget[          // ...          ListTile(            title: Text("Launch Telephone"),            onTap: () async {              String telephoneUrl = "tel:$telephoneNumber";              if (await canLaunch(telephoneUrl)) {                await launch(telephoneUrl);              } else {                throw "Can't phone that number.";              }            },          ),        ],      ),    );  }}

Luego, ejecute la aplicación con un dispositivo y haga clic en Teléfono :

Nota: Como se señala en la url_launcherdocumentación, existen limitaciones con tely otros esquemas de URL en simuladores sin aplicaciones que los admitan.

Ahora puedes usarlo url_launcherpara números de teléfono.

Conclusión

En este artículo, solías url_launcherlanzar una página web, un mapa y un número de teléfono.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.