zeba_academy_layout_debugger

🚀 A powerful visual layout debugging tool for Flutter that helps you understand widget structure in real time.

✨ Features

  • 🎯 Visualize padding & spacing
  • 🚨 Detect overflow issues instantly
  • 📐 Highlight alignment problems
  • 🔍 Built-in tap inspector (live coordinates)
  • ⚡ Lightweight & zero dependencies

📸 Preview

Add screenshots/gifs here to showcase debugging overlays

🚀 Getting Started

1. Add Dependency

dependencies:
  zeba_academy_layout_debugger:
    path: ../

2. Import

import 'package:zeba_academy_layout_debugger/zeba_academy_layout_debugger.dart';

3. Usage

LayoutDebugger(
  padding: const EdgeInsets.all(16),
  config: const DebugConfig(
    showPadding: true,
    detectOverflow: true,
    enableInspector: true,
  ),
  child: Container(
    padding: const EdgeInsets.all(20),
    color: Colors.green,
    child: const Text("Hello Debugger"),
  ),
)

⚙️ Configuration

DebugConfig(
  showPadding: true,
  showMargins: true,
  detectOverflow: true,
  highlightAlignment: true,
  enableInspector: true,
)
Property Description
showPadding Highlights padding visually
showMargins (Future support) margin visualization
detectOverflow Shows overflow warnings
highlightAlignment Detects alignment issues
enableInspector Enables tap inspector

🧪 Example Use Cases

  • Debugging complex UI layouts
  • Fixing overflow errors quickly
  • Understanding spacing issues
  • Teaching Flutter layout concepts

⚠️ Important Notes

  • Use only in debug mode
  • Avoid enabling in production builds
if (kReleaseMode) return child;

🛣️ Roadmap

  • 🔹 Margin visualization
  • 🔹 Widget tree inspector panel
  • 🔹 DevTools integration
  • 🔹 Alignment heatmaps

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

📄 License

This project is licensed under the GNU General Public License v3.0.

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on Linkedin

🌐 Your all-in-one no-bloat hub!

🚀 Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development. ➡ Visit our main site: zeba.academy ➡ Explore hands-on courses and resources at: code.zeba.academy ➡ Check out our YouTube for more tutorials: zeba.academy ➡ Follow us on Instagram: zeba.academy

⭐ If you like this package, don’t forget to star the repo!

Libraries

zeba_academy_layout_debugger