Menu
CoddyTech

שליחת נתונים למסך

חלק מהיחידה רשימות ומסכים במסלול ה-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 אונליין