Tutorial de Flutter – Creación de una Aplicación de Clima

Tiempo de lectura: 2 minutos

Esta aplicación te permitirá obtener datos en tiempo real sobre el clima en diferentes ubicaciones.

Título: Tutorial de Flutter – Creación de una Aplicación de Clima

Objetivo: En este tutorial, aprenderemos a crear una aplicación de clima simple utilizando Flutter. Obtendremos datos de una API de pronóstico del tiempo y los mostraremos en la interfaz de usuario.

Nivel de Dificultad: Intermedio

Herramientas necesarias: Flutter instalado en tu sistema, un editor de código (como Visual Studio Code) y acceso a una API de pronóstico del tiempo (como OpenWeatherMap).

Paso 1: Configurar el entorno de desarrollo

Asegúrate de tener Flutter instalado en tu sistema siguiendo la documentación oficial de Flutter.

Paso 2: Crear un nuevo proyecto Flutter

Abre tu terminal y ejecuta los siguientes comandos para crear un nuevo proyecto Flutter:

flutter create weather_app
cd weather_app

Paso 3: Obtener una API de pronóstico del tiempo

Regístrate en una plataforma de pronóstico del tiempo (por ejemplo, OpenWeatherMap) para obtener una API Key gratuita que te permitirá acceder a los datos del clima. Guarda esta API Key en un lugar seguro.

Paso 4: Diseñar la interfaz de usuario

En el archivo lib/main.dart, reemplaza el código con el siguiente código que define la interfaz de usuario de nuestra aplicación de clima:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      home: WeatherApp(),
    );
  }
}

class WeatherApp extends StatefulWidget {
  @override
  _WeatherAppState createState() => _WeatherAppState();
}

class _WeatherAppState extends State<WeatherApp> {
  final apiKey = 'YOUR_API_KEY_HERE'; // Reemplaza con tu API Key
  final cityController = TextEditingController();
  var weatherData;

  Future<void> fetchWeatherData(String city) async {
    final url = Uri.parse(
        'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric');
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      setState(() {
        weatherData = jsonData;
      });
    } else {
      throw Exception('No se pudo cargar el pronóstico del tiempo');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weather App'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: cityController,
              decoration: InputDecoration(labelText: 'Ciudad'),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              final city = cityController.text.trim();
              if (city.isNotEmpty) {
                fetchWeatherData(city);
              }
            },
            child: Text('Obtener Clima'),
          ),
          if (weatherData != null)
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Ciudad: ${weatherData['name']}, ${weatherData['sys']['country']}',
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    'Temperatura: ${weatherData['main']['temp']}°C',
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    'Clima: ${weatherData['weather'][0]['description']}',
                    style: TextStyle(fontSize: 20),
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}

Paso 5: Ejecutar la aplicación

Ejecuta la aplicación en tu emulador o dispositivo físico utilizando el siguiente comando en la terminal:

flutter run

Paso 6: Prueba la aplicación

Abre la aplicación en tu dispositivo y prueba la funcionalidad de búsqueda del clima. La aplicación mostrará el nombre de la ciudad, la temperatura y el clima actual de la ubicación que ingreses.