Shake off your App’s problems: Implementing "Shake to Report" in Flutter

This article explains how to implement the "Shake to Report" feature in a Flutter app, allowing users to report issues by shaking their device. This provides a convenient way for users to provide feedback and improve the app's user experience.

Introduction – What is Shake to report?

Have you ever struggled with your app? Did the app not work in the expected way, and you were shaking your phone to see if it worked wonders? In this article, we will learn how to implement the feature in a Flutter app that enables users to report a barrier by shaking their device. On shaking the device, a modal sheet will appear. This modal dialog allows users to report a barrier or a problem — a feature you may already know from big apps, e.g. Instagram. The shake gesture is supported on Android and iOS.

Implementation

The implementation is straightforward. This article will give you simple guidelines following these steps:

• Importing the package
• Configure Android
• Configure iOS
• Building the UI

Importing the package shake_gesture

To implement the shaking functionality, we use the package shake_gesture from pub.dev . There are other packages on pub.dev , but we find this to be the most convenient to use as it requires minimum setup and is easy to use in one widget.

Navigate to your project root and execute:

flutter pub add shake_gesture

Your pubspec.yaml should now look like this:

dependencies: flutter: sdk: flutter # ... other dependencies shake_gesture: ^1.2.0

That’s it. If your IDE doesn’t do it automatically, please don’t forget to run flutter pub get afterward. Let’s continue with the configuration!

Configuration for Android (AndroidManifest.xml)

For the shaking gesture to be recognized correctly on Android, you must add two meta-data entries in the AndroidManifest.xml file:

<manifest …> <application …> <meta-data android:name="dev.fluttercommunity.shake_gesture_android.SHAKE_FORCE" android:value="5" /> <meta-data android:name="dev.fluttercommunity.shake_gesture_android.MIN_NUM_SHAKES" android:value="6" /> </application> </manifest>

These values (SHAKE_FORCE = 5, MIN_NUM_SHAKES = 6) are the default values of the package . However, you can adjust them depending on feedback from your users or your own tests.

Configuration for iOS (Xcode project settings)

Open the iOS project located under /ios/Runner.xcodeproj and navigate to Runner -> General -> Supported Destinations.

Make sure that only the iPhone and iPad are selected. If visionOS or macOS are selected, the shake feature will not work — even on your iPhone or iPad.

Unlike Android, we don’t have any options to customize the shake gesture on iOS. The package will use motionshake from UIEvent.EventType.motion , which doesn’t have any customization options.

Building the UI — the fun part 🎉

Now we come to the practical part — building widgets!

The wrapper (ShakeToReport)

This StatefulWidget contains the ShakeGesture widget of the package and serves as a wrapper around the app and contains the logic for displaying the modal sheet when shaking.

class ShakeToReport extends StatefulWidget { const ShakeToReport({required this.child, super.key}); final Widget child; @override State<ShakeToReport> createState() => _ShakeToReportState(); } class _ShakeToReportState extends State<ShakeToReport> { bool _isModalShown = false; void _showModal() { if (_isModalShown) { return; } setState(() { _isModalShown = true; }); showModalBottomSheet( context: context, builder: (_) => const ShakeToReportModal(), ).then((result) { setState(() { _isModalShown = false; }); }); } @override Widget build(BuildContext context) { return ShakeGesture(onShake: _showModal, child: widget.child); } }

The modal sheet (ShakeToReportModal)

You can design the modal dialog itself however you like. Here is a minimalist example:

class ShakeToReportModal extends StatelessWidget { const ShakeToReportModal({super.key}); @override Widget build(BuildContext context) { final colors = Theme.of(context).colorScheme; return SingleChildScrollView( padding: const EdgeInsets.only(top: 16, left: 16, right: 16, bottom: 96), child: Column( mainAxisSize: MainAxisSize.min, children: [ const Text( 'Report a barrier', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), const Padding( padding: EdgeInsets.symmetric(vertical: 8), child: Text( 'Something is not working as expected? ' 'Please give us feedback and help to make ' 'our app better for everyone!', ), ), TextButton( onPressed: () { // TODO: implement }, style: ButtonStyle( backgroundColor: WidgetStateColor.resolveWith( (_) => colors.primary, ), foregroundColor: WidgetStateColor.resolveWith( (_) => colors.onPrimary, ), ), child: const Text('Report barrier'), ), ], ), ); } }

Adding the wrapper to your app

In this final step, you will need to add the wrapper where you need it. For most cases it should be fine placing it just at the root of your widget tree, but below MaterialApp. This way, it will be detected in the whole app. In your app, you can deploy the widget wherever it’s needed.

class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), ), home: const ShakeToReport(child: ShakeToReportHome()), ); } }

The feature is now ready to use. Start your app, shake your device — and see what it does!

To make the experience complete

A few useful extensions for practical use can be implemented:

• Adding a report form: For example, redirect to a dedicated screen where users can enter detailed information. It depends a lot on how your API is structured.
• Make the feature optional: Offer an option with which the feature can be deactivated (e.g., a checkbox in the modal sheet). Don’t forget to also offer an option to change this setting in your app settings.

Conclusion

With just a few lines of code, you can add a helpful and inclusive feature to your Flutter app that allows users to report problems directly in context. This way, you can actively improve the user experience and accessibility of your app.