debug_layout_hud 0.0.2

A debug-only floating HUD for Flutter showing live screen size, custom breakpoints, text scale and text direction — without opening DevTools.

example/lib/main.dart

import 'package:debug_layout_hud/debug_layout_hud.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Wrap the whole app once, here. `enabled: kDebugMode` guarantees the
      // HUD can never ship in a release build by accident.
      builder: (BuildContext context, Widget? child) => DebugLayoutHud(
        enabled: kDebugMode,
        position: HudPosition.bottomRight,
        breakpoints: const <BreakpointRule>[
          BreakpointRule(name: 'compact', max: 600),
          BreakpointRule(name: 'medium', max: 900),
          BreakpointRule(name: 'expanded', max: double.infinity),
        ],
        child: child ?? const SizedBox.shrink(),
      ),
      home: const _HomePage(),
    );
  }
}

class _HomePage extends StatelessWidget {
  const _HomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('debug_layout_hud example')),
      body: const Center(
        child: Padding(
          padding: EdgeInsets.all(24),
          child: Text(
            'Resize this window or rotate the device.\n'
            'Tap the HUD badge in the corner to expand/collapse it.',
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}