Summary - Weather app
- Flutter course
- Intermediate
- Lesson 65/99
- 4 min
Combine all parts and finish a working weather app.
Combining all parts
A working weather app combines three parts: it sends a request to the API with http.get, turns the response into a model with jsonDecode and fromJson, and shows loading/error/data states with FutureBuilder. Each part has its own responsibility.
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);
},
)Practice The havaGetir function
Write an async function named havaGetir: send a request to Uri.parse(url) with http.get, decode response.body into a Map with jsonDecode, and return a model built with Weather.fromJson. In main, print the url.
Starter code
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
}Sample solution
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);
}Expected output
https://api.example.com/hava/istanbul
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 In what order does data flow in the weather app?
- jsonDecode → http.get → FutureBuilder → fromJson
- http.get → jsonDecode → fromJson → FutureBuilder Correct answer
- fromJson → FutureBuilder → http.get → jsonDecode
- FutureBuilder → fromJson → jsonDecode → http.get
Explanation: First a request is sent with http.get, the response is decoded into a Map with jsonDecode, then into a model with fromJson, and finally FutureBuilder displays it. The other orders are illogical.
2 Send the request and convert to a model
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);
}Explanation: The request is sent with http.get(Uri.parse(url)). post is a different request, jsonDecode does not take a URL, and an empty http.get is incomplete.
3 Summary parts
| Term | Meaning |
|---|---|
http.get |
Network request |
jsonDecode |
String to object conversion |
Weather.fromJson |
Type-safe object |
FutureBuilder |
Async UI management |