Özet - Hava durumu uygulaması
- Flutter kursu
- Orta seviye
- Ders 65/99
- 4 dk
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.
Başlangıç kodu
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';
// havaGetir fonksiyonunu yaz
// http.get ile isteği at, jsonDecode ile Map'e çevir, Weather.fromJson ile modele çevir
void main() {
// url'yi yazdır
}Örnek çözüm
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);
}Beklenen çıktı
https://api.example.com/hava/istanbul
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hava durumu uygulamasında veri akışı hangi sırayla işler?
- jsonDecode → http.get → FutureBuilder → fromJson
- http.get → jsonDecode → fromJson → FutureBuilder Doğru cevap
- fromJson → FutureBuilder → http.get → jsonDecode
- FutureBuilder → fromJson → jsonDecode → http.get
Açıklama: Ö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.
2 İ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);
}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);
}Açıklama: İstek http.get(Uri.parse(url)) ile atılır. post farklı istektir, jsonDecode URL almaz, boş http.get eksiktir.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
http.get |
ağ isteği |
jsonDecode |
dizeyi nesneye çevirme |
Weather.fromJson |
tip güvenli nesne |
FutureBuilder |
async arayüz yönetimi |