値を送るコールバック

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

コールバックは値を上位に返すことができます。以下のサイズ選択には3つのボタンがあり、ページはどのボタンがタップされたかを知る必要があります。

コールバックにパラメーターを渡します。型 void Function(String) は、String を受け取り、何も返さない関数です。

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

各ボタンは呼び出しを小さな関数 () => onPick('S') で包んでいるため、ビルド中ではなくタップ時に実行されます。親ウィジェットは値をパラメーターとして受け取り、それを保持します。

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

Flutterには同じ型を表す短い名前があります。それが ValueChanged<String> です。多くの組み込みウィジェットで使われており、たとえば TextField の onChanged がそうです。

チャレンジ

中級

サイズボタンが動作するようにしましょう：

SizePickerにフィールドfinal void Function(String) onPickを追加し、コンストラクターで設定します。
各ボタンがそれぞれの文字を指定してonPickを呼び出すようにします。
ページに選択したサイズを表示します：Size: S、Size: MまたはSize: L。

自分で試してみよう

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