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! šŸ™Œ

Libraries

zeba_academy_widget_diff_engine