A simple debug widget for Flutter that draws visual outlines around widgets to better understand the widget hierarchy.
- Draws outlines around the given widget and its children.
- Allows customization of the outline color.
- Helps with visual debugging in Flutter applications.
Add the file containing DebugWidget
to your project or create a custom helper class based on this code.
import 'package:flutter/material.dart';
import 'debug_widget.dart';
void main() {
runApp(
DebugWidget(
color: Colors.blue, // Optional: Default is red
child: MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("DebugWidget Example")),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
DebugWidget(
child: Text("Hello World!"),
),
SizedBox(height: 20),
DebugWidget(
color: Colors.green,
child: ElevatedButton(
onPressed: () {},
child: Text("Press me!"),
),
),
],
),
),
),
),
),
);
}
Parameter | Type | Default Value | Description |
---|---|---|---|
child |
Widget |
- | The widget to debug. |
color |
Color |
Colors.red |
The color of the outline. |
- Useful for inspecting widget hierarchy.
- Supports different colors for better distinction.
- Does not affect the app's functionality.
This widget is free to use and modify. Happy debugging! 🚀