Hava Durumu Uygulaması: Şu An

Coddy'nin Flutter Journey'sinin Veri ve Ağ bölümünün bir parçası. Ders 23 / 27.

Bu bölümden koca bir uygulama yapma zamanı: bir hava durumu uygulaması. Önümüzdeki beş derste uygulama bir şehirdeki şu anki hava durumunu, sonraki üç günün hava durumunu, her biri için bir simgeyi, Tekrar dene seçeneği bulunan bir hata ekranını ve şehir seçiciyi gösteriyor.

Deneme API'si üç şehir tanıyor. /weather/lisbon şu yanıtı verir:

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

Ekranın üst kısmından ve bildiğin adımlardan başla: veriler için bir sınıf, verileri alıp çözen bir işlev, initState içinde bir kez oluşturulan bir gelecek ve üç durumuyla bir FutureBuilder. Dosyanın altındaki Weather ve DayForecast sınıfları, fromJson yöntemleriyle birlikte senin için yazıldı. Bu derste mevcut hava durumu gösteriliyor; tahmin bir sonraki derste geliyor.

Görev

Zor

Lizbon'un hava durumunu göster:

loadWeather, /weather/lisbon adresinden veriyi alır ve Weather.fromJson(jsonDecode(body)) değerini döndürür
geleceği initState içinde bir kez oluştur
bir FutureBuilder<Weather>, yüklenirken bir dönen simge gösterir; yükleme başarısız olursa Could not load: metnini ve hatayı gösterir
verilerle birlikte şehir adını (boyut 32), derece işaretiyle sıcaklığı, 21° (boyut 72, kalın) ve hava durumunu (boyut 24) içeren bir Column göster

Kendin dene

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