In this article, we will explore the Vibration In Flutter. We perceive how to execute a demo program. We will let you know how to implement OnTap vibration using two methods first, without the package is the HapticFeedback class, and second, with the package is the vibration package. We will look out for both methods for giving a vibration effect when the user taps on the screen or performs any event in your Flutter applications.
- For HapticFeedback class:
HapticFeedback class – services library – Dart API
API docs for the HapticFeedback class from the services library, for the Dart programming language.api.flutter.dev
- For Vibration:
vibration | Flutter package
A plugin for handling Vibration API on iOS, Android, and web.pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Introduction:
The below demo video shows how to implement on-tap vibration in Flutter and how a vibration will work using the HapticFeedback class and vibration package in your Flutter applications. We will show you when the user presses the button then, your device will vibrate. It will be shown on your device.
Demo Module::
Vibration Using HapticFeedback class:
In Flutter it is exceptionally simple to carry out vibration you should simply import Flutter services and use the hapticFeedback class.
import 'package:flutter/services.dart';Note: If your device there is no Vibrator motor on mobile. This will not Work.
HapticFeedback Static Methods:
Allow access to haptic feedback on cell phones utilizing the underneath technique for the HapticFeedback class.
- > vibrate — This method is utilized to provide vibration-haptic feedback to the user for a short duration.
- > lightImpact — This method provides haptic feedback corresponding to a collision impact with a light mass.
- > mediumImpact — This method provides haptic feedback corresponding to a collision impact with a medium mass.
- > heavyImpact — This method provides haptic feedback corresponding to a collision impact with a heavy mass.
- > selectionClick — This method is utilized to provide haptic feedback indication selection changing through discrete values.
In the body, we will make an ElevatedButton(). Inside the button, we will add the onPressed function. In this function, we will add HapticFeedback.heavyImpact(), also we will add the text “Vibrate Using HapticFeedback” on its child.
ElevatedButton(
onPressed: () {
HapticFeedback.heavyImpact();
},
child: const Text("Vibrate Using HapticFeedback")),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Vibration Using Vibration Package:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
vibration: ^1.8.4Step 2: Import
import 'package:vibration/vibration.dart';Step 3: Run flutter packages get in the root directory of your app.
Step 4: Add Vibration permission
Add the Vibration permission in android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.VIBRATE" />Methods Of Vibration Package:
- > hasVibrator — This method is utilized to check if the vibrator is available on the device.
- > hasAmplitudeControl — This method is utilized to check if the vibrator has amplitude control in your device.
- > hasCustomVibrationsSupport — This method is utilized to check if the device can vibrate with a custom duration, custom pattern, or custom intensities.
In the body, we will add the three ElevatedButtons() wrapped to it container. On the first button, we will add the default vibrate. But the default vibrate was 500ms and I was added 100ms. Also, we will check if the device has a vibration feature. On this second button, we will set the duration of the vibration was 2 sec means 2000ms.
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate Default"),
onPressed: () async {
if (await Vibration.hasVibrator() != null) {
Vibration.vibrate(duration: 100);
}
},
),
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate For 2 Sec"),
onPressed: () {
Vibration.vibrate(duration: 2000);
},
),
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate With Pattern"),
onPressed: () {
Vibration.vibrate(pattern: [500, 1000, 500, 2000, 500, 3000]);
},
),
)
On the third button, we will vibrate with a pattern that means wait then vibrate again and repeat, etc. 500ms was waited, 1000ms vibrated, 500ms was waited, 2000ms, etc.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_vibration_demo/splash_screen.dart';
import 'package:vibration/vibration.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
HapticFeedback.heavyImpact();
},
child: const Text("Vibrate Using HapticFeedback")),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate Default"),
onPressed: () async {
if (await Vibration.hasVibrator() != null) {
Vibration.vibrate(duration: 100);
}
},
),
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate For 2 Sec"),
onPressed: () {
Vibration.vibrate(duration: 2000);
},
),
),
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(5),
child: ElevatedButton(
child: const Text("Vibrate With Pattern"),
onPressed: () {
Vibration.vibrate(pattern: [500, 1000, 500, 2000, 500, 3000]);
},
),
)
],
),
),
);
}
}Conclusion:
In the article, I have explained the Vibration in Flutter; you can modify this code according to your choice. This was a small introduction to the Vibration in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Vibration in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Vibration using the HapticFeedback class and vibration package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
