zeba_academy_widget_diff_engine 0.0.1

A Flutter debugging tool to detect UI changes between widget rebuilds, compare widget trees, and visualize unnecessary rebuilds with a lightweight overlay.

zeba_academy_widget_diff_engine

🚀 A powerful Flutter debugging package to detect UI changes between widget rebuilds.

Analyze, visualize, and optimize your widget rebuilds with ease.

---

✨ Features

• 🔍 Detect UI changes between rebuilds
• 🌳 Compare previous vs current widget tree
• 🎯 Highlight changed widgets
• ⚡ Debug unnecessary rebuilds
• 📊 Lightweight performance insights overlay

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_widget_diff_engine: ^0.0.1

Then run:

flutter pub get

---

🚀 Getting Started

Wrap your app with WidgetDiffDebugger:

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

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return WidgetDiffDebugger(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text("Diff Engine")),
          body: Center(
            child: Text("Counter: $counter"),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            child: const Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

---

🧠 How It Works

1. Captures the current widget tree
2. Stores the previous frame tree
3. Compares both trees
4. Detects differences
5. Displays overlay with changes

---

⚙️ Configuration

WidgetDiffDebugger(
  enabled: true, // Enable/disable debugger
  child: YourApp(),
)

---

⚠️ Important Notes

• Intended for debug mode only
• Avoid using in production builds
• Widget tree traversal may impact performance

---

🛣 Roadmap

• 🎯 Visual bounding box highlights
• 🎨 Color-coded diff (added/removed/updated)
• 📈 Rebuild heatmap
• 🧩 Flutter DevTools integration

---

📄 License

This project is licensed under the GNU General Public License v3.0 (GPL-3.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: https://zeba.academy ➡ Explore hands-on courses: https://code.zeba.academy ➡ YouTube: https://www.youtube.com/@zeba.academy ➡ Instagram: https://www.instagram.com/zeba.academy/

---

Thank you for visiting! 🙌