【Flutter】Tooltipの使い方｜長押しでツールチップを表示

2023年2月22日

Flutterのウィジェット「Tooltip」の使い方を紹介します。

「Tooltip」では任意のウィジェットを長押ししてツールチップ（ツールヒント）を表示させることができます。

Tooltipの使い方

「TextButton」の基本的な使い方は下記コードの通りです。

「child」でボタン上に表示されるウィジェットを指定し、「onPressed」でボタンがクリックされた時の処理を書きます。

Tooltip(
  message: 'Like',
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの高さを変更する

ツールチップの高さを変更するには「height」を使用します。

Tooltip(
  message: 'Like',
  height: 50,
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの表示位置を上にする

ツールチップの表示を上側にするには「preferBelow」を「false」にします。

Tooltip(
  message: 'Like',
  preferBelow: false,
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの表示位置を調整する

ツールチップの表示位置を調整するには「verticalOffset」を使用します。

先ほど紹介した「preferBelow」が「true」の場合は正数を渡すと下側、負数の場合は上側にツールチップを移動できます。

Tooltip(
  message: 'Like',
  verticalOffset: 50,
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの表示時間を変更する

ツールチップの表示時間を変更するには「showDuration」を使用します。

「showDuration」には「Duration」を渡して表示時間を指定できます。

Tooltip(
  message: 'Like',
  showDuration: Duration(seconds: 3),
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの表示文字を装飾する

ツールチップの表示文字を装飾するには「textStyle」を使用できます。

Tooltip(
  message: 'Like',
  textStyle: TextStyle(
    fontSize: 30,
    color: Colors.white,
  ),
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

ツールチップの背景色を変更する

ツールチップの背景色を変更するには「decoration」＞「BoxDecoration」の「color」で指定できます。

Tooltip(
  message: 'Like',
  decoration: BoxDecoration(color: Colors.orange),
  child: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
),

以上です。