Project skeleton
- Flutter course
- Intermediate
- Lesson 61/99
- 4 min
Build the weather app skeleton and model.
The Weather model class
To hold weather data you define a Weather model class. Its fields are final and a fromJson factory constructor builds an object from JSON. This way you store the API response in a type-safe way.
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(),
);
}
}The Scaffold skeleton
The app screen is built on a Scaffold; the AppBar shows a title and the body displays the weather data. Even with an empty model, the skeleton is ready.
class WeatherScreen extends StatelessWidget {
const WeatherScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Hava Durumu')),
body: const Center(child: Text('Yükleniyor...')),
);
}
}Practice Define the Weather model
Define a Weather class with final String sehir and final double sicaklik fields. Add a fromJson factory constructor. In main, create an instance from the given Map and print its sehir field.
Starter code
// Weather sınıfını tanımla
// sehir ve sicaklik alanları final olsun
// fromJson fabrika kurucusunu ekle
void main() {
final m = {'sehir': 'İstanbul', 'sicaklik': 18.5};
// m'den Weather oluştur ve sehir'ini yazdır
}Sample solution
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(),
);
}
}
void main() {
final m = {'sehir': 'İstanbul', 'sicaklik': 18.5};
final w = Weather.fromJson(m);
print(w.sehir);
}Expected output
İstanbul
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What type should the sicaklik field be in the Weather model?
- Widget
- Future
- Color
- double Correct answer
Explanation: sicaklik can be a fractional number, so double is appropriate. Widget is for UI, Future is for async work, Color is for colors.
2 Convert the num value to double
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)____,
);
}
}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(),
);
}
}Explanation: A number from JSON may be a num; to assign it to a double field you convert with .toDouble().
3 Weather model and skeleton
| Term | Meaning |
|---|---|
class Weather |
Model class |
final double sicaklik |
Immutable field |
fromJson |
Factory constructor |
Scaffold |
Screen skeleton |