はじめに

前回の記事で、タップでツールチップのメッセージの表示・非表示を行う方法を書いていきました。ただ、GestureDetectorで全体を囲んでタッチを検知する必要があったり、コードのネストも深くなったりするのでToolTipのカスタムウィジェットを作成して使用する方法を書いていきたいと思います。

Tooltipのカスタムウィジェット化

前回の記事と同様にGestureDetector内にTooltipを入れて、タップされたらTooltipのメッセージを表示させるようにします。

メッセージを表示するときに、オーバーレイを使用して画面全体に透明なウィジェットを表示するようにします。
Tooltipは画面のどこかをタップしたらメッセージを非表示にするようになっているので、透明なウィジェットがタップされたときにメッセージが非表示になります。タップされたら透明なウィジェットは不要になるので削除するようにします。

実装は以下のようになります。
透明なウィジェットを使用することでメッセージを表示しているかどうかのフラグも不要になりました。またカスタムウィジェットにしたことにより、Tooltipのカスタムウィジェットのみで使用することができるようになりました。

class TooltipIcon extends StatefulWidget {
  const TooltipIcon({Key? key}) : super(key: key);

  @override
  State<TooltipIcon> createState() => TooltipIconState();
}

class TooltipIconState extends State<TooltipIcon> {
  final _tooltipKey = GlobalKey<TooltipState>();
  OverlayEntry? _overlayEntry;

  void _coverWidget() {
    final overlayEntry = OverlayEntry(
      builder: (_) {
        return Stack(children: [
          Positioned.fill(
            child: GestureDetector(
              onTap: _onTapWidget,
              child: Container(
                color: Colors.transparent,
              ),
            ),
          ),
        ]);
      },
    );
    Overlay.of(context).insert(overlayEntry);
    _overlayEntry = overlayEntry;
  }

  void _onTapWidget() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Tooltip(
        key: _tooltipKey,
        triggerMode: TooltipTriggerMode.manual,
        message: 'ツールチップのメッセージです',
        child: const Icon(Icons.info_outline_rounded),
      ),
      onTap: () {
        _tooltipKey.currentState?.ensureTooltipVisible();
        _coverWidget();
      },
    );
  }
}

おわりに

今回は前回のツールチップのカスタムウィジェット化を行いました。
今後も、実際に試してみたことなどを書いていきたいと思います。