zeba_academy_widget_inspector

A powerful offline Flutter widget inspection tool to help developers and learners visualize, debug, and understand widget layouts directly inside their app.

🚀 Features

🔍 Inspect widgets in real-time by tapping on them
📏 View widget size (width & height)
📦 Display layout constraints
🌳 Lightweight and fully offline (no DevTools needed)
🎓 Perfect for learning Flutter UI internals
⚡ Easy integration with minimal setup

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_widget_inspector: ^0.0.1

🛠️ Usage

Wrap your app with WidgetInspectorOverlay:

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

void main() {
  runApp(
    MaterialApp(
      home: WidgetInspectorOverlay(
        child: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Widget Inspector")),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          color: Colors.amber,
          child: const Text("Tap me to inspect!"),
        ),
      ),
    );
  }
}

📸 How It Works

Tap anywhere on the screen
The inspector detects the widget under your finger
Displays:
- Width
- Height
- Constraints

🎯 Use Cases

Debug UI layout issues
Learn how Flutter rendering works
Analyze widget constraints and sizing
Educational demonstrations

🧩 Roadmap

🔲 Widget highlight borders
🌳 Full widget tree visualization
🎛 Toggle inspector mode
🧠 Advanced layout debugging info

📄 License (GPL v3)

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

You are free to:

Use
Modify
Distribute

Under the condition that all derivative work must also be open source under GPL.

👨‍💻 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: https://zeba.academy ➡ Explore hands-on courses and resources at: https://code.zeba.academy ➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy ➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

❤️ Contributing

Contributions are welcome!

If you'd like to improve this package:

Fork the repository
Create a new branch
Make your changes
Submit a pull request

⭐ Support

If you like this project, consider giving it a ⭐ on GitHub and sharing it with others!

Built with ❤️ by Zeba Academy