Callback-функции, передающие значение

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 3 из 27.

Обратный вызов может передать значение родителю. В расположенном ниже виджете выбора размера есть три кнопки, и странице нужно знать, на какую из них нажали.

Добавь параметр в обратный вызов. Тип 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>. Его используют многие встроенные виджеты, например, свойство onChanged виджета TextField.

Задание

Средне

Сделайте кнопки выбора размера рабочими:

Добавьте в 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')),
      ],
    );
  }
}