fix: 🐛 Fixed Rendering issues with scrollable showcase views inside withWidget

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [5.0.2] (unreleased)
+
+- Fixed [#590](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/590) - Fixed Rendering issues with scrollable showcase views inside withWidget
+
 ## [5.0.1]
 
 - Fixed [#576](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/576) - Fixed the showcase key update issue by removing the old controller entry and registering the new key.

example/lib/main.dart

@@ -441,37 +441,14 @@ class _MailPageState extends State<MailPage> {
   GestureDetector showcaseMailTile(GlobalKey<State<StatefulWidget>> key,
       bool showCaseDetail, BuildContext context, Mail mail) {
     return GestureDetector(
-      onTap: () {
-        Navigator.push<void>(
-          context,
-          MaterialPageRoute<void>(
-            builder: (_) => const Detail(),
-          ),
-        );
-      },
+      onTap: navigateToDetailScreen,
       child: Container(
         padding: const EdgeInsets.symmetric(vertical: 8),
         child: Showcase(
           key: key,
           description: 'Tap to check mail',
           disposeOnTap: true,
-          onTargetClick: () {
-            Navigator.push<void>(
-              context,
-              MaterialPageRoute<void>(
-                builder: (_) => const Detail(),
-              ),
-            ).then((_) {
-              // First we need to unregister the details screen showcase
-              // as get method will use the latest registered scopes
-              ShowcaseView.getNamed("_detailsScreen").unregister();
-
-              // Then we need to start the main screen showcase
-              ShowcaseView.get().startShowCase(
-                [_four, _lastShowcaseWidget],
-              );
-            });
-          },
+          onTargetClick: navigateToDetailScreen,
           tooltipActionConfig: const TooltipActionConfig(
             alignment: MainAxisAlignment.spaceBetween,
             actionGap: 16,
@@ -515,6 +492,24 @@ class _MailPageState extends State<MailPage> {
       ),
     );
   }
+
+  void navigateToDetailScreen() {
+    Navigator.push<void>(
+      context,
+      MaterialPageRoute<void>(
+        builder: (_) => const Detail(),
+      ),
+    ).then((_) {
+      // First we need to unregister the details screen showcase
+      // as get method will use the latest registered scopes
+      ShowcaseView.getNamed("_detailsScreen").unregister();
+
+      // Then we need to start the main screen showcase
+      ShowcaseView.get().startShowCase(
+        [_four, _lastShowcaseWidget],
+      );
+    });
+  }
 }
 
 class SAvatarExampleChild extends StatelessWidget {

lib/src/tooltip/render_animation_delegate.dart

@@ -152,7 +152,7 @@ class _RenderAnimationDelegate extends _RenderPositionDelegate {
         'Tooltip should only take `_TooltipLayoutId` as a child',
       );
       final childParentData = child.parentData! as MultiChildLayoutParentData;
-      context.canvas.save();
+      final currentChild = child; // Capture non-null child for closure
 
       // Calculate target widget bounds.
       final targetRect = Rect.fromLTWH(
@@ -206,21 +206,34 @@ class _RenderAnimationDelegate extends _RenderPositionDelegate {
         toolTipSlideEndDistance,
       );
 
-      context.canvas
+      // Use pushTransform for RepaintBoundary compatibility
+      // Old code used canvas.save()/restore() which caused rendering issues
+      // with scrollable showcase views inside withWidget. pushTransform ensures
+      // proper compositing and boundary handling for scrollable content.
+      // Create transformation matrix
+      final transform = Matrix4.identity()
         ..translate(scaleOrigin.dx, scaleOrigin.dy)
         ..scale(_scaleAnimation.value);
 
-      // paint children
-      _paintChildren(
-        context.canvas,
-        context.paintChild,
-        child,
-        childParentData,
-        scaleOrigin,
-        moveOffset,
+      // Paint children with transform
+      // Using pushTransform instead of direct canvas operations to maintain
+      // RepaintBoundary compatibility and fix scrollable rendering issues
+      context.pushTransform(
+        needsCompositing,
+        offset,
+        transform,
+        (context, offset) {
+          _paintChildren(
+            context.canvas,
+            context.paintChild,
+            currentChild,
+            childParentData,
+            scaleOrigin,
+            moveOffset,
+          );
+        },
       );
 
-      context.canvas.restore();
       child = childParentData.nextSibling;
     }
     _isPreviousRepaintInProgress = false;

lib/src/tooltip/tooltip_wrapper.dart

@@ -179,7 +179,9 @@ class _ToolTipWrapperState extends State<ToolTipWrapper>
                 : SystemMouseCursors.click,
             child: GestureDetector(
               onTap: widget.onTooltipTap,
-              child: widget.container ?? const SizedBox.shrink(),
+              child: RepaintBoundary(
+                child: widget.container ?? const SizedBox.shrink(),
+              ),
             ),
           )
         : MouseRegion(
@@ -188,29 +190,31 @@ class _ToolTipWrapperState extends State<ToolTipWrapper>
                 : SystemMouseCursors.click,
             child: GestureDetector(
               onTap: widget.onTooltipTap,
-              child: Container(
-                padding: widget.tooltipPadding,
-                decoration: BoxDecoration(
-                  color: widget.tooltipBackgroundColor,
-                  borderRadius: widget.tooltipBorderRadius ??
-                      const BorderRadius.all(Radius.circular(8)),
-                ),
-                child: ToolTipContent(
-                  title: widget.title,
-                  description: widget.description,
-                  titleTextAlign: widget.titleTextAlign,
-                  descriptionTextAlign: widget.descriptionTextAlign,
-                  titleAlignment: widget.titleAlignment,
-                  descriptionAlignment: widget.descriptionAlignment,
-                  textColor: widget.textColor,
-                  titleTextStyle: widget.titleTextStyle,
-                  descTextStyle: widget.descTextStyle,
-                  titlePadding: widget.titlePadding,
-                  descriptionPadding: widget.descriptionPadding,
-                  titleTextDirection: widget.titleTextDirection,
-                  descriptionTextDirection: widget.descriptionTextDirection,
-                  tooltipActionConfig: widget.tooltipActionConfig,
-                  tooltipActions: widget.tooltipActions,
+              child: RepaintBoundary(
+                child: Container(
+                  padding: widget.tooltipPadding,
+                  decoration: BoxDecoration(
+                    color: widget.tooltipBackgroundColor,
+                    borderRadius: widget.tooltipBorderRadius ??
+                        const BorderRadius.all(Radius.circular(8)),
+                  ),
+                  child: ToolTipContent(
+                    title: widget.title,
+                    description: widget.description,
+                    titleTextAlign: widget.titleTextAlign,
+                    descriptionTextAlign: widget.descriptionTextAlign,
+                    titleAlignment: widget.titleAlignment,
+                    descriptionAlignment: widget.descriptionAlignment,
+                    textColor: widget.textColor,
+                    titleTextStyle: widget.titleTextStyle,
+                    descTextStyle: widget.descTextStyle,
+                    titlePadding: widget.titlePadding,
+                    descriptionPadding: widget.descriptionPadding,
+                    titleTextDirection: widget.titleTextDirection,
+                    descriptionTextDirection: widget.descriptionTextDirection,
+                    tooltipActionConfig: widget.tooltipActionConfig,
+                    tooltipActions: widget.tooltipActions,
+                  ),
                 ),
               ),
             ),