はじめに

今回はToolTipのメッセージの表示・非表示をアイコンタップで行う方法について書いていきます。※モバイル端末で検証
ToolTipをデフォルトで使用した場合、長押ししないとメッセージが出てきませんでした。できれば、アイコンをタップしてメッセージの表示・非表示をしたいので、その方法を考えて記載しています。

ToolTipの表示・非表示の処理について

ToolTipの表示・非表示をアイコンタップで行うには以下のような実装をすると実現しました。

Widget build(BuildContext context) {
    GlobalKey<TooltipState> key = GlobalKey<TooltipState>();
    bool isTooltipVisible = false;
    return GestureDetector(
      onTap: () {
        // 画面外をタップしたらフラグをfalseにする
        isTooltipVisible = false;
      },
      child: Container(
        color: Colors.white,
        child: Center(
          child: GestureDetector(
            onTap: () {
              isTooltipVisible = !isTooltipVisible;
              if (isTooltipVisible) {
                // ensureTooltipVisibleを呼ぶと、Tooltipが表示される
                key.currentState?.ensureTooltipVisible();
              }
            },
            child: Tooltip(
              key: key,
              message: "ツールチップのメッセージです",
              // manualを指定すると、Tooltipの表示を制御できる
              // ensureTooltipVisibleを呼ぶと、Tooltipが表示される
              triggerMode: TooltipTriggerMode.manual,
              child: const Icon(Icons.info_outline_rounded),
            ),
          ),
        ),
      ),
    );
  }

• ToolTipでtriggerModeをTooltipTriggerMode.manualにします。そうするとensureTooltipVisible()でメッセージの処理を制御することができます。

• アイコンタップでensureTooltipVisible()を実行するようにしています。実行するための表示用フラグを準備しています。

• 表示用フラグは画面の何処かをタップするか、アイコンをタップすることで変化します。

おわりに

今回はToolTipのメッセージ表示・非表示の実装について書いていきました。とりあえずの実装なので、もっといい方法がある可能性があります。実装方法についてはもう少し調べていきたいと思います。