Skip to content

button: Replace GestureDetector with Listener for AnimatedScaleOnTap #1954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MritunjayTiwari14 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

button: Replace GestureDetector with Listener for AnimatedScaleOnTap #1954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions lib/widgets/button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import 'color.dart';
Expand Down Expand Up @@ -159,7 +160,7 @@ class ZulipWebUiKitButton extends StatelessWidget {

final labelColor = _labelColor(designVariables);

return AnimatedScaleOnTap(
return AnimatedScaleOnPrimaryPointerDown(
scaleEnd: 0.96,
duration: Duration(milliseconds: 100),
child: TextButton.icon(
Expand Down Expand Up @@ -270,10 +271,10 @@ class ZulipIconButton extends StatelessWidget {
}
}

/// Apply [Transform.scale] to the child widget when tapped, and reset its scale
/// when released, while animating the transitions.
class AnimatedScaleOnTap extends StatefulWidget {
const AnimatedScaleOnTap({
/// Apply [Transform.scale] to the child widget on primary pointer-down,
/// and reset its scale on -up or -cancel, with animated transitions.
class AnimatedScaleOnPrimaryPointerDown extends StatefulWidget {
const AnimatedScaleOnPrimaryPointerDown({
super.key,
required this.scaleEnd,
required this.duration,
Expand All @@ -289,10 +290,10 @@ class AnimatedScaleOnTap extends StatefulWidget {
final Widget child;

@override
State<AnimatedScaleOnTap> createState() => _AnimatedScaleOnTapState();
State<AnimatedScaleOnPrimaryPointerDown> createState() => _AnimatedScaleOnPrimaryPointerDownState();
}

class _AnimatedScaleOnTapState extends State<AnimatedScaleOnTap> {
class _AnimatedScaleOnPrimaryPointerDownState extends State<AnimatedScaleOnPrimaryPointerDown> {
double _scale = 1;

void _changeScale(double scale) {
Expand All @@ -303,11 +304,13 @@ class _AnimatedScaleOnTapState extends State<AnimatedScaleOnTap> {

@override
Widget build(BuildContext context) {
return GestureDetector(
return Listener(
behavior: HitTestBehavior.translucent,
onTapDown: (_) => _changeScale(widget.scaleEnd),
onTapUp: (_) => _changeScale(1),
onTapCancel: () => _changeScale(1),
onPointerDown: (PointerDownEvent pointerDownEvent) {
if((pointerDownEvent.buttons & kPrimaryButton) != 0) _changeScale(widget.scaleEnd);
},
onPointerUp: (_) => _changeScale(1),
onPointerCancel: (_) => _changeScale(1),
child: AnimatedScale(
scale: _scale,
duration: widget.duration,
Expand Down
6 changes: 3 additions & 3 deletions lib/widgets/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ class _NavigationBarButton extends StatelessWidget {
final designVariables = DesignVariables.of(context);
final color = selected ? designVariables.iconSelected : designVariables.icon;

Widget result = AnimatedScaleOnTap(
Widget result = AnimatedScaleOnPrimaryPointerDown(
scaleEnd: 0.875,
duration: const Duration(milliseconds: 100),
child: Material(
Expand Down Expand Up @@ -389,7 +389,7 @@ void _showMainMenu(BuildContext context, {
child: Column(children: menuItems)))),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: AnimatedScaleOnTap(
child: AnimatedScaleOnPrimaryPointerDown(
scaleEnd: 0.95,
duration: Duration(milliseconds: 100),
child: BottomSheetDismissButton(
Expand Down Expand Up @@ -459,7 +459,7 @@ abstract class _MenuButton extends StatelessWidget {
~WidgetState.pressed: selected ? borderSideSelected : null,
}));

return AnimatedScaleOnTap(
return AnimatedScaleOnPrimaryPointerDown(
duration: const Duration(milliseconds: 100),
scaleEnd: 0.95,
child: ConstrainedBox(
Expand Down
31 changes: 31 additions & 0 deletions test/widgets/button_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,37 @@ void main() {
check(renderObject).size.equals(Size.square(40));
});

group('AnimatedScaleOnPrimaryPointerDown', () {
void checkScale(WidgetTester tester, Finder finder, double expectedScale) {
final scale = tester.widget<AnimatedScale>(finder).scale;
check(scale).equals(expectedScale);
}

testWidgets('Animation happen instantly when pointer down', (tester) async {
addTearDown(testBinding.reset);

await tester.pumpWidget(TestZulipApp(
child: AnimatedScaleOnPrimaryPointerDown(
scaleEnd: 0.95,
duration: Duration(milliseconds: 100),
child: UnconstrainedBox(
Copy link
Collaborator

@chrisbobbe chrisbobbe Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the UnconstrainedBox needed for the test? Seems like not, and the test would be simpler without it.

child: ZulipIconButton(
icon: ZulipIcons.follow,
onPressed: () {})))));
await tester.pump();

final animatedScaleFinder = find.byType(AnimatedScale);

final gesture = await tester.startGesture(tester.getCenter(find.byType(ZulipIconButton)));
await tester.pump();
checkScale(tester, animatedScaleFinder, 0.95);

await gesture.up();
await tester.pump();
checkScale(tester, animatedScaleFinder, 1.0);
});
});

// TODO test that the touch feedback fills the whole square
});
}