github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhances intuitiveness of RawMagnifier's example (#150308)

Browse Source 
### 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 https://github.com/flutter/flutter/issues/150307
This commit is contained in:
Huy 2024-07-19 17:09:18 +03:00 committed by GitHub
parent 89c88ae8e8
commit 7d5c1c04fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/api/lib/widgets/magnifier/magnifier.0.dart
View File

@ -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,
),
)

33
examples/api/test/widgets/magnifier/magnifier.0_test.dart
View File

@ -19,33 +19,38 @@ void main() {
);
}
expect(
tester.widget(find.byType(Positioned)),
isPositionedAt(Offset.zero),
);
// 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);
final Offset centerOfFlutterLogo = tester.getCenter(find.byType(Positioned));
final Offset topLeftOfFlutterLogo = tester.getTopLeft(find.byType(FlutterLogo));
// 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(