Haptic Feedback In Flutter

Mobile Apps Academy
2 min readFeb 19, 2024

In this article, We will explore how to implement an Animated Onboarding UI View in SwiftUI

Before proceeding, please consider subscribing to our YOUTUBE CHANNEL

It gives us a lot of motivation to produce high-quality content for you guys.

if you are interested in watching the video tutorial, Check out below.

Let's start by adding the haptic_feedback package. Run the below command.


flutter pub add haptic_feedback

Once the package is added, we need to change if the device can trigger the feedback by await Haptics.canVibrate()

Once this check is passed, we can trigger the feedback with await Haptics.vibrate(hapticsType)

TextButton hapticButton(String title, HapticsType hapticsType) {
return TextButton(
onPressed: () async {

final can = await Haptics.canVibrate();

if (!can) return;

await Haptics.vibrate(hapticsType);

},
child: Text(title,
style: const TextStyle(
color: Colors.yellow,
fontSize: 18,
)),
);
}

Below is the complete code.

class HomePage extends StatelessWidget {
const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
hapticButton("Success", HapticsType.success),
hapticButton("Warning", HapticsType.warning),
hapticButton("Error", HapticsType.error),
hapticButton("Light", HapticsType.light),
hapticButton("Medium", HapticsType.medium),
hapticButton("Rigid", HapticsType.rigid),
hapticButton("Soft", HapticsType.soft),
hapticButton("Selection", HapticsType.selection),
],
),
),
);
}

TextButton hapticButton(String title, HapticsType hapticsType) {
return TextButton(
onPressed: () async {
final can = await Haptics.canVibrate();
if (!can) return;
await Haptics.vibrate(hapticsType);
},
child: Text(title,
style: const TextStyle(
color: Colors.yellow,
fontSize: 18,
)),
);
}
}

Thats it. You should be able to get the feedback now.

Once again Thanks for stopping by.
Do check out our YOUTUBE CHANNEL

Social Handles

Instagram : https://www.instagram.com/mobileappsacademy/

Twitter : https://twitter.com/MobileAppsAcdmy

LinkedIn : https://www.linkedin.com/company/mobile-apps-academy/

--

--

Mobile Apps Academy

Welcome to Mobile Apps Academy, your go-to channel for all things mobile app development!