Flutter의 명명된 콜백 ValueChanged

동기

잠시 쓰지 않으면 곧 잊어 버리기 때문에.

이전에 아래의 VoidCallback 기사를 썼는데, 잊기 어려워진 감각이 있거나,

Web상에 있으면 어디서나 참조할 수 있으므로 편리하다고 느끼고 있습니다.

사용 예

Flutter 2.0.1에서 작동 확인했습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ValueChanged Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

/// ページ
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'ValueChanged',
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
      // body: _List(),
      body: _Body(),
    );
  }
}

/// body
class _Body extends StatefulWidget {
  @override
  __BodyState createState() => __BodyState();
}

class __BodyState extends State<_Body> {
  /// フードリスト
  final foods = [
    '寿司',
    'ラーメン',
    'カレー',
    '焼肉',
    'ハンバーグ',
  ];

  var selectedFood = '食べ物を選択して下さい';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: foods.length,
            itemBuilder: (
              BuildContext context,
              int index,
            ) =>
                FoodListItem(
              title: foods[index],
              onTap: (title) => setState(
                () => selectedFood = title,
              ),
            ),
          ),
        ),
        SizedBox(height: 30),
        Text(selectedFood),
        SizedBox(height: 80),
      ],
    );
  }
}

// 食べ物のリストアイテム
class FoodListItem extends StatelessWidget {
  const FoodListItem({
    this.title,
    this.onTap,
  });

  final String title;
  final ValueChanged onTap;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: InkWell(
        // タップされた食べ物の名前を返す
        onTap: () => onTap(title),
        child: Container(
          height: 65,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.only(left: 15),
          child: Text(
            title,
          ),
        ),
      ),
    );
  }
}

탭한 음식이 화면 하단의 라벨에 표시됩니다.

메모

정의를 확인하면 같은 의미가 됩니다만,

final ValueChanged<String> onTap;

의 부분을, 이하와 같이 써 있는 것도 많습니다. 오히려 ValueChanged는 거의 보지 못할 정도로 느낍니다. (이것으로 잘 혼란 스럽습니다.)

final void Function(String) onTap;