Aplikasi Cuaca: Saat Ini

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 23 dari 27.

Saatnya membuat aplikasi lengkap dari bagian ini: aplikasi cuaca. Dalam lima pelajaran berikutnya, aplikasi ini menampilkan cuaca saat ini di sebuah kota, prakiraan untuk tiga hari berikutnya, ikon untuk masing-masing hari, layar error dengan tombol Coba lagi, dan pemilih kota.

API latihan mengenal tiga kota. /weather/lisbon memberikan jawaban:

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

Mulai dari bagian atas layar, lalu ikuti langkah-langkah yang sudah kamu ketahui: class untuk data, fungsi yang mengambil dan menguraikan data, future yang dibuat sekali di initState, dan FutureBuilder dengan tiga statusnya. Class Weather dan DayForecast di bagian bawah file sudah disiapkan untukmu, beserta fromJson-nya. Pelajaran ini menampilkan cuaca saat ini; prakiraan akan dibahas di pelajaran berikutnya.

Tantangan

Sulit

Tampilkan cuaca Lisbon:

loadWeather mengambil /weather/lisbon dan mengembalikan Weather.fromJson(jsonDecode(body))
buat future sekali di initState
FutureBuilder<Weather> menampilkan indikator pemuatan saat data dimuat, Could not load: dan error jika pemuatan gagal
dengan datanya, tampilkan Column berisi kota (ukuran 32), suhu dengan tanda derajat, 21° (ukuran 72, tebal), dan kondisi (ukuran 24)

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online