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

إرسال بيانات إلى شاشة

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 21 من 33.

تعرض شاشة التفاصيل عنصرًا واحدًا، وهو العنصر الذي نقرت عليه. الشاشة عنصر واجهة مستخدم، لذا تحصل على بياناتها كما تفعل أي أداة واجهة مستخدم: من خلال المُنشئ.

class PlanetScreen extends StatelessWidget {
  const PlanetScreen({super.key, required this.planet});

  final Planet planet;
  ...
}

تحتفظ الشاشة بالكوكب في حقل final وتقرأه في build: Text(planet.name). إن super.key هو المفتاح الذي يمكن لكل عنصر واجهة مستخدم استقباله؛ فأبقِه في البداية.

عندما تدفع الشاشة إلى المكدس، مرّر إليها الكوكب الخاص بالصف الذي نُقر عليه:

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => PlanetScreen(planet: planet)),
  );
},

يمكن لفئة شاشة واحدة الآن عرض أي كوكب. وتحدد القائمة أيّها سيُعرض.

challenge icon

التحدي

متوسط

اضغط على أي كوكب: تعرض الشاشة دائمًا Mercury. اجعل PlanetScreen تعرض الكوكب الذي تم الضغط عليه:

  • أضف إليها حقلًا final Planet planet; ومعاملًا required this.planet
  • اعرض planet.name في شريط التطبيق، وMars has 2 moons (مع اسم الكوكب وعدد أقماره) في المنتصف
  • مرّر الكوكب planet الذي تم الضغط عليه عند الانتقال إليه

جرّب بنفسك

import 'package:flutter/material.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: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  final List<Planet> planets = const [
    Planet(name: 'Mercury', moons: 0),
    Planet(name: 'Venus', moons: 0),
    Planet(name: 'Earth', moons: 1),
    Planet(name: 'Mars', moons: 2),
    Planet(name: 'Jupiter', moons: 95),
    Planet(name: 'Saturn', moons: 146),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Planets')),
      body: ListView(
        children: [
          for (Planet planet in planets)
            ListTile(
              title: Text(planet.name),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const PlanetScreen()),
                );
              },
            ),
        ],
      ),
    );
  }
}

class PlanetScreen extends StatelessWidget {
  const PlanetScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mercury')),
      body: const Center(
        child: Text('Mercury has 0 moons'),
      ),
    );
  }
}

class Planet {
  final String name;
  final int moons;

  const Planet({required this.name, required this.moons});
}
quiz iconاختبر نفسك

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

جميع دروس القوائم والشاشات

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