Install Flawsnap in a Flutter app

The flawsnap package on pub.dev adds shake-to-report and a floating button to iOS and Android apps; setup takes about 20 minutes.

Steps

  1. 1

    Turn on mobile reports

    In Flawsnap, open the project’s Security settings, turn on Accept reports from mobile apps and copy the project key (pk_…).

  2. 2

    Add the package

    Run flutter pub add flawsnap (or add flawsnap: ^0.4.0 under dependencies in pubspec.yaml). It needs Dart 3.13 / Flutter 3.47 or newer.

  3. 3

    Allow internet on Android release builds

    Make sure android/app/src/main/AndroidManifest.xml has the INTERNET permission inside <manifest>.

  4. 4

    Initialise and wrap the app

    Call Flawsnap.init before runApp and pass your app through Flawsnap.wrap.

  5. 5

    Send a test report

    Run the app on a device, shake it or tap the floating button, mark the screenshot and send.

The package

The Flutter SDK is the flawsnap package on pub.dev (version 0.4.0, MIT licensed). This guide follows the setup in the Flutter docs, which have the full reference.

It supports iOS and Android only. There is no Flutter web or desktop support. For a Flutter web build, or any website, use the script tag instead.

Android permission for release builds

Flutter adds the internet permission to debug builds only. Without it in your main manifest, reports work in debug and silently fail in release:

android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />

Initialise before runApp

By default users open the reporter by shaking the phone or tapping a floating button. Choose triggers with triggers: {FlawsnapTrigger.button} in init. Shake needs a physical device; on a simulator use the button or call Flawsnap.show().

If the key is wrong or mobile reports are off for the project, init logs why and the SDK stays hidden. Your app keeps running.

lib/main.dart
import 'package:flawsnap/flawsnap.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Flawsnap.init(
    apiUrl: 'https://backend.flawsnap.com/api/v1',
    projectKey: 'pk_...',
    insights: true, // optional: user flow, API timing and errors (see Insights)
  );
  runApp(Flawsnap.wrap(const MyApp()));
}

Screens, network calls and the user

  • Name your routes. Screens take the route's RouteSettings.name; unnamed routes show as (unnamed). With GoRouter, pass the observer in observers: and give each GoRoute a name. Inside a ShellRoute, call Flawsnap.screen('Orders') from the screen.
  • auto_route: pass the observer in navigatorObservers: () => [Flawsnap.navigatorObserver] in your router config.
  • Network: Flawsnap.httpClient() is a package:http client. Calls made with Dio or other clients are not recorded yet. Bodies are never recorded.
Dart
MaterialApp(navigatorObservers: [Flawsnap.navigatorObserver])  // the current screen
final client = Flawsnap.httpClient();                           // record network calls
Flawsnap.identify(name: user.name, email: user.email);          // prefill the reporter
Flawsnap.log('Payment failed', level: 'error');                 // custom log lines
Flawsnap.setMetadata({'plan': 'pro'});                          // extra details

What a Flutter report contains

  • A screenshot of the app with the user’s marks: box and freehand draw, in five colours.
  • Title, description, priority and category from your project.
  • Device model, OS and version, app name, version and build, screen size, pixel ratio, locale and light or dark mode.
  • The current screen, and the last 100 log lines and 100 requests made through Flawsnap.httpClient().

There is no screen recording in the Flutter SDK, and native iOS or Android crashes are not captured. Reports land in the same inbox as your website’s, tagged ios or android.

Troubleshooting

  • Nothing shows up: check the init log line. It is usually a wrong key, or Accept reports from mobile apps is off.
  • Works in debug, not in a release build on Android: the INTERNET permission is missing from the main manifest.
  • Shaking does nothing: you are on a simulator. Use the button or Flawsnap.show().
  • Network tab empty: the app uses Dio or another client rather than Flawsnap.httpClient().

Questions

Where is the package?
On pub.dev as flawsnap. Add it with flutter pub add flawsnap; the Flutter docs cover every option.
Does the Flutter SDK need allowed domains?
No. Apps do not send a website origin. Instead the project must have Accept reports from mobile apps turned on, which is a separate opt-in from the website widget.
Can testers sign in so reports carry their name?
Yes, when the project allows team sign-in. The SDK shows a code and opens an approval page; after the member approves, their reports go in under their Flawsnap account for 30 days.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Updated