Kirim Callback ke Komponen Anak

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

Nilai mengalir dari induk ke anak. Ketukan mengalir ke arah sebaliknya: tombol ada di anak, tetapi skor yang diubahnya milik induk.

Induk memberikan fungsi kepada anak, lalu anak memanggilnya. Fungsi tanpa parameter yang tidak mengembalikan apa pun memiliki tipe VoidCallback:

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

Induk menulis tindakan yang dilakukan saat tombol diketuk, dengan setState seperti biasa:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

Tulis onPressed: onAdd, bukan onAdd(). Cara pertama memberikan fungsi kepada tombol untuk dipanggil nanti. Cara kedua langsung memanggilnya saat membangun, lalu meneruskan nilai yang dikembalikannya.

Tantangan

Mudah

Tombol Add point berada di widget AddButton, dan tombol itu belum melakukan apa pun.

Beri AddButton field final VoidCallback onAdd, yang ditetapkan oleh konstruktornya.
Gunakan field tersebut sebagai onPressed tombol.
Di halaman, berikan fungsi yang menambahkan 1 ke score di dalam setState.

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: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}

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