Menu
CoddyTech
flag Ar iconالعربيةdown icon

تطبيق الطقس: الآن

جزء من قسم البيانات والشبكة في رحلة Flutter على Coddy. الدرس 23 من 27.

حان وقت إنشاء تطبيق كامل انطلاقًا من هذا القسم: تطبيق للطقس. خلال الدروس الخمسة التالية، سيعرض الطقس في مدينة الآن، وتوقعات الأيام الثلاثة القادمة، وأيقونة لكل يوم، وشاشة خطأ تتضمن خيار «حاول مرة أخرى»، ومُحدِّدًا للمدينة.

تعرف واجهة API التدريبية ثلاث مدن. يُرجع /weather/lisbon:

{
  "city": "Lisbon",
  "temperature": 21,
  "condition": "Sunny",
  "forecast": [ ... ]
}

ابدأ بأعلى الشاشة، وبالخطوات التي تعرفها: صنفًا للبيانات، ودالة تجلبها وتفك ترميزها، وFuture يُنشأ مرة واحدة في initState، وFutureBuilder بحالاته الثلاث. صنفا Weather وDayForecast الموجودان في أسفل الملف مكتوبان لك، مع الدالة fromJson الخاصة بهما. يعرض هذا الدرس الطقس الحالي؛ أما التوقعات فتأتي في الدرس التالي.

challenge icon

التحدي

صعب

اعرض طقس لشبونة:

  • تجلب 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,
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس البيانات والشبكة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت