🐶

【Flutter】コンポーネント化したメニューからイベントを受け取る

2022/07/20に公開約1,400字

PopupMenuButtonをコンポーネント化して、メニューを選択したときのイベントを取得してみました。

VoidCallbackで、イベントを受け取るようにします。

メニューの名前、処理を持たせたクラス

class MenuItemStrategy {
  final String itemName;
  final VoidCallback onClicked;

  MenuItemStrategy(this.itemName, this.onClicked);
}

class FirstItem extends MenuItemStrategy {
  FirstItem(VoidCallback callback) : super("First", callback);
}

class SecondItem extends MenuItemStrategy {
  SecondItem(VoidCallback callback) : super("Second", callback);
}

PopupMenuButtonを共通化したクラス

import 'package:flutter/material.dart';

class MenuWrapper extends PopupMenuButton<MenuItemStrategy> {
  MenuWrapper({
     List<MenuItemStrategy> items,
  }) : super(
          itemBuilder: (_) {
            return items.map((item) => _Item(item: item)).toList();
          },
          onSelected: (MenuItemStrategy item) => item.onClicked(),
        );
}

class _Item extends PopupMenuItem<MenuItemStrategy> {
  _Item({
     MenuItemStrategy item,
  }) : super(value: item, child: Text(item.itemName));
}

Menuを表示するクラス。AppBar上にメニューを表示する想定


Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      ...
      actions: [
        MenuWrapper(
          items: [
	    // アイテムをクリックしたときに実行したい処理を渡す
            FirstItem(() => perform()),
            SecondItem(() => perform())
          ],
        )
      ],
    ),
    ...
  );
}

// 何かしらの処理
void perform() {}

Discussion

ログインするとコメントできます