אפליקציית מזג אוויר: עכשיו
חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 23 מתוך 27.
הגיע הזמן לבנות אפליקציה שלמה מהיחידה הזאת: אפליקציית מזג אוויר. במהלך חמשת השיעורים הבאים היא תציג את מזג האוויר בעיר כרגע, את התחזית לשלושת הימים הבאים, סמל לכל יום, מסך שגיאה עם אפשרות לנסות שוב ובורר ערים.
ה־API לתרגול מכיר שלוש ערים. /weather/lisbon מחזיר:
{
"city": "Lisbon",
"temperature": 21,
"condition": "Sunny",
"forecast": [ ... ]
}מתחילים בחלק העליון של המסך ובשלבים שכבר למדת: מחלקה לנתונים, פונקציה שמביאה ומפענחת אותם, Future שנוצר פעם אחת בתוך initState, ו־FutureBuilder עם שלושת המצבים שלו. המחלקות Weather ו־DayForecast בתחתית הקובץ נכתבו עבורך, יחד עם fromJson שלהן. בשיעור הזה יוצג מזג האוויר הנוכחי; התחזית תגיע בשיעור הבא.
אתגר
קשההצג את מזג האוויר בליסבון:
loadWeatherמביאה את/weather/lisbonומחזירה אתWeather.fromJson(jsonDecode(body))- צור את ה־future פעם אחת בתוך
initState FutureBuilder<Weather>מציג מחוון טעינה בזמן הטעינה, אתCould not load:ואת השגיאה במקרה של כישלון- עם הנתונים,
Columnשל העיר (גודל 32), הטמפרטורה עם סימן מעלות,21°(גודל 72, מודגש), ומצב מזג האוויר (גודל 24)
נסו בעצמכם
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> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Weather')),
body: const Center(
child: Text('The weather goes here'),
),
);
}
}
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 אונליין