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
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
Add the package
Run
flutter pub add flawsnap(or addflawsnap: ^0.4.0underdependenciesinpubspec.yaml). It needs Dart 3.13 / Flutter 3.47 or newer. - 3
Allow internet on Android release builds
Make sure
android/app/src/main/AndroidManifest.xmlhas theINTERNETpermission inside<manifest>. - 4
Initialise and wrap the app
Call
Flawsnap.initbeforerunAppand pass your app throughFlawsnap.wrap. - 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:
<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.
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 inobservers:and give eachGoRouteaname. Inside aShellRoute, callFlawsnap.screen('Orders')from the screen. - auto_route: pass the observer in
navigatorObservers: () => [Flawsnap.navigatorObserver]in your router config. - Network:
Flawsnap.httpClient()is apackage:httpclient. Calls made with Dio or other clients are not recorded yet. Bodies are never recorded.
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 detailsWhat 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
initlog 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
INTERNETpermission 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 withflutter 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.
Related
Updated