화면에 데이터 보내기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 21번째.

세부 정보 화면에는 하나의 항목, 즉 탭한 항목이 표시됩니다. 화면은 위젯이므로 다른 위젯과 마찬가지로 생성자를 통해 데이터를 받습니다.

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

이제 하나의 화면 클래스가 어떤 행성이든 표시합니다. 어떤 행성을 표시할지는 목록이 결정합니다.

챌린지

중급

아무 행성이나 탭해도 화면에는 항상 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});
}