🧑‍💻 add debugPaintHandleBounds param for painting handle bounds.

Author: BirjuVachhani

packages/flutter_box_transform/lib/src/handle_builders.dart

@@ -1,4 +1,5 @@
 import 'package:box_transform/box_transform.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'typedefs.dart';
@@ -31,6 +32,9 @@ class CornerHandleWidget extends StatelessWidget {
   /// Whether the handle is resizable.
   final bool enabled;
 
+  /// Whether to paint the handle's bounds for debugging purposes.
+  final bool debugPaintHandleBounds;
+
   /// Creates a new handle widget.
   CornerHandleWidget({
     super.key,
@@ -42,6 +46,7 @@ class CornerHandleWidget extends StatelessWidget {
     this.onPanEnd,
     this.onPanCancel,
     required this.enabled,
+    this.debugPaintHandleBounds = false,
   }) : assert(handlePosition.isDiagonal, 'A corner handle must be diagonal.');
 
   @override
@@ -61,6 +66,13 @@ class CornerHandleWidget extends StatelessWidget {
       );
     }
 
+    if(kDebugMode && debugPaintHandleBounds) {
+      child = ColoredBox(
+        color: Colors.orange.withOpacity(0.5),
+        child: child,
+      );
+    }
+
     return Positioned(
       left: handlePosition.influencesLeft ? 0 : null,
       right: handlePosition.influencesRight ? 0 : null,
@@ -115,6 +127,9 @@ class SideHandleWidget extends StatelessWidget {
   /// Whether the handle is resizable.
   final bool enabled;
 
+  /// Whether to paint the handle's bounds for debugging purposes.
+  final bool debugPaintHandleBounds;
+
   /// Creates a new handle widget.
   SideHandleWidget({
     super.key,
@@ -126,6 +141,7 @@ class SideHandleWidget extends StatelessWidget {
     this.onPanEnd,
     this.onPanCancel,
     required this.enabled,
+    this.debugPaintHandleBounds = false,
   }) : assert(handlePosition.isSide, 'A cardinal handle must be cardinal.');
 
   @override
@@ -145,6 +161,13 @@ class SideHandleWidget extends StatelessWidget {
       );
     }
 
+    if(kDebugMode && debugPaintHandleBounds) {
+      child = ColoredBox(
+        color: Colors.yellow.withOpacity(0.5),
+        child: child,
+      );
+    }
+
     return Positioned(
       left: handlePosition.isVertical
           ? handleTapSize

packages/flutter_box_transform/lib/src/transformable_box.dart

@@ -219,6 +219,9 @@ class TransformableBox extends StatefulWidget {
   /// [onTerminalHeightReached] into one callback function.
   final TerminalEvent? onTerminalSizeReached;
 
+  /// Whether to paint the handle's bounds for debugging purposes.
+  final bool debugPaintHandleBounds;
+
   /// Creates a [TransformableBox] widget.
   const TransformableBox({
     super.key,
@@ -267,6 +270,7 @@ class TransformableBox extends StatefulWidget {
     this.onTerminalWidthReached,
     this.onTerminalHeightReached,
     this.onTerminalSizeReached,
+    this.debugPaintHandleBounds = false,
   })  : assert(
           (controller == null) ||
               ((rect == null) &&
@@ -568,6 +572,7 @@ class _TransformableBoxState extends State<TransformableBox> {
               key: ValueKey(handle),
               handlePosition: handle,
               handleTapSize: widget.handleTapSize,
+              debugPaintHandleBounds: widget.debugPaintHandleBounds,
               enabled:
                   widget.resizable && widget.enabledHandles.contains(handle),
               onPanStart: (event) => onHandlePanStart(event, handle),
@@ -582,6 +587,7 @@ class _TransformableBoxState extends State<TransformableBox> {
               key: ValueKey(handle),
               handlePosition: handle,
               handleTapSize: widget.handleTapSize,
+              debugPaintHandleBounds: widget.debugPaintHandleBounds,
               enabled:
                   widget.resizable && widget.enabledHandles.contains(handle),
               onPanStart: (event) => onHandlePanStart(event, handle),

packages/flutter_box_transform/playground/lib/main.dart

@@ -797,13 +797,11 @@ class _ClampingRectState extends State<ClampingRect> {
         handle: handle,
         color: mainColor,
         hasShadow: false,
-        handleAlignment: HandleAlignment.inside,
       ),
       sideHandleBuilder: (context, handle) => AngularHandle(
         handle: handle,
         color: mainColor,
         hasShadow: false,
-        handleAlignment: HandleAlignment.inside,
       ),
       contentBuilder: (context, _, flip) => Container(
         width: model.clampingRect.width,