Skip to content

Instantly share code, notes, and snippets.

@BarryDaBee

BarryDaBee/bouncing_button.dart

Created January 26, 2025 01:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BarryDaBee/d6f9272de4bdb1a6be2b2816e8e9f157 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BarryDaBee/d6f9272de4bdb1a6be2b2816e8e9f157 to your computer and use it in GitHub Desktop.
Download ZIP
Bouncing effect onClick widget with flutter_hooks
Raw
bouncing_button.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
class BouncingButton extends HookWidget {
const BouncingButton({
required this.child,
required this.onTap,
super.key,
this.scaleDown = 0.91,
this.enableHapticFeedback = false,
});
final Widget child;
final VoidCallback? onTap;
final double scaleDown;
final bool enableHapticFeedback;
@override
Widget build(BuildContext context) {
final controller = useAnimationController(
duration: const Duration(milliseconds: 200),
initialValue: 1,
lowerBound: scaleDown,
);
final curvedAnimation =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
useAnimation(controller);
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTapUp: (_) {
if (onTap == null) return;
controller.forward();
},
onTapCancel: () {
if (onTap == null) return;
controller.forward();
},
onTap: () {
if (enableHapticFeedback) HapticFeedback.lightImpact();
if (onTap == null) return;
Future.delayed(Duration.zero, () {
controller.reverse().then((value) {
onTap?.call();
controller.forward();
});
});
},
child: Transform.scale(
scale: curvedAnimation.value,
child: child,
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment