Callback yang Mengirim Nilai

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

Callback dapat membawa nilai kembali ke pemanggilnya. Pemilih ukuran di bawah memiliki tiga tombol, dan halaman perlu mengetahui tombol mana yang diketuk.

Berikan callback sebuah parameter. Tipe void Function(String) adalah fungsi yang menerima String dan tidak mengembalikan apa pun:

class SizePicker extends StatelessWidget {
  const SizePicker({super.key, required this.onPick});

  final void Function(String) onPick;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => onPick('S'),
      child: Text('S'),
    );
  }
}

Setiap tombol membungkus pemanggilan dalam fungsi kecil, () => onPick('S'), sehingga fungsi itu berjalan saat tombol diketuk, bukan selama proses build. Komponen induk menerima nilai sebagai parameter dan menyimpannya:

SizePicker(
  onPick: (picked) {
    setState(() {
      size = picked;
    });
  },
)

Flutter memiliki nama singkat untuk tipe yang sama: ValueChanged<String>. Banyak widget bawaan menggunakannya, seperti onChanged pada TextField.

Tantangan

Sedang

Buat tombol ukuran berfungsi:

Beri SizePicker sebuah field final void Function(String) onPick, yang ditetapkan oleh konstruktornya.
Buat setiap tombol memanggil onPick dengan hurufnya sendiri.
Di halaman, tampilkan ukuran yang dipilih: Size: S, Size: M atau Size: L.

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> {
  String size = 'M';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('T-shirt')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Size: $size', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const SizePicker(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(onPressed: () {}, child: const Text('S')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('M')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('L')),
      ],
    );
  }
}

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