Zenn
☝️

【メモ】Flutterで触覚フィードバックを実装する方法

2023/04/19に公開
Flutter
iOS
tech

Flutterで触覚フィードバックを実装する方法

実装経緯

今作ってるアプリで「Twitterアプリでタイムラインを更新する時や、Gmailアプリで受信トレイを更新する時とかにスマホがちょっと振動する体験が欲しい」と言われて、僕のiPhoneだとそれが感じなかったので、それなんですか？というところから始まり。
調べると、以下の設定をONにするとその体験を得られる。(OFFにしたつもりなかったけど僕の設定はOFFだった)

設定アプリ > サウンドと触覚 > システムの触覚をON

この体験を「触覚フィードバック」というらしい。

触覚フィードバックとは

ChatGPT先生に聞いてみる

触覚フィードバックとは、デバイスやシステムからユーザーの手や指に対して、振動や圧力などの物理的な刺激を与えることで、操作の結果や状態を伝える技術のことです。

例えば、スマートフォンのタッチパネルでアプリを操作する際に、ボタンをタップした際に振動が発生するような場合があります。この振動は、ボタンが押されたことを視覚的に確認することができない場合に、ユーザーに操作が成功したことを知らせるためのものです。

Flutterでの実装方法

HapticFeedbackクラスを用いて実装できる

https://api.flutter.dev/flutter/services/HapticFeedback-class.html

import 'package:flutter/services.dart';

...

// ボタンイベント
onPressed: () {
  // 触覚フィードバック
  HapticFeedback.heavyImpact();
  HapticFeedback.lightImpact();
  HapticFeedback.mediumImpact(); // Twitterとかの更新はこれが近かった
  HapticFeedback.selectionClick();
  HapticFeedback.vibrate();
},
...

Discussion