Implement vibration with Flutter

Vibration in Flutter

This is meant to be a real quick guide on how to implement vibrations on iOS and Android mobile devices, using Flutter.

Before we jump into it… expect that vibrations will work in a different way on Android vs iOS. So, test the heck out of it before rolling out your app.

How will the demo app look like?

Flutter — Vibrate example app

Here is what you need to do

Just go ahead and create a new Flutter project and replace the code in main.dart with the following:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // we need this for the vibrations
import 'dart:io'; // we need this for the sleep method

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vibrate Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VibrateHomepage(),
    );
  }
}

class VibrateHomepage extends StatefulWidget {
  VibrateHomepage({Key key}) : super(key: key);

  @override
  _VibrateHomepageState createState() => _VibrateHomepageState();
}

class _VibrateHomepageState extends State<VibrateHomepage> {
  _PatternVibrate() {
    HapticFeedback.mediumImpact();

    sleep(
      const Duration(milliseconds: 200),
    );

    HapticFeedback.mediumImpact();

    sleep(
      const Duration(milliseconds: 500),
    );

    HapticFeedback.mediumImpact();

    sleep(
      const Duration(milliseconds: 200),
    );
    HapticFeedback.mediumImpact();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: FlatButton(
                child: Text('HapticFeedback.vibrate()'),
                onPressed: () {
                  HapticFeedback.vibrate();
                },
                color: Colors.deepPurple[100],
              ),
            ),
            Expanded(
              child: FlatButton(
                child: Text('HapticFeedback.selectionClick()'),
                onPressed: () {
                  HapticFeedback.selectionClick();
                },
                color: Colors.deepPurple[200],
              ),
            ),
            Expanded(
              child: FlatButton(
                child: Text('HapticFeedback.lightImpact()'),
                onPressed: () {
                  HapticFeedback.lightImpact();
                },
                color: Colors.deepPurple[300],
              ),
            ),
            Expanded(
              child: FlatButton(
                child: Text('HapticFeedback.mediumImpact()'),
                onPressed: () {
                  HapticFeedback.mediumImpact();
                },
                color: Colors.deepPurple[400],
              ),
            ),
            Expanded(
              child: FlatButton(
                child: Text('HapticFeedback.heavyImpact()'),
                onPressed: () {
                  HapticFeedback.heavyImpact();
                },
                color: Colors.deepPurple[500],
              ),
            ),
            Expanded(
              child: FlatButton(
                child: Text('Pattern - heart beat'),
                onPressed: () {
                  _PatternVibrate();
                },
                color: Colors.deepPurple[600],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Now, let’s review what we have added in the code above related to our purpose… vibration.

We need this package import 'package:flutter/services.dart'; as it will add the class HapticFeedback to our code base, with its methods vibrate , lightImpact, mediumImpact, heavyImpact and selectionClick , each one of them with a different vibration intensity. I’ll not go deeper here but rather advice you to run the application at the end of tutorial and try all vibrations.

I’ve imported import ‘dart:io’; to avail of the the sleep method so we can create advanced vibration patterns. _PatternVibrate() function is creating an advanced pattern, similar to a heart beat… or at least I tried :)

Then, we have for each FlatButton widget an onPressed function that is calling HapticFeedback.vibrate();, HapticFeedback.selectionClick();, HapticFeedback.lightImpact();, HapticFeedback.mediumImpact(); and HapticFeedback.heavyImpact(); Each one of them is triggering a different type of vibration. Also, we have the last FlatButton widget calling our _PatternVibrate() function.

Update AndroidManifest.xml on Android.

To have the application working in Android you will need to add <uses-permission android:name="android.permission.VIBRATE" /> to all the AndroidManifest.xml files inside the <manifest> tag — arguably you might not really not need to add to all of them but for peace of mind, I’d say for this tutorial, add to all of them. You can find the AndroidManifest.xml files in {project root}/app/src/debug, {project root}/app/src/main and {project root}/app/src/profile. Also, on your Android device, you will need on enable Haptic Vibrations. In my case I did it in Settings -> Sounds and vibration -> Vibrations feedback and I an on Android 8. On your device might be different though.

NOTE: On older versions of iOS and Android you might not have all the vibrations available and also enabling vibration feedback might be done via different steps. I do not cover this here. The example here is tested on iOS 13 and Android 8.

Also, I’ve found out that while, all vibrations covered above work on iOS, some of them did not work at all on Android (at least on Android 8) so be advised once again to test out your application. Here is what did not work for me at all on Android: HapticFeedback.selectionClick(); and HapticFeedback.heavyImpact(); hopefully this will get working in the next Flutter versions.

Run you application and enjoy!

Now go ahead, hook you your device(s) and run the application. All you need to do, once the application is launched on your device, and you did the settings above, is to click all the buttons and observe the vibration pattern.

I hope you enjoyed the reading and that it was useful for you.

Do not hesitate to leave comments bellow on what you liked or you did not like so much, what you want to see more or just … clap and share if you found this article useful.