Application météo : maintenant

Fait partie de la section Données et réseau du Journey Flutter de Coddy. Leçon 23 sur 27.

Il est temps de créer une application complète à partir de cette section : une application météo. Au cours des cinq prochaines leçons, elle affichera la météo d’une ville en ce moment, les prévisions pour les trois prochains jours, une icône pour chaque jour, un écran d’erreur avec un bouton Réessayer et un sélecteur de ville.

L’API d’entraînement connaît trois villes. /weather/lisbon renvoie :

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

Commence par le haut de l’écran et suis les étapes que tu connais : une classe pour les données, une fonction qui les récupère et les décode, un future créé une seule fois dans initState, et un FutureBuilder avec ses trois états. Les classes Weather et DayForecast en bas du fichier sont déjà écrites pour toi, ainsi que leur méthode fromJson. Cette leçon présente la météo actuelle ; les prévisions arrivent dans la suivante.

Défi

Difficile

Affichez la météo de Lisbonne :

loadWeather récupère /weather/lisbon et renvoie Weather.fromJson(jsonDecode(body))
créez le futur une seule fois dans initState
un FutureBuilder<Weather> affiche un indicateur de chargement pendant le chargement, Could not load: et l’erreur en cas d’échec
avec les données, une Column contenant la ville (taille 32), la température avec le symbole degré, 21° (taille 72, en gras) et la condition (taille 24)

Essayez vous-même

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,
    );
  }
}