Kirim Data ke Layar

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 21 dari 33.

Layar detail menampilkan satu item, yaitu item yang kamu ketuk. Layar ini adalah widget, jadi data diterimanya seperti widget lainnya: melalui konstruktornya.

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

  final Planet planet;
  ...
}

Layar ini menyimpan planet dalam field final dan membacanya di build: Text(planet.name). super.key adalah key yang bisa dimiliki setiap widget. Letakkan key ini di urutan pertama.

Saat kamu membuka layar tersebut, teruskan planet dari baris yang diketuk:

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

Satu class layar kini bisa menampilkan planet apa pun. Daftarnya menentukan planet yang ditampilkan.

Tantangan

Sedang

Ketuk planet mana pun: layar selalu menampilkan Mercury. Buat PlanetScreen menampilkan planet yang diketuk:

berikan field final Planet planet; dan parameter required this.planet
tampilkan planet.name di app bar dan Mars has 2 moons di bagian tengah (dengan nama planet dan jumlah bulannya)
teruskan planet yang diketuk saat kamu mendorongnya

Coba sendiri

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});
}