Developer Tools

Enable the built-in FlutterWind developer overlay for FPS, memory, performance, logs, and diagnostics.

FlutterWind ships with an optional in-app developer tools overlay.

Enable it with the showDevTools flag in FlutterWind.

Quick start

import 'package:flutter/material.dart';
import 'package:flutterwind_core/flutterwind.dart';

void main() {
  runApp(
    FlutterWind(
      title: 'FlutterWind DevTools Demo',
      showDevTools: true,
      home: const MyHomePage(),
    ),
  );
}

Customize the overlay

Use these options for visibility and behavior:

FlutterWind(
  showDevTools: true,
  devToolsBackgroundColor: const Color(0xCC111827),
  devToolsTextColor: Colors.white,
  showFps: true,
  showMemoryUsage: true,
  showBuildTimes: true,
  home: const MyHomePage(),
);

What the panel includes

  • Metrics (FPS, memory, build count)
  • Network requests overview
  • Performance recording (build/layout/paint events)
  • Platform and screen info
  • Memory breakdown
  • Runtime logs
  • Parser diagnostics

Notes

  • Keep showDevTools off in production builds.
  • The overlay is draggable and expandable.
  • If you need custom toggling, persist a boolean (for example with SharedPreferences) and pass it into showDevTools.

Related pages

  • /getting-started/features
  • /reference/performance-benchmarks
Edit this page
Theming
Configure light and dark themes with FlutterWind using MaterialApp-compatible theme settings.
Utility Reference
Core Flutterwind utility groups and class patterns.