Değer Gönderen Callback’ler

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 3 / 27.

Bir geri çağırma, bir değeri üst bileşene geri iletebilir. Aşağıdaki beden seçicide üç düğme var ve sayfanın hangisine dokunulduğunu bilmesi gerekiyor.

Geri çağırmaya bir parametre ver. void Function(String) türü, bir String alan ve hiçbir şey döndürmeyen bir fonksiyondur:

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

Her düğme, çağrıyı küçük bir fonksiyonun içine alır: () => onPick('S'); böylece çağrı oluşturma sırasında değil, dokunulduğunda çalışır. Üst bileşen değeri bir parametre olarak alır ve saklar:

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

Flutter'da aynı türün kısa bir adı vardır: ValueChanged<String>. TextField bileşeninin onChanged özelliği gibi birçok yerleşik bileşen bunu kullanır.

Görev

Orta

Beden düğmelerini çalışır hâle getir:

SizePicker için, kurucusu tarafından ayarlanan final void Function(String) onPick alanını ekle.
Her düğmenin kendi harfini onPick işlevine göndermesini sağla.
Sayfada seçilen bedeni göster: Size: S, Size: M veya Size: L.

Kendin dene

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