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

お知らせ

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

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

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

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (113)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (9)Firebase (7)riverpod (6)React (6)ChatGPT (5)vscode (5)デザイン (5)新卒 (4)就活 (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)コード生成 (1)GitHub Copilot (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)ヒーター (1)作業効率 (1) (1)Flutter実践開発 (1) (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)VRChat (1)API (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)FlutterFlow (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

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

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

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

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More