Haptic Feedback In Flutter

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.

GitHub - Mobile-Apps-Academy/HapticFeedbackDemoFlutter

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

Mobile Apps Academy

Social Handles

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

Twitter : https://twitter.com/MobileAppsAcdmy

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