Kirim State ke Komponen Anak

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 1 dari 27.

Sebuah aplikasi terdiri dari banyak widget, dan widget kecil sering membutuhkan nilai yang dimiliki widget yang lebih besar. Di sini, skor tersimpan di State halaman, tetapi papan yang menampilkannya adalah widget tersendiri.

Untuk meneruskan nilai ke bawah, berikan field final kepada child dan minta nilai itu di constructor:

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

Parent meneruskan nilainya setiap kali membuat child: ScoreBoard(score: score). Saat parent memanggil setState, parent membuatnya kembali, dan papan menerima angka baru.

Child tidak pernah mengubah nilai. Child menampilkan nilai yang diberikan kepadanya, dan parent tetap menjadi satu-satunya pemilik skor.

Tantangan

Mudah

Tombol +1 menghitung poin, tetapi papan selalu menampilkan Score: 0.

Beri ScoreBoard field final int score, yang ditetapkan oleh constructornya.
Buat teksnya menjadi Score: diikuti nilai tersebut.
Teruskan score milik halaman saat halaman membuat papan.

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online