Flutter Debug Overlay

A lightweight in-app debug overlay for Flutter apps with logs, request tracking, memory usage, device info, and performance tools.

This package is useful when you want quick diagnostics directly inside the running app without constantly switching to external tooling.

Features

• Draggable floating debug launcher
• Modern tabbed debug panel UI
• In-app log viewer
• Network request logger for dio
• Memory usage monitor
• Performance overlay panel
• Device information tab
• Shake gesture to open the panel

Installation

Add the package to your pubspec.yaml:

dependencies:
  flutter_dev_tools_overlay: ^1.0.2

Then run:

flutter pub get

Basic Usage

Wrap your app with DebugOverlay:

import 'package:flutter/material.dart';
import 'package:flutter_dev_tools_overlay/flutter_debug_overlay.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DebugOverlay(
        child: const HomePage(),
      ),
    );
  }
}

Generate Logs

Use the package logger so entries appear inside the overlay:

DebugLogger.log('User tapped checkout button');

Track Network Requests

Attach the interceptor to your Dio client:

import 'package:dio/dio.dart';
import 'package:flutter_dev_tools_overlay/debug_network_interceptor.dart';

final dio = Dio()
  ..interceptors.add(DebugNetworkInterceptor());

Requests captured through this interceptor will appear in the Network tab.

Open The Panel

You can open the debug panel in two ways:

• Tap the floating debug button
• Shake the device deliberately

The shake gesture now uses a stricter threshold to avoid accidental opens during normal phone movement.

Example

See the sample app in example/lib/main.dart.

Notes

• The in-app Logs tab only shows messages sent through DebugLogger.log(...)
• Network logging currently targets dio
• This package is meant for development and QA workflows

License

MIT