fix alignment for dot grid background + add clipping post canvas paint

example/lib/caching_test.dart

@@ -20,7 +20,12 @@ class _CachingTestAppState extends State<CachingTestApp> {
     for (int i = 0; i < 20; i++) {
       controller.addChild(
         Offset((i % 5) * 120.0, (i ~/ 5) * 120.0),
-        BuildCounterWidget(color: Colors.primaries[i % Colors.primaries.length], label: 'Widget $i'),
+        BuildCounterWidget(
+          key: ValueKey<int>(i), // since in the tree it will be just an array at the same height, a count change
+          // along the egdes of screen build all so you need a key to identify individually
+          color: Colors.primaries[i % Colors.primaries.length],
+          label: 'Widget $i',
+        ),
       );
     }
   }

example/lib/dynamic_widget_example.dart

@@ -24,14 +24,13 @@ class _DynamicWidgetExampleState extends State<DynamicWidgetExample> {
   }
 
   void _setupWidgets() {
-    // Approach 1: Using StatefulWidget with GlobalKey to preserve state
-    controller.addChild(const Offset(0, 0), SelfManagedCounterWidget(key: GlobalKey(), label: "Self-Managed"));
+    // Approach 1: Using StatefulWidget with state inside the widget getting lost if unmounted
+    controller.addChild(const Offset(0, 0), SelfManagedCounterWidget(label: "Self-Managed"));
 
-    // Approach 2: Using updateChildWidget, though since before and after it's still just as the same ExternalDataWidget
-    // you need to have the key change as an arg change is separated from the tree
+    // Approach 2: Using updateChildWidget, you need this since the children dep tree is direcly managed by the controller
     controller.addChild(
       const Offset(200, 0),
-      ExternalDataWidget(key: ValueKey('external_$counter'), counter: counter, message: message, color: selectedColor),
+      ExternalDataWidget(counter: counter, message: message, color: selectedColor),
     );
 
     // Approach 3: Using ValueListenableBuilder for reactive updates
@@ -74,7 +73,7 @@ class _DynamicWidgetExampleState extends State<DynamicWidgetExample> {
     controller.updateChildWidget(
       1, // Widget ID (second widget added)
       ExternalDataWidget(
-        key: ValueKey('external_$counter'), // Force rebuild with unique key
+        // key: ValueKey('external_$counter'), // Force rebuild with unique key
         counter: counter,
         message: message,
         color: selectedColor,
@@ -98,9 +97,9 @@ class _DynamicWidgetExampleState extends State<DynamicWidgetExample> {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                const Text('Four approaches for dynamic inputs:', style: TextStyle(fontWeight: FontWeight.bold)),
+                const Text('Three approaches for dynamic inputs:', style: TextStyle(fontWeight: FontWeight.bold)),
                 const SizedBox(height: 8),
-                const Text('1. Self-managed StatefulWidget with GlobalKey - preserves state when off-screen'),
+                const Text('1. Self-managed StatefulWidget (left), loses state on unmount'),
                 const Text('2. External data + updateChildWidget (center) - manual updates'),
                 const Text('3. ValueListenableBuilder (right) - reactive updates'),
                 const SizedBox(height: 16),

example/lib/main.dart

@@ -1,4 +1,4 @@
-import './app.dart';
+import 'simple_example.dart';
 import './caching_test.dart';
 import './dynamic_widget_example.dart';
 import 'package:flutter/material.dart';
@@ -27,9 +27,9 @@ class ExampleChooser extends StatelessWidget {
           children: [
             ElevatedButton(
               onPressed: () {
-                Navigator.push(context, MaterialPageRoute(builder: (context) => const App()));
+                Navigator.push(context, MaterialPageRoute(builder: (context) => const SimpleExample()));
               },
-              child: const Text('Original Example'),
+              child: const Text('Simple Example'),
             ),
             const SizedBox(height: 16),
             ElevatedButton(
@@ -50,8 +50,8 @@ class ExampleChooser extends StatelessWidget {
               padding: EdgeInsets.all(16.0),
               child: Text(
                 'Examples:\n'
-                '• Original: Basic usage demo\n'
-                '• Caching Test: Shows Flutter\'s automatic widget optimization\n'
+                '• Simple: Basic usage demo\n'
+                '• Caching Test: To sanity check build counts\n'
                 '• Dynamic Inputs: How to handle changing widget data',
                 textAlign: TextAlign.center,
                 style: TextStyle(fontSize: 14, color: Colors.grey),

example/lib/simple_example.dart

@@ -3,14 +3,14 @@ import 'package:infinite_lazy_grid/infinite_lazy_grid.dart';
 
 import 'widgets/fps.dart';
 
-class App extends StatefulWidget {
-  const App({super.key});
+class SimpleExample extends StatefulWidget {
+  const SimpleExample({super.key});
 
   @override
-  State<App> createState() => _AppState();
+  State<SimpleExample> createState() => _SimpleExampleState();
 }
 
-class _AppState extends State<App> {
+class _SimpleExampleState extends State<SimpleExample> {
   final LazyCanvasController controller = LazyCanvasController(debug: true);
 
   @override
@@ -33,17 +33,20 @@ class _AppState extends State<App> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(title: const Text('Simple Example')),
       floatingActionButton: Column(
         mainAxisSize: MainAxisSize.min,
         spacing: 8,
         children: [
           FloatingActionButton(
+            heroTag: 'app_zoom_in',
             onPressed: () {
               controller.updateScalebyDelta(0.1);
             },
             child: const Icon(Icons.zoom_in),
           ),
           FloatingActionButton(
+            heroTag: 'app_zoom_out',
             onPressed: () {
               controller.updateScalebyDelta(-0.1);
             },

example/lib/widgets/fps.dart

@@ -22,9 +22,11 @@ class _FpsState extends State<Fps> {
     double elapsedSeconds = (elapsedMicroseconds - _lastFrameTime) * 1e-6;
     if (elapsedSeconds != 0) {
       _lastFrameTime = elapsedMicroseconds;
-      setState(() {
-        _frameRate = '${(1.0 / elapsedSeconds).toStringAsFixed(2)} fps';
-      });
+      if (mounted) {
+        setState(() {
+          _frameRate = '${(1.0 / elapsedSeconds).toStringAsFixed(2)} fps';
+        });
+      }
     }
     // redraw if mounted
     if (mounted) {