Haptic Feedback in Flutter

Deepak Kumar

27 April 2023

So, what is Haptic Feedback in Flutter? Firstly, before start coding, we should know about haptic feedback. And why we use haptic feedback.

As we know, when a user taps on the screen and feels a reaction from the device. That reaction from the device is called haptic feedback.

Generally, haptic feedback alerts the users when some action is performed or some event is clicked.

Check our Flutter app development page.

Different types of Haptic Feedback in Flutter

HeavyImpact – Provides a haptic feedback corresponding a collision impact with a heavy mass
MediumImpact – Provides a haptic feedback corresponding a collision impact with a medium mass.
LightImpact – Provides a haptic feedback corresponding a collision impact with a light mass.
Vibrate – Provides vibration haptic feedback to the user for a short duration.
SelectionClick – Provides a haptic feedback indication selection changing through discrete values.

Steps to create Haptic Feedback in Flutter

First of all, we need to create three classes main.dart, home. dart and second.dart.

main.dart code

import 'package:flutter/material.dart';
import 'home.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
  debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

import 'package:flutter/material.dart';

import 'home.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

In this, we just created the root of the application using the stateless widget

We do not code here bcoz we don’t want to make our app’s main thread heavy.

Home.dart code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'second.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //"space" used for space between widgets
  final space = SizedBox(height: 55);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        title: Text("Haptic Feedback"),
        backgroundColor: Colors.indigo,
        elevation: 2,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(
                  "Press button for touch impact",
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                ),
                space,
                // Buttons wrapped in containers
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 12,
                  child: ElevatedButton(
                    child: Text("Heavy Impact"),
                    onPressed: () {
                      HapticFeedback.heavyImpact();
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondPage()));
                    },
                  ),
                ),
                space,
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 12,
                  child: ElevatedButton(
                    child: Text("Light Impact"),
                    onPressed: () {
                      HapticFeedback.lightImpact();
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondPage()));
                    },
                  ),
                ),
                space,
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 12,
                  child: ElevatedButton(
                    child: Text("Medium Impact"),
                    onPressed: () {
                      HapticFeedback.mediumImpact();
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondPage()));
                    },
                  ),
                ),
                space,
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 12,
                  child: ElevatedButton(
                    child: Text("Vibrate "),
                    onPressed: () {
                      HapticFeedback.vibrate();
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondPage()));
                    },
                  ),
                ),
                space,
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height / 12,
                  child: ElevatedButton(
                    child: Text("selectionClick "),
                    onPressed: () {
                      HapticFeedback.vibrate();
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => SecondPage()));
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'second.dart';

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

//"space" used for space between widgets

final space = SizedBox(height: 55);

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.greenAccent,

appBar: AppBar(

title: Text("Haptic Feedback"),

backgroundColor: Colors.indigo,

elevation: 2,

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

Text(

"Press button for touch impact",

style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),

space,

// Buttons wrapped in containers

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 12,

child: ElevatedButton(

child: Text("Heavy Impact"),

onPressed: () {

HapticFeedback.heavyImpact();

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => SecondPage()));

space,

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 12,

child: ElevatedButton(

child: Text("Light Impact"),

onPressed: () {

HapticFeedback.lightImpact();

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => SecondPage()));

space,

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 12,

child: ElevatedButton(

child: Text("Medium Impact"),

onPressed: () {

HapticFeedback.mediumImpact();

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => SecondPage()));

space,

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 12,

child: ElevatedButton(

child: Text("Vibrate "),

onPressed: () {

HapticFeedback.vibrate();

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => SecondPage()));

space,

Container(

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height / 12,

child: ElevatedButton(

child: Text("selectionClick "),

onPressed: () {

HapticFeedback.vibrate();

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => SecondPage()));

);

}

In this code, as you see I created a well-designed UI that contains buttons for performing haptic feedback.

Now when the user will tap on the button it gives a reaction. That reaction is called haptic feedback.

Second.dart code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Second Page"),),
      body: Center(
        child: Container(
          // Button to go back to home page
          child: ElevatedButton(child: Text("Back to Home"),onPressed: (){
            Navigator.pop(context);
          },),
        ),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("Second Page"),),

body: Center(

child: Container(

// Button to go back to home page

child: ElevatedButton(child: Text("Back to Home"),onPressed: (){

Navigator.pop(context);

},),

);

}

Overall, this is my third and the last screen of UI, and the only motive to create this page is to navigate from the home page to the second page when the user taps the button.

Here, the images of the screen