PopupMenuButtonでいい感じのヒントボタンを実現する
Flutterで「お知らせとかヘルプみたいなのを出したいけど、SnackbarとかDialogほど押し出しすぎるしtooltipだと足りないんだよな〜〜〜〜〜〜」って時にこんな感じのボタンを作ったのでメモ。
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で作れないですかね?って言ってくれたのを参考にしたら出来た)