子コンポーネントにコールバックを渡す

CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 2/27。

値は親から子へ渡ります。タップは逆方向に作用します。ボタンは子にありますが、ボタンが変更するスコアは親に属しています。

親は関数を子に渡し、子がそれを呼び出します。パラメーターを持たず、何も返さない関数の型は 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'));
  }
}

通常どおり、親が setState を使ってタップ時の処理を記述します。

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

onPressed: onAdd と書き、onAdd() とは書きません。前者は後で使うために関数をボタンに渡します。後者はビルド中にすぐ関数を呼び出し、その戻り値を渡します。

チャレンジ

簡単

Add pointボタンはAddButtonウィジェット内にありますが、まだ何もしません。

コンストラクターで設定するfinal VoidCallback onAddフィールドをAddButtonに追加します。
ボタンのonPressedとして使用します。
ページで、setState内でscoreに1を加算する関数を渡します。

自分で試してみよう

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