fix: 🐛Targeted widget focusing issue when we are applying size constr…

…aints on root widget (#383)
SimformSolutionsPvtLtd · Feb 26, 2024 · ea96763 · ea96763
1 parent e9517c9
commit ea96763
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [2.0.4] (Un-Released)
 - Feature [#387](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/387) - Provided barrier click disable functionality for a particular showcase.
+- Fixed [#383](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/383) - Targeted widget focusing issue when we applying size constraint on root widget(MaterialApp).
 
 ## [2.0.3]
 - Feature [#148](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/148) - Add feasibility to add `textDirection` of `title` and `description`.

diff --git a/example/android/build.gradle b/example/android/build.gradle
@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.4.32'
+    ext.kotlin_version = '1.5.20'
     repositories {
         google()
         jcenter()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.3'
+        classpath 'com.android.tools.build:gradle:7.3.0'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }
diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
@@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip
diff --git a/lib/src/get_position.dart b/lib/src/get_position.dart
@@ -27,18 +27,23 @@ class GetPosition {
   final EdgeInsets padding;
   final double? screenWidth;
   final double? screenHeight;
+  final RenderObject? rootRenderObject;
 
   GetPosition({
     this.key,
     this.padding = EdgeInsets.zero,
     this.screenWidth,
     this.screenHeight,
+    this.rootRenderObject,
   });
 
   Rect getRect() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
 
-    var boxOffset = box.localToGlobal(const Offset(0.0, 0.0));
+    var boxOffset = box.localToGlobal(
+      const Offset(0.0, 0.0),
+      ancestor: rootRenderObject,
+    );
     if (boxOffset.dx.isNaN || boxOffset.dy.isNaN) {
       return const Rect.fromLTRB(0, 0, 0, 0);
     }
@@ -61,7 +66,10 @@ class GetPosition {
   ///Get the bottom position of the widget
   double getBottom() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
-    final boxOffset = box.localToGlobal(const Offset(0.0, 0.0));
+    final boxOffset = box.localToGlobal(
+      const Offset(0.0, 0.0),
+      ancestor: rootRenderObject,
+    );
     if (boxOffset.dy.isNaN) return padding.bottom;
     final bottomRight = box.size.bottomRight(boxOffset);
     return bottomRight.dy + padding.bottom;
@@ -70,7 +78,10 @@ class GetPosition {
   ///Get the top position of the widget
   double getTop() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
-    final boxOffset = box.localToGlobal(const Offset(0.0, 0.0));
+    final boxOffset = box.localToGlobal(
+      const Offset(0.0, 0.0),
+      ancestor: rootRenderObject,
+    );
     if (boxOffset.dy.isNaN) return 0 - padding.top;
     final topLeft = box.size.topLeft(boxOffset);
     return topLeft.dy - padding.top;
@@ -79,7 +90,10 @@ class GetPosition {
   ///Get the left position of the widget
   double getLeft() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
-    final boxOffset = box.localToGlobal(const Offset(0.0, 0.0));
+    final boxOffset = box.localToGlobal(
+      const Offset(0.0, 0.0),
+      ancestor: rootRenderObject,
+    );
     if (boxOffset.dx.isNaN) return 0 - padding.left;
     final topLeft = box.size.topLeft(boxOffset);
     return topLeft.dx - padding.left;
@@ -88,10 +102,17 @@ class GetPosition {
   ///Get the right position of the widget
   double getRight() {
     final box = key!.currentContext!.findRenderObject() as RenderBox;
-    final boxOffset = box.localToGlobal(const Offset(0.0, 0.0));
+    final boxOffset = box.localToGlobal(
+      const Offset(0.0, 0.0),
+      ancestor: rootRenderObject,
+    );
     if (boxOffset.dx.isNaN) return padding.right;
-    final bottomRight =
-        box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0)));
+    final bottomRight = box.size.bottomRight(
+      box.localToGlobal(
+        const Offset(0.0, 0.0),
+        ancestor: rootRenderObject,
+      ),
+    );
     return bottomRight.dx + padding.right;
   }
 

diff --git a/lib/src/layout_overlays.dart b/lib/src/layout_overlays.dart
@@ -47,12 +47,14 @@ class AnchoredOverlay extends StatelessWidget {
   final bool showOverlay;
   final OverlayBuilderCallback? overlayBuilder;
   final Widget? child;
+  final RenderObject? rootRenderObject;
 
   const AnchoredOverlay({
     Key? key,
     this.showOverlay = false,
     this.overlayBuilder,
     this.child,
+    this.rootRenderObject,
   }) : super(key: key);
 
   @override
@@ -65,10 +67,19 @@ class AnchoredOverlay extends StatelessWidget {
             // To calculate the "anchor" point we grab the render box of
             // our parent Container and then we find the center of that box.
             final box = context.findRenderObject() as RenderBox;
-            final topLeft =
-                box.size.topLeft(box.localToGlobal(const Offset(0.0, 0.0)));
-            final bottomRight =
-                box.size.bottomRight(box.localToGlobal(const Offset(0.0, 0.0)));
+
+            final topLeft = box.size.topLeft(
+              box.localToGlobal(
+                const Offset(0.0, 0.0),
+                ancestor: rootRenderObject,
+              ),
+            );
+            final bottomRight = box.size.bottomRight(
+              box.localToGlobal(
+                const Offset(0.0, 0.0),
+                ancestor: rootRenderObject,
+              ),
+            );
             Rect anchorBounds;
             anchorBounds = (topLeft.dx.isNaN ||
                     topLeft.dy.isNaN ||

diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart
@@ -368,20 +368,32 @@ class _ShowcaseState extends State<Showcase> {
   bool _enableShowcase = true;
   Timer? timer;
   GetPosition? position;
+  Size? rootWidgetSize;
+  RenderBox? rootRenderObject;
 
   ShowCaseWidgetState get showCaseWidgetState => ShowCaseWidget.of(context);
 
+  @override
+  void initState() {
+    super.initState();
+    initRootWidget();
+  }
+
   @override
   void didChangeDependencies() {
     super.didChangeDependencies();
     _enableShowcase = showCaseWidgetState.enableShowcase;
 
+    recalculateRootWidgetSize();
+
     if (_enableShowcase) {
+      final size = MediaQuery.of(context).size;
       position ??= GetPosition(
+        rootRenderObject: rootRenderObject,
         key: widget.key,
         padding: widget.targetPadding,
-        screenWidth: MediaQuery.of(context).size.width,
-        screenHeight: MediaQuery.of(context).size.height,
+        screenWidth: rootWidgetSize?.width ?? size.width,
+        screenHeight: rootWidgetSize?.height ?? size.height,
       );
       showOverlay();
     }
@@ -423,9 +435,12 @@ class _ShowcaseState extends State<Showcase> {
   Widget build(BuildContext context) {
     if (_enableShowcase) {
       return AnchoredOverlay(
+        key: showCaseWidgetState.anchoredOverlayKey,
+        rootRenderObject: rootRenderObject,
         overlayBuilder: (context, rectBound, offset) {
-          final size = MediaQuery.of(context).size;
+          final size = rootWidgetSize ?? MediaQuery.of(context).size;
           position = GetPosition(
+            rootRenderObject: rootRenderObject,
             key: widget.key,
             padding: widget.targetPadding,
             screenWidth: size.width,
@@ -440,6 +455,24 @@ class _ShowcaseState extends State<Showcase> {
     return widget.child;
   }
 
+  void initRootWidget() {
+    ambiguate(WidgetsBinding.instance)?.addPostFrameCallback((_) {
+      rootWidgetSize = showCaseWidgetState.rootWidgetSize;
+      rootRenderObject = showCaseWidgetState.rootRenderObject;
+    });
+  }
+
+  void recalculateRootWidgetSize() {
+    ambiguate(WidgetsBinding.instance)?.addPostFrameCallback((_) {
+      final rootWidget =
+          context.findRootAncestorStateOfType<State<WidgetsApp>>();
+      rootRenderObject = rootWidget?.context.findRenderObject() as RenderBox?;
+      rootWidgetSize = rootWidget == null
+          ? MediaQuery.of(context).size
+          : rootRenderObject?.size;
+    });
+  }
+
   Future<void> _nextIfAny() async {
     if (timer != null && timer!.isActive) {
       if (showCaseWidgetState.enableAutoPlayLock) {
@@ -485,6 +518,7 @@ class _ShowcaseState extends State<Showcase> {
     Rect rectBound,
     Size screenSize,
   ) {
+    final mediaQuerySize = MediaQuery.of(context).size;
     var blur = 0.0;
     if (_showShowCase) {
       blur = widget.blurValue ?? showCaseWidgetState.blurValue;
@@ -520,17 +554,17 @@ class _ShowcaseState extends State<Showcase> {
                 ? BackdropFilter(
                     filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
                     child: Container(
-                      width: MediaQuery.of(context).size.width,
-                      height: MediaQuery.of(context).size.height,
+                      width: mediaQuerySize.width,
+                      height: mediaQuerySize.height,
                       decoration: BoxDecoration(
                         color: widget.overlayColor
                             .withOpacity(widget.overlayOpacity),
                       ),
                     ),
                   )
                 : Container(
-                    width: MediaQuery.of(context).size.width,
-                    height: MediaQuery.of(context).size.height,
+                    width: mediaQuerySize.width,
+                    height: mediaQuerySize.height,
                     decoration: BoxDecoration(
                       color: widget.overlayColor
                           .withOpacity(widget.overlayOpacity),

diff --git a/lib/src/showcase_widget.dart b/lib/src/showcase_widget.dart
@@ -23,6 +23,7 @@
 import 'package:flutter/material.dart';
 
 import '../showcaseview.dart';
+import 'extension.dart';
 
 class ShowCaseWidget extends StatefulWidget {
   final Builder builder;
@@ -122,6 +123,9 @@ class ShowCaseWidget extends StatefulWidget {
 class ShowCaseWidgetState extends State<ShowCaseWidget> {
   List<GlobalKey>? ids;
   int? activeWidgetId;
+  RenderBox? rootRenderObject;
+  Size? rootWidgetSize;
+  Key? anchoredOverlayKey;
 
   /// These properties are only here so that it can be accessed by
   /// [Showcase]
@@ -144,6 +148,23 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
   /// Returns value of [ShowCaseWidget.blurValue]
   double get blurValue => widget.blurValue;
 
+  @override
+  void initState() {
+    super.initState();
+    initRootWidget();
+  }
+
+  void initRootWidget() {
+    ambiguate(WidgetsBinding.instance)?.addPostFrameCallback((_) {
+      final rootWidget = context.findAncestorStateOfType<State<WidgetsApp>>();
+      rootRenderObject = rootWidget?.context.findRenderObject() as RenderBox?;
+      rootWidgetSize = rootWidget == null
+          ? MediaQuery.of(context).size
+          : rootRenderObject?.size;
+      anchoredOverlayKey = UniqueKey();
+    });
+  }
+
   /// Starts Showcase view from the beginning of specified list of widget ids.
   /// If this function is used when showcase has been disabled then it will
   /// throw an exception.