Hi Guys, Welcome to Proto Coders Point. In this flutter article let’s explore how to implement vibration in flutter.
In Flutter, There are two method using which we can achieve vibration in flutter app
- Using Inbuilt HapticFeedBack Class.
- Using External Flutter Vibration library.
In this Article let’s checkout both ways to give vibration effect when user tap on screen or perform any event in flutter app.
By understanding how to use Haptic Feedback and the flutter vibration library, we’ll be able to create a more immersive and interactive experience for our flutter app users. We’ll be looking at different ways to use HapticFeedback to create vibrotactile feedback, as well as how to use the vibration library to create realistic vibration pattern.
Flutter Vibration Example – Video Tutorial
1. Flutter Vibration using inbuilt HapticFeedback Services
In flutter it is very easy to implement vibration all you need to do is import flutter services & use hapticFeedback class.
import 'package:flutter/services.dart';
Haptic feedback vibration methods
Allow access to haptic feedback on mobile devices using below method of HapticFeedback class.
- heavyImpact(): This provides a slight high vibration effect.
- lightImpact(): Here the vibration impact will be light mass.
- mediumImpact(): Medium Haptic Vibration mass.
- vibrate(): 500ms of Vibration.
- selectionClick(): discrete value vibration.
Flutter HapticFeedback Example
ElevatedButton(onPressed: () {
HapticFeedback.heavyImpact();
}, child: Text("Vibrate")),
2. Implementing Vibration in flutter using Vibration package
1. Add Dependencies Package
Open pubspec.yaml file & under dependencies section add it:
dependencies: vibration:
2. Import vibration.dart class
Where you want to implement vibration in app import the class example in main.dart.
import 'package:vibration/vibration.dart';
Properties of Flutter Vibration package:
- Vibration.hasVibrator(): Check if your mobile device has a vibrate in it.
- Vibration.hasCustomVibrationsSupport(): Used to check if your mobile vibrator motor has custom vibrate featue like: duration, vibration in pattern or intensities.
- Vibration.hasAmplitudeControl(): check if mobile has amplitude control in vibration effect.
How to use Flutter Vibration
By default the vibrate is of 500ms
ElevatedButton(onPressed: () {
Vibration.vibrate();
}, child: Text("Vibrate")),
Set duration for vibration
In below snippet, when use top on button the vibrator will vibrate for 2 sec.
ElevatedButton(onPressed: () {
Vibration.vibrate(duration: 2000);
}, child: Text("Vibrate")),
Pattern Vibration
ElevatedButton(onPressed: () {
Vibration.vibrate(
pattern: [ 500, 1000, 500, 2000, 500, 1000]
);
}, child: Text("Vibrate")),
NOTE: If your device don’t have HapticMotor or there is no Vibrator motor in mobile. This will not Work.
Recommended Flutter Article
How to Open App Setting in flutter.
Introduction to Flutter BLoC Pattern.
