Özet - Hava durumu uygulaması

Tüm parçaları birleştirip çalışan hava durumu uygulamasını tamamlarsın.

Tüm parçaları birleştirme

Çalışan hava durumu uygulaması üç parçayı birleştirir: http.get ile API'ye istek atar, jsonDecode ve fromJson ile yanıtı modele çevirir, FutureBuilder ile yükleme/hata/veri durumlarını gösterir. Her parça ayrı bir sorumluluk taşır.

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

FutureBuilder<Weather>(
  future: havaGetir(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return const Text('Hata');
    }
    return Text(snapshot.data!.sehir);
  },
)

Uygulama havaGetir fonksiyonu

havaGetir adında async fonksiyon yaz: http.get ile Uri.parse(url) adresine istek at, jsonDecode(response.body) ile Map'e çevir, Weather.fromJson ile modele çevirip döndür. main içinde url'yi yazdır.

Örnek çözümü göster

import 'dart:convert';
import 'package:http/http.dart' as http;

class Weather {
  final String sehir;
  final double sicaklik;

  Weather(this.sehir, this.sicaklik);

  factory Weather.fromJson(Map<String, dynamic> json) {
    return Weather(
      json['sehir'] as String,
      (json['sicaklik'] as num).toDouble(),
    );
  }
}

const url = 'https://api.example.com/hava/istanbul';

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

void main() {
  print(url);
}

Kendini test et

Hava durumu uygulamasında veri akışı hangi sırayla işler?
- jsonDecode → http.get → FutureBuilder → fromJson
- http.get → jsonDecode → fromJson → FutureBuilder
- fromJson → FutureBuilder → http.get → jsonDecode
- FutureBuilder → fromJson → jsonDecode → http.get
Cevabı göster

http.get → jsonDecode → fromJson → FutureBuilder — Önce http.get ile istek atılır, yanıt jsonDecode ile Map'e, sonra fromJson ile modele çevrilir, son olarak FutureBuilder veriyi arayüzde gösterir. Diğer sıralar mantıksızdır.

İsteği at ve modele çevir

Future<Weather> havaGetir() async {
  final response = await ____;
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

Cevabı göster

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

Özet parçaları

http.get

ağ isteği
jsonDecode

dizeyi nesneye çevirme
Weather.fromJson

tip güvenli nesne
FutureBuilder

async arayüz yönetimi

Sıradaki ders: GoRouter nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler