값을 전달하는 콜백

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 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')),
      ],
    );
  }
}