Wetter-App: Jetzt

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 23 von 27.

Jetzt ist es an der Zeit, in diesem Abschnitt eine ganze App zu erstellen: eine Wetter-App. In den nächsten fünf Lektionen zeigt sie das aktuelle Wetter für eine Stadt, das Wetter der nächsten drei Tage, ein Symbol für jeden Tag, einen Fehlerbildschirm mit „Erneut versuchen“ und eine Stadtauswahl.

Die Übungs-API kennt drei Städte. /weather/lisbon liefert:

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

Beginne oben auf dem Bildschirm und mit den Schritten, die du bereits kennst: eine Klasse für die Daten, eine Funktion, die sie abruft und dekodiert, ein Future, das einmal in initState erstellt wird, und einen FutureBuilder mit seinen drei Zuständen. Die Klassen Weather und DayForecast am Ende der Datei sind bereits für dich geschrieben, einschließlich ihrer fromJson-Methode. In dieser Lektion wird das aktuelle Wetter angezeigt; die Vorhersage folgt in der nächsten.

Aufgabe

Schwer

Zeige das Wetter in Lissabon:

loadWeather ruft /weather/lisbon ab und gibt Weather.fromJson(jsonDecode(body)) zurück
erstelle das Future einmal in initState
ein FutureBuilder<Weather> zeigt während des Ladens einen Spinner an; bei einem Fehler zeigt er Could not load: und den Fehler an
mit den Daten: eine Column mit der Stadt (Größe 32), der Temperatur mit Gradzeichen, 21° (Größe 72, fett) und dem Wetterzustand (Größe 24)

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler