Launch Club

Flutter Haptic Feedback Tutorial

Flutter

Published Dec 6, 2023

Marcus Ng

Marcus Ng

An easy way to make your Flutter apps feel polished is to add haptic feedback.

Haptic feedback is the vibration a user feels when performing an action (e.g. tapping a button, swiping through a carousel, etc.).

Although haptic feedback is not supported on all Android and iOS devices, it’s definitely still worth adding as it will improve the UX of your app and won’t have any impact on users who do not have haptic feedback supported devices.

The HapticFeedback class from flutter/services.dart has five different types of feedback vibrations:

  • HapticFeedback.heavyImpact()
  • HapticFeedback.lightImpact()
  • HapticFeedback.mediumImpact()
  • HapticFeedback.selectionClick()
  • HapticFeedback.vibrate()

To become familiar with how each of these vibrations feel, you can add these calls to an existing Flutter project and run the app on a physical device that supports haptic feedback.

Apple also has a helpful guide for understanding impact and selection vibrations.

“Impact haptics provide a physical metaphor you can use to complement a visual experience. For example, people might feel a tap when a view snaps into place or a thud when two heavy objects collide. Selection haptics provide feedback while the values of a UI element are changing.”

Choose the appropriate impact or selection haptic based on the action the user is taking in the app.

For example, if a user is scrolling through a PageView, you may want to add a selectionClick whenever the page changes:

import 'package:flutter/services.dart';

PageView.builder(
  controller: pageController,
  onPageChanged: (i) {
    HapticFeedback.selectionClick();
    // ...
  },
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return /* ... */ ;
  },
)

Flutter and Dart

made simple.

Everything you need to build production ready apps.

No spam. Just updates. Unsubscribe whenever.