تطبيق الطقس: الآن
جزء من قسم البيانات والشبكة في رحلة 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)) - أنشئ المستقبل مرة واحدة في
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 عبر الإنترنت