Flutter - Using HapticFeedback Examples

This tutorial shows you how to trigger haptic feedback in Flutter which works on Android and iOS.

While a user is interacting with a mobile application and a certain event occurs, you may need to trigger a haptic feedback. If you're using Flutter, it's very easy to do it. You only need to invoke a static method provided by Flutter and Flutter already handles how to trigger the feedback on Android and iOS.

Using HapticFeedback Service

Flutter has a HapticFeedback service that contains several static methods, each for different types. There are five haptic feedback types supported by Flutter: vibrate, lightImpact, mediumImpact, heavyImpact, and selectionClick. The differences between those feedback types are going to be explained below. Those static methods return Future<void>. You only need to invoke one of the static methods to trigger haptic feedback and Flutter already handles the behavior on Android and iOS.

Using HapticFeedback.vibrate

HapticFeedback.vibrate is used to create haptic feedback vibration for a short duration. On Android, it uses HapticFeedbackConstants.LONG_PRESS which simulates a long press response. On iOS, it uses kSystemSoundID_Vibrate, the system's default vibration value.

  HapticFeedback.vibrate();

Using HapticFeedback.lightImpact

This is used to create a haptic feedback for a collision impact with a light mass. On Android, it uses HapticFeedbackConstants.VIRTUAL_KEY. On iOS, it only supports version 10 and above and it uses UIImpactFeedbackGenerator with UIImpactFeedbackStyleLight.

  HapticFeedback.lightImpact();

Using HapticFeedback.mediumImpact

This is used to create a haptic feedback for a collision impact with a medium mass. On Android, it uses HapticFeedbackConstants.KEYBOARD_TAP. On iOS, it only supports version 10 and above and it uses UIImpactFeedbackGenerator with UIImpactFeedbackStyleMedium.

  HapticFeedback.mediumImpact();

Using HapticFeedback.heavyImpact

This is used to create a haptic feedback for a collision impact with a heavy mass. On Android, it only supports API levels 23 and above and it uses HapticFeedbackConstants.CONTEXT_CLICK. On iOS, it only supports version 10 and above and it uses UIImpactFeedbackGenerator with UIImpactFeedbackStyleHeavy.

  HapticFeedback.heavyImpact();

Using HapticFeedback.selectionClick

This is used to create a haptic feedback for a collision impact with a heavy mass. On Android, it uses HapticFeedbackConstants.CLOCK_TICK. On iOS, it only supports version 10 and above and it uses UISelectionFeedbackGenerator.

  HapticFeedback.selectionClick();

Full Code

Below is the full code example for triggering haptic feedback in Flutter.

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _HapticFeedbackExample(),
      );
    }
  }
  
  class _HapticFeedbackExample extends StatelessWidget {
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: Column(
            children: [
              RaisedButton(
                child: Text('Vibrate'),
                onPressed: () {
                  HapticFeedback.vibrate();
                },
              ),
              RaisedButton(
                child: Text('Light Impact'),
                onPressed: () {
                  HapticFeedback.lightImpact();
                },
              ),
              RaisedButton(
                child: Text('Medium Impact'),
                onPressed: () {
                  HapticFeedback.mediumImpact();
                },
              ),
              RaisedButton(
                child: Text('Heavy Impact'),
                onPressed: () {
                  HapticFeedback.heavyImpact();
                },
              ),
              RaisedButton(
                child: Text('Selection Click'),
                onPressed: () {
                  HapticFeedback.selectionClick();
                },
              ),
            ],
          ),
        ),
      );
    }
  }