Alt Bileşene Bir Callback Aktarma

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

Bir değer üst öğeden alt öğeye doğru gider. Dokunma ise ters yönde ilerler: düğme alt öğededir, ancak değiştirdiği puan üst öğeye aittir.

Üst öğe alt öğeye bir işlev verir ve alt öğe bu işlevi çağırır. Parametre almayan ve hiçbir değer döndürmeyen bir işlevin türü VoidCallback şeklindedir:

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

Üst öğe, her zamanki gibi setState kullanarak dokunmanın ne yapacağını yazar:

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

onPressed: onAdd yazın, onAdd() değil. İlkinde işlev, daha sonra kullanması için düğmeye verilir. İkincisinde işlev, oluşturma sırasında hemen çağrılır ve döndürdüğü değer aktarılır.

Görev

Kolay

Add point düğmesi AddButton bileşeninde bulunuyor ve henüz hiçbir şey yapmıyor.

AddButton bileşenine, kurucusu tarafından ayarlanan bir final VoidCallback onAdd alanı ekle.
Bunu düğmenin onPressed özelliği olarak kullan.
Sayfada, setState içinde score değerini 1 artıran bir işlev ilet.

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