Aplicación del tiempo: Ahora mismo

Parte de la sección Datos y red del Journey de Flutter de Coddy. Lección 23 de 27.

Es hora de crear una aplicación completa con esta sección: una aplicación del tiempo. Durante las próximas cinco lecciones, muestra el tiempo de una ciudad en este momento, el de los próximos tres días, un icono para cada uno, una pantalla de error con «Intentar de nuevo» y un selector de ciudades.

La API de práctica conoce tres ciudades. /weather/lisbon responde:

{
  "city": "Lisbon",
  "temperature": 21,
  "condition": "Sunny",
  "forecast": [ ... ]
}

Empieza por la parte superior de la pantalla y sigue los pasos que ya conoces: una clase para los datos, una función que los obtiene y decodifica, un futuro creado una sola vez en initState y un FutureBuilder con sus tres estados. Las clases Weather y DayForecast al final del archivo ya están escritas para ti, junto con su método fromJson. En esta lección se muestra el tiempo actual; el pronóstico llegará en la siguiente.

Desafío

Difícil

Muestra el tiempo de Lisboa:

loadWeather obtiene /weather/lisbon y devuelve Weather.fromJson(jsonDecode(body))
crea el futuro una sola vez en initState
un FutureBuilder<Weather> muestra un indicador de carga mientras carga, Could not load: y el error si falla
con los datos, una Column con la ciudad (tamaño 32), la temperatura con el símbolo de grado, 21° (tamaño 72, en negrita) y la condición (tamaño 24)

Pruébalo tú mismo

import 'dart:convert';

import 'package:flutter/material.dart';

import 'api.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WeatherScreen(),
    );
  }
}

class WeatherScreen extends StatefulWidget {
  const WeatherScreen({super.key});

  @override
  State<WeatherScreen> createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Weather')),
      body: const Center(
        child: Text('The weather goes here'),
      ),
    );
  }
}

class Weather {
  Weather({
    required this.city,
    required this.temperature,
    required this.condition,
    required this.forecast,
  });

  final String city;
  final int temperature;
  final String condition;
  final List<DayForecast> forecast;

  factory Weather.fromJson(Map<String, dynamic> json) {
    final days = json['forecast'] as List<dynamic>;
    return Weather(
      city: json['city'] as String,
      temperature: json['temperature'] as int,
      condition: json['condition'] as String,
      forecast: days
          .map((day) => DayForecast.fromJson(day as Map<String, dynamic>))
          .toList(),
    );
  }
}

class DayForecast {
  DayForecast({
    required this.date,
    required this.condition,
    required this.high,
    required this.low,
  });

  final DateTime date;
  final String condition;
  final int high;
  final int low;

  factory DayForecast.fromJson(Map<String, dynamic> json) {
    return DayForecast(
      date: DateTime.parse(json['date'] as String),
      condition: json['condition'] as String,
      high: json['high'] as int,
      low: json['low'] as int,
    );
  }
}