Zenn
🔖

【Flutter Widget of the Week #19】Tooltipを使ってみた

2022/10/30に公開
Flutter
初心者
tooltip
tech

はじめに

Flutter Widget of the Week #19 Tooltip についてまとめましたので、紹介します。
https://youtu.be/EeEfD5fI-5Q

Tooltip

Tooltip とはアイコンや画像などをタップしたり長押ししたときに、表示されるテキストメッセージのことです。
これにより、すぐには意味が分からない画像やコンテンツがあったとしても、ユーザーに意味が伝わるように情報を提供してくれます。
音声読み上げも行ってくれるので目の不自由な方にも効果的です。
では、サンプルを動かして使い方を見てみましょう。

Tooltip サンプルコード

API Document にあるサンプルを動かしてみましょう。
「Hover over the text to show a tooltip.」を長押しすると「I am a Tooltip」というテキストが表示されるようになります。
Tooltip サンプル実行画面
Tooltip サンプル実行画面

main.dart
class TooltipSample extends StatelessWidget {
  const TooltipSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: const Tooltip(
        message: 'I am a Tooltip',
        child: Text('Hover over the text to show a tooltip.'),
      ),
    );
  }
}

使い方としては、
情報を付加したいコンテンツを Tooltip widget でラップして、message プロパティに情報を指定します。
これだけで、Tooltip は機能します。

ドキュメントには他にもいくつかのサンプルがありますので、紹介していきます。

枠の形や表示時間をカスタマイズ

枠の形や表示時間をカスタマイズ
枠の形や表示時間をカスタマイズ

main.dart
class TooltipSample extends StatelessWidget {
  const TooltipSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      // 〜〜　ここから　〜〜
      child: Tooltip(
        message: 'I am a Tooltip',
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),
          gradient:
              const LinearGradient(colors: <Color>[Colors.amber, Colors.red]),
        ),
        height: 50,
        padding: const EdgeInsets.all(8.0),
        preferBelow: false,
        textStyle: const TextStyle(
          fontSize: 24,
        ),
        showDuration: const Duration(seconds: 2),
        waitDuration: const Duration(seconds: 1),
        child: const Text('Tap this text and hold down to show a tooltip.'),
      ),
      // 〜〜　ここまで　〜〜
    );
  }
}

Tooltip widget のプロパティで主に以下のような設定をしています。
　・　decoration プロパティで枠の色
　・　height プロパティで枠の縦幅
　・　padding プロパティで表示要素の内側に入れる余白の大きさ
　・　preferBelow プロパティを false にすることで長押しした widget の上にテキストが表示
　・　showDuration プロパティによって長押しを解除した後、２秒間 Tooltip を表示
　・　waitDuration　プロパティによってマウスポインターを widget に1秒置くと Tooltip が表示

message の代わりに richMessage を使う

message の代わりに richMessage を使う
message の代わりに richMessage を使う

main.dart
class TooltipSample extends StatelessWidget {
  const TooltipSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: const Tooltip(
        richMessage: TextSpan(  //← richMessage を使用
          text: 'I am a rich tooltip. ',
          style: TextStyle(color: Colors.red),
          children: <InlineSpan>[
            TextSpan(
              text: 'I am another span of this rich tooltip',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ],
        ),
        child: Text('Tap this text and hold down to show a tooltip.'),
      ),
    );
  }
}

richMessage を使うことで WidgetSpan を含む、任意のInlineSpanを指定することができるようになります。

Tooltip を手動で呼び出せるようにする

Tooltip を手動で呼び出せるようにする
Tooltip を手動で呼び出せるようにする

main.dart
class TooltipSample extends StatelessWidget {
  const TooltipSample({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    // 手動で動かすための key を設定
    final GlobalKey<TooltipState> tooltipkey = GlobalKey<TooltipState>();

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Tooltip(
          key: tooltipkey, // key　を指定
          triggerMode: TooltipTriggerMode.manual,
          showDuration: const Duration(seconds: 1),
          message: 'I am a Tooltip',
          child: const Text('Tap on the FAB'),
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // ボタンをタップしたら Tooltip を表示
          tooltipkey.currentState?.ensureTooltipVisible();
        },
        label: const Text('Show Tooltip'),
      ),
    );
  }
}

key を設定することで、ボタンをタップしたら Tooltip を表示するような機能の作成ができます。

Tooltip のプロパティについて

Tooltip にはプロパティがいくつかありますので、一部紹介します。

(new) Tooltip Tooltip({
  Key? key,
  String? message,
  InlineSpan? richMessage,
  double? height,
  EdgeInsetsGeometry? padding,
  EdgeInsetsGeometry? margin,
  double? verticalOffset,
  bool? preferBelow,
  bool? excludeFromSemantics,
  Decoration? decoration,
  TextStyle? textStyle,
  TextAlign? textAlign,
  Duration? waitDuration,
  Duration? showDuration,
  TooltipTriggerMode? triggerMode,
  bool? enableFeedback,
  void Function()? onTriggered,
  Widget? child,
})

①message

Tooltipに表示するテキストを指定する
型は String 型

②clipBehavior

Tooltipに表示するリッチテキストを指定する
型は InlineSpan 型

③height

Tooltipの子要素の縦幅を設定する
型は double 型

④preferBelow

Tooltipをデフォルトで widget の下に表示するかどうかを設定する
型は bool 型

⑤waitDuration

マウスポインターを widget に何秒置くと Tooltip が表示されるかを指定する
型は Duration 型

⑥showDuration

長押しが解除された後やタップが解除された後、またはマウスポインターがウィジェットを離れた後、Tooltipが表示される時間の長さを指定する
型は Duration 型

最後に

今回は Tooltip を紹介しました。アイコンや画像をたくさん使う現代。何のアイコンか何の画像か意味が伝わることでユーザーにとって使いやすいサービスになります。このくらい簡単であればアクセシビリティの向上のためにちょっと使ってみるのは良いかもですね。
次は #20 FittedBox です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/material/Tooltip-class.html

Discussion