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,
)

🧪 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!