Apertura de URLs externas
Para interactuar con el navegador del sistema o abrir enlaces externos desde una aplicación Flutter, se utiliza el paquete url_launcher. Este permite invocar esquemas de URL como HTTP, HTTPS, esquemas de correo o números telefónicos.
A continuación, se presanta una implementaicón básica uitlizando un botón para redirigir al usuario a un sitio web específico:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(const RedireccionApp());
class RedireccionApp extends StatelessWidget {
const RedireccionApp({Key? key}) : super(key: key);
Future<void> _abrirEnlace(String url) async {
final Uri uri = Uri.parse(url);
if (!await launchUrl(uri, mode: LaunchMode.externalApplication)) {
throw 'No se pudo abrir la URL: $url';
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Navegación Externa')),
body: Center(
child: ElevatedButton(
onPressed: () => _abrirEnlace('https://www.google.com'),
child: const Text('Ir a Google'),
),
),
),
);
}
}
Consumo de servicios REST con el paquete http
El paquete http es la herramienta estándar para realizar solicitudes asíncronas en Flutter. Permite manejar de forma sencilla los verbos HTTP más comunes, como GET y POST, gestionando las cabeceras y el cuerpo de la petición.
En el siguiente ejemplo se muestra cómo ejecutar ambas operaciones y procesar la respuesta del servidor:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as web_service;
void main() => runApp(const ApiDemoApp());
class ApiDemoApp extends StatelessWidget {
const ApiDemoApp({Key? key}) : super(key: key);
void ejecutarConsultas() async {
const endpoint = 'https://jsonplaceholder.typicode.com/posts';
// Ejemplo de petición GET
final respuestaGet = await web_service.get(Uri.parse(endpoint));
if (respuestaGet.statusCode == 200) {
print('Datos obtenidos: ${respuestaGet.body.substring(0, 50)}...');
}
// Ejemplo de petición POST
final respuestaPost = await web_service.post(
Uri.parse(endpoint),
body: {'titulo': 'Flutter Dev', 'contenido': 'Explorando HTTP'},
);
print('Estado del POST: ${respuestaPost.statusCode}');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Cliente HTTP')),
body: Center(
child: ElevatedButton(
onPressed: ejecutarConsultas,
child: const Text('Enviar Solicitudes'),
),
),
),
);
}
}
Uso de HttpClient nativo
Para escenarios que requieren un control más granular sobre la conexión, Flutter proporciona la clase HttpClient dentro de la librería dart:io. Esta opción es útil para manejar flujos de datos manuales y configuraciones de red de bajo nivel.
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
void main() => runApp(const ClienteNativoApp());
class ClienteNativoApp extends StatelessWidget {
const ClienteNativoApp({Key? key}) : super(key: key);
Future<void> obtenerClima() async {
final cliente = HttpClient();
try {
// Definición de la URL del servicio
final url = Uri.parse("https://api.example.com/weather?city=Madrid");
// Apertura de la conexión
final solicitud = await cliente.getUrl(url);
// Cierre de la solicitud y espera de respuesta
final respuesta = await solicitud.close();
if (respuesta.statusCode == HttpStatus.ok) {
// Decodificación del flujo de datos
final contenido = await respuesta.transform(utf8.decoder).join();
print("Respuesta del servidor: $contenido");
} else {
print("Error en servidor: ${respuesta.statusCode}");
}
} catch (error) {
print("Fallo en la comunicación: $error");
} finally {
cliente.close();
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('HttpClient de dart:io')),
body: Center(
child: ElevatedButton(
onPressed: obtenerClima,
child: const Text('Consultar Información'),
),
),
),
);
}
}