אפליקציית מזג אוויר: שלושת הימים הבאים
חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 24 מתוך 27.
התשובה עבור עיר כוללת גם תחזית: רשימת JSON בתוך האובייקט, פריט אחד לכל יום.
"forecast": [
{"date": "2026-10-20", "condition": "Cloudy", "high": 22, "low": 15},
...
]קוראים רשימה בתוך אובייקט באותו אופן שבו קוראים רשימה בפני עצמה: מוציאים אותה באמצעות as List<dynamic>, ואז מפעילים map על כל פריט כדי להעביר אותו דרך fromJson משלו. בדקו את Weather.fromJson בתחתית הקובץ: הוא כבר עושה זאת, ולכן weather.forecast הוא List<DayForecast>.
final days = json['forecast'] as List<dynamic>;
forecast: days
.map((day) => DayForecast.fromJson(day as Map<String, dynamic>))
.toList(),לכל יום יש DateTime. DateFormat('EEEE') הופך אותו לשם המלא של יום השבוע, Tuesday. for בתוך הילדים של Column יוצר שורה לכל יום.
אתגר
בינונימתחת למזג האוויר הנוכחי, הציגו את שלושת הימים הבאים:
- ייבאו את
package:intl/intl.dart - אחרי
SizedBox(height: 32), הוסיפוRowאחד לכל יום: את היום בשבוע באמצעותDateFormat('EEEE')בתוךExpanded, ואז את הטמפרטורה הגבוהה והנמוכה בפורמט22° / 15° - הוסיפו לכל שורה ריווח פנימי של
32פיקסלים משמאל ומימין
נסו בעצמכם
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> {
late Future<Weather> _weather;
@override
void initState() {
super.initState();
_weather = loadWeather();
}
Future<Weather> loadWeather() async {
final body = await fetch('/weather/lisbon');
return Weather.fromJson(jsonDecode(body));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Weather')),
body: Center(
child: FutureBuilder<Weather>(
future: _weather,
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text('Could not load: ${snapshot.error}');
}
if (snapshot.hasData) {
return buildWeather(snapshot.data!);
}
return const CircularProgressIndicator();
},
),
),
);
}
Widget buildWeather(Weather weather) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(weather.city, style: const TextStyle(fontSize: 32)),
Text(
'${weather.temperature}°',
style: const TextStyle(fontSize: 72, fontWeight: FontWeight.bold),
),
Text(weather.condition, style: const TextStyle(fontSize: 24)),
],
);
}
}
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,
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה נתונים ורשת
3כשקריאות נכשלות
תפיסת שגיאות באמצעות tryזריקת שגיאהניקוי באמצעות finallyמצב השגיאה של FutureBuilderכפתור לניסיון חוזר6פרויקט: אפליקציית מזג אוויר
אפליקציית מזג אוויר: עכשיואפליקציית מזג אוויר: שלושת הימים הבאיםתרגלו בעצמכם: קומפיילר Flutter אונליין