Mopper

In Dutch, mopperen means to grumble or to complain. This package turns those grumbles into actionable feedback — captured right inside your Flutter app.

Mopper is an in-app feedback widget that wraps your application, captures screenshots with annotation tools, collects device diagnostics, and dispatches submissions to configurable backends like GitLab and Sentry.

Table of contents

• Features
• Installation
• Usage
• Integrations
• Localization
• Additional information

Features

• Wrap any Flutter app with a single widget to enable feedback capture.
• Automatic screenshot capture via RepaintBoundary.
• Annotation tools: freehand draw, arrows, undo, and color picker.
• Built-in integrations for GitLab (issues) and Sentry (user feedback).
• Pluggable integration architecture — implement MopperIntegration for any backend.
• Automatic system diagnostics (device model, OS version, app build info).
• Themed feedback form with Material 3 design (scoped, won't affect your app).
• Localization support (English and Dutch).

Installation

dependencies:
mopper: ^0.1.0

Usage

Wrap your app with MopperWrapper in MaterialApp.builder. This adds a floating action button that opens the feedback form when tapped.

import'package:flutter/material.dart';
import'package:mopper/mopper.dart';
voidmain() {
runApp(constMyApp());
}
classMyAppextendsStatelessWidget {
constMyApp({super.key});
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
builder: (context, child) {
returnMopperWrapper(
integrations: [
GitLabIntegration(
projectId:'12345',
apiToken:'glpat-xxxxxxxxxxxx',
gitlabUrl:'gitlab.com',
),
SentryFeedbackIntegration(),
],
child: child ??constSizedBox.shrink(),
);
},
home:constMyHomePage(),
);
}
}

The MopperWrapper will:

1. Wrap your app in a RepaintBoundary for screenshot capture.
2. Overlay a floating "Feedback" button.
3. Open a full-screen feedback form with screenshot annotation, category selection, and diagnostics.
4. Submit feedback in parallel to all configured integrations.

Integrations

GitLab

Creates a GitLab issue with the annotated screenshot attached:

GitLabIntegration(
projectId:'12345',
apiToken:'glpat-xxxxxxxxxxxx',
gitlabUrl:'gitlab.com', // or your self-hosted instance
)

Sentry

Submits feedback via Sentry's captureFeedback API with the screenshot as an attachment:

SentryFeedbackIntegration()

Custom integration

Implement the MopperIntegration interface to add your own backend:

classSlackIntegrationimplementsMopperIntegration {
@overrideFuture<void> submit(MopperSubmission submission) async {
// Upload screenshot and post message to Slack...
}
}

Additional information

This package is maintained by Dutch Coding Company. Feel free to leave feedback or open a pull request on GitHub.