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';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return MopperWrapper(
          integrations: [
            GitLabIntegration(
              projectId: '12345',
              apiToken: 'glpat-xxxxxxxxxxxx',
              gitlabUrl: 'gitlab.com',
            ),
            SentryFeedbackIntegration(),
          ],
          child: child ?? const SizedBox.shrink(),
        );
      },
      home: const MyHomePage(),
    );
  }
}

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:

class SlackIntegration implements MopperIntegration {

  @override
  Future<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.