layout_guard 0.0.1

Runtime layout overflow detector & visual debugger for Flutter. Automatically detects RenderFlex overflows with human-readable fix suggestions.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:layout_guard/layout_guard.dart';

void main() {
  runApp(
    // Wrap your app with LayoutGuard to enable overflow detection
    LayoutGuard(child: const MyApp()),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Guard Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  bool _showOverflow = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Layout Guard Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Tap the button below to trigger a layout overflow.\n'
                'Layout Guard will detect and display it!',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showOverflow = !_showOverflow;
                });
              },
              child: Text(_showOverflow ? 'Hide Overflow' : 'Show Overflow'),
            ),
            const SizedBox(height: 40),
            // This will cause an overflow when shown
            if (_showOverflow)
              Container(
                color: Colors.blue.withValues(alpha: 0.1),
                child: Row(
                  children: [
                    Container(
                      width: 200,
                      height: 100,
                      color: Colors.red,
                      child: const Center(
                        child: Text(
                          'Box 1',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                    Container(
                      width: 200,
                      height: 100,
                      color: Colors.green,
                      child: const Center(
                        child: Text(
                          'Box 2',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                    Container(
                      width: 200,
                      height: 100,
                      color: Colors.blue,
                      child: const Center(
                        child: Text(
                          'Box 3',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}