Enhances intuitiveness of RawMagnifier's example (#150308)

### Demo | Before | After | | --------------- | --------------- | <video src="https://github.com/flutter/flutter/assets/104349824/ee6d45f1-bcf0-4136-8d1d-a642e0767322"/> | <video src="https://github.com/flutter/flutter/assets/104349824/1e2bb33d-40f1-4cf6-9999-f67bef638633"/> ### Related issue Fixes flutter/flutter#150307
flutter · Jul 19, 2024 · 7d5c1c0 · 7d5c1c0
1 parent 89c88ae
commit 7d5c1c0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/examples/api/lib/widgets/magnifier/magnifier.0.dart b/examples/api/lib/widgets/magnifier/magnifier.0.dart
@@ -14,7 +14,8 @@ class MagnifierExampleApp extends StatefulWidget {
 }
 
 class _MagnifierExampleAppState extends State<MagnifierExampleApp> {
-  Offset dragGesturePosition = Offset.zero;
+  static const double magnifierRadius = 50.0;
+  Offset dragGesturePosition = const Offset(100, 100);
 
   @override
   Widget build(BuildContext context) {
@@ -34,18 +35,23 @@ class _MagnifierExampleAppState extends State<MagnifierExampleApp> {
                           dragGesturePosition = details.localPosition;
                         },
                       ),
+                      onPanDown: (DragDownDetails details) => setState(
+                        () {
+                          dragGesturePosition = details.localPosition;
+                        },
+                      ),
                       child: const FlutterLogo(size: 200),
                     ),
                     Positioned(
-                      left: dragGesturePosition.dx,
-                      top: dragGesturePosition.dy,
+                      left: dragGesturePosition.dx - magnifierRadius,
+                      top: dragGesturePosition.dy - magnifierRadius,
                       child: const RawMagnifier(
                         decoration: MagnifierDecoration(
                           shape: CircleBorder(
                             side: BorderSide(color: Colors.pink, width: 3),
                           ),
                         ),
-                        size: Size(100, 100),
+                        size: Size(magnifierRadius * 2, magnifierRadius * 2),
                         magnificationScale: 2,
                       ),
                     )

diff --git a/examples/api/test/widgets/magnifier/magnifier.0_test.dart b/examples/api/test/widgets/magnifier/magnifier.0_test.dart
@@ -19,33 +19,38 @@ void main() {
       );
     }
 
-    expect(
-      tester.widget(find.byType(Positioned)),
-      isPositionedAt(Offset.zero),
-    );
-
-    final Offset centerOfFlutterLogo = tester.getCenter(find.byType(Positioned));
-    final Offset topLeftOfFlutterLogo = tester.getTopLeft(find.byType(FlutterLogo));
-
+    // Make sure magnifier is present.
+    final Finder positionedWidget = find.byType(Positioned);
+    final Widget positionedWidgetInTree = tester.widget(positionedWidget);
+    final Positioned oldConcretePositioned = positionedWidgetInTree as Positioned;
+    expect(positionedWidget, findsOneWidget);
+
+    // Confirm if magnifier is in the center of the FlutterLogo.
+    final Offset centerOfPositioned = tester.getCenter(positionedWidget);
+    final Offset centerOfFlutterLogo = tester.getCenter(find.byType(FlutterLogo));
+    expect(centerOfPositioned, equals(centerOfFlutterLogo));
+
+    // Drag the magnifier and confirm its new position is expected.
     const Offset dragDistance = Offset(10, 10);
-
-    await tester.dragFrom(centerOfFlutterLogo, dragDistance);
+    final Offset updatedPositioned = Offset(
+      oldConcretePositioned.left ?? 0.0 + 10.0,
+      oldConcretePositioned.top ?? 0.0 + 10.0,
+    );
+    await tester.dragFrom(centerOfPositioned, dragDistance);
     await tester.pump();
-
     expect(
-      tester.widget(find.byType(Positioned)),
-      // Need to adjust by the topleft since the position is local.
-      isPositionedAt((centerOfFlutterLogo - topLeftOfFlutterLogo) + dragDistance),
+      positionedWidgetInTree,
+      isPositionedAt(updatedPositioned),
     );
   });
 
   testWidgets('should match golden', (WidgetTester tester) async {
     await tester.pumpWidget(const example.MagnifierExampleApp());
 
-    final Offset centerOfFlutterLogo = tester.getCenter(find.byType(Positioned));
+    final Offset centerOfPositioned = tester.getCenter(find.byType(Positioned));
     const Offset dragDistance = Offset(10, 10);
 
-    await tester.dragFrom(centerOfFlutterLogo, dragDistance);
+    await tester.dragFrom(centerOfPositioned, dragDistance);
     await tester.pump();
 
     await expectLater(