Flutterでのtooltipの使い方

image

Flutterでのtooltipの使い方を説明していきます。
tooltipはwidgetの使い方のヒントに当たります。
TextFieldで言うところの、hintTextのようなものです。
この記事を読むことで、Tooltipウィジェットの使い方をマスターできます。

環境

  • Flutter 2.5.3
  • Dart 2.14.4

Tooltipとは何か

Tooltipを使用すれば、ユーザーがwidgetをタップ・ロングタップした際に、メッセージを表示することができるようになります。
ボタンやアイコンなどの補足説明を表示するものです。

tooltipの例

FlutterでのTooltipの使い道

Tooltip使う場面としては、以下のようなケースがあると考えられます。

  • ダイアログの閉じるボタンを長押しした時に、「閉じる」というボタン押下後の動作ヒントを表示する。
  • ヘルプアイコンをタップした時に、ヒントとなるテキストを表示する。

Tooptipの実装例

以下のようなシンプルなボタンにヘルプアイコンがついているUIの実装例をご紹介します。

tooltipのUI例

ヘルプアイコンとTooltipのカスタマイズ例

?アイコンをタップした時に、メッセージが出てくるというwidgetを作成してみました。

tooltipのでヘルプマークを実装

Tooltip(
  message: 'ヘルプボタンだよ。', //表示するメッセージ
  height: 100, //吹き出しの高さ 
  padding: const EdgeInsets.all(20), //吹き出しのpadding
  margin: const EdgeInsets.all(10), //吹き出しのmargin
  verticalOffset: 20, //childのwidgetから垂直方向にどれだけ離すか
  preferBelow: true, //メッセージを子widgetの上に出すか下に出すか
  textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //メッセージの文字スタイル
  decoration:
      BoxDecoration(color: Colors.grey.shade300, borderRadius: BorderRadius.all(Radius.circular(100))),//吹き出しの形や色の調整
  waitDuration: const Duration(seconds: 3), //ホバーしてからどれくらいでtoolTipが見えるか(スマホでは使用することはない)
  showDuration: const Duration(milliseconds: 1500),  //何秒間メッセージを見せるか(タップを終えた後から)
  triggerMode: TooltipTriggerMode.tap, //どのような条件でメッセージを表示するか(ここではタップした際にしている)
  enableFeedback: true, //メッセージが表示された際に何かしらのフィードバックがあるかどうか(例: androidならバイブレーション)
  child: Icon(
    CupertinoIcons.question_circle,
    color: Colors.grey,
    size: 30,
  ))

Flutterのversionが古いと、triggerMode,enableFeedbackというプロパティがないかもしれません。

Tooltipを使用した閉じるボタン付きのダイアログの実装例

×ボタンを長押しすると、「閉じる」というヒントが表示されるダイアログを作成してみました。

tooltipで閉じるボタン付きのダイアログを実装

SimpleDialog(
  contentPadding: const EdgeInsets.all(16),
  children: [
    Align(
      alignment: Alignment.centerRight,
      child: Tooltip(
              message: MaterialLocalizations.of(context).closeButtonTooltip,
              child: GestureDetector(
                      onTap: () {
                        Navigator.pop(context);
                               },
                      child: Icon(Icons.close, size: 30))),
         ),
    Text('テストダイアログです'),
    const SizedBox(height: 100)
            ],
          );

message: MaterialLocalizations.of(context).closeButtonTooltipのように、Flutter側でデフォルトのtooltipをいくつか用意してくれています。
閉じるボタンは一般的でわかりやすいですが、Tooltipをつけておくだけで、ユーザー体験を向上につながります。

Tooltipのサンプルコード全文

サンプルで作成したコード全文を以下に示します。

Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: () async {
                  await showDialog(
                      context: context,
                      builder: (context) {
                        return SimpleDialog(
                          contentPadding: const EdgeInsets.all(16),
                          children: [
                            Align(
                              alignment: Alignment.centerRight,
                              child: Tooltip(
                                  message: MaterialLocalizations.of(context).closeButtonTooltip,
                                  child: GestureDetector(
                                      onTap: () {
                                        Navigator.pop(context);
                                      },
                                      child: Icon(Icons.close, size: 30))),
                            ),
                            Text('テストダイアログです'),
                            const SizedBox(height: 100)
                          ],
                        );
                      });
                },
                child: const Icon(Icons.comment)),
            Tooltip(
                message: 'ヘルプボタンだよ。',
                height: 100,
                padding: const EdgeInsets.all(20),
                margin: const EdgeInsets.all(10),
                verticalOffset: 20,
                preferBelow: true,
                textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                decoration:
                    BoxDecoration(color: Colors.grey.shade300, borderRadius: BorderRadius.all(Radius.circular(100))),
                waitDuration: const Duration(seconds: 3),
                showDuration: const Duration(milliseconds: 1500),
                triggerMode: TooltipTriggerMode.tap,
                enableFeedback: true,
                child: Icon(
                  CupertinoIcons.question_circle,
                  color: Colors.grey,
                  size: 30,
                )),
          ],
        ),
      )
    );

まとめ

いかがでしたでしょうか。
Flutterのtooltipの使い方は理解できましたか。
しれっとボタンやアイコンに仕込んでおくだけで、ユーザーがアプリを使いこなす上でのヒントを提供できます。
プロジェクト内でtooltip付きのコンポーネントを用意しておくと良いかもしれません。
参考になれば幸いです。

参考

https://www.youtube.com/watch?v=EeEfD5fI-5Q

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More