2歩戻ったら2.5歩進みたい

関東で働くweb developerのブログ

PopupMenuButtonでいい感じのヒントボタンを実現する

Flutterで「お知らせとかヘルプみたいなのを出したいけど、SnackbarとかDialogほど押し出しすぎるしtooltipだと足りないんだよな〜〜〜〜〜〜」って時にこんな感じのボタンを作ったのでメモ。

f:id:canisterism:20210922215150g:plain

class HelpButton extends StatelessWidget {
  const HelpButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<Text>(
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8))),
      icon: const Icon(Icons.help_outline),
      itemBuilder: (context) => [
        PopupMenuItem<Text>(
          enabled: false,
          child: Text(
            '使い方がわからないかな?ほごしゃのひとに聞いてみよう!',
            style: Theme.of(context).textTheme.caption,
          ),
        )
      ],
    );
  }
}

PopupMenuButton自体は複数のメニューから選ばせる時のUIだけど、PopupMenuItemを1つだけ渡してenabled: falseにしてやるといい感じのヘルプダイアログになってくれる。 api.flutter.dev

ダイアログの位置や折り返しはFlutter側がいい感じにやってくれるので気にしなくていいもの嬉しいですね。

Material Designを眺めながらどれだったら実現できるか頭捻ってたら社のデザイナー氏がmenuで作れないですかね?って言ってくれたのを参考にしたら出来た)