iOS style button interaction animation implementation for Flutter

A Flutter developer created TapButton, an iOS-style button interaction animation that replaces Flutter's default Material ripple effect with opacity-based press feedback. The widget uses Listener, RawGestureDetector, and FadeTransition to provide immediate opacity changes on pointer down and smooth recovery on release, while also supporting async taps, disabled states, loading states, and nested pointer blocking.

| / | | | How to use TapButton | | | TapButton is a small iOS-style press effect wrapper that replaces Flutter's | | | default Material ripple. | | | It does not use: | | | - InkWell | | | - InkResponse | | | - Material splash / ripple | | | Instead, it uses: | | | - Listener | | | - RawGestureDetector | | | - FadeTransition | | | 1 Basic usage | | | dart | | | TapButton | | | onTap: { | | | print 'pressed' ; | | | }, | | | child: Container | | | height: 48, | | | padding: const EdgeInsets.symmetric horizontal: 20 , | | | decoration: BoxDecoration | | | color: Colors.black, | | | borderRadius: BorderRadius.circular 999 , | | | , | | | alignment: Alignment.center, | | | child: const Text | | | 'Continue', | | | style: TextStyle color: Colors.white , | | | , | | | , | | | | | | | | | 2 Async tap | | | asyncOnTap prevents duplicate taps while the async callback is running. | | | dart | | | TapButton | | | asyncOnTap: async { | | | await save ; | | | }, | | | child: const Text 'Save' , | | | | | | | | | 3 Disabled state | | | dart | | | TapButton | | | enabled: false, | | | onTap: {}, | | | child: const Text 'Disabled' , | | | | | | | | | 4 Loading state | | | When isLoading is true, taps are blocked and the opacity gently pulses. | | | dart | | | TapButton | | | isLoading: true, | | | onTap: {}, | | | child: const Text 'Loading' , | | | | | | | | | 5 Prevent parent TapButton from receiving a nested pointer | | | Use TapButtonPointerBlocker around children that should not trigger the | | | parent TapButton. | | | dart | | | TapButton | | | onTap: { | | | print 'parent' ; | | | }, | | | child: Row | | | children: | | | const Text 'Parent row' , | | | TapButtonPointerBlocker | | | child: Slider | | | value: 0.5, | | | onChanged: {}, | | | , | | | , | | | , | | | , | | | | | | | | | / | | | import 'dart:async'; | | | import 'package:flutter/gestures.dart'; | | | import 'package:flutter/material.dart'; | | | typedef AsyncTapCallback = FutureOr<void Function ; | | | class PointerClaimRegistry { | | | static final Map<int, Object claims = <int, Object {}; | | | static bool claim int pointer, Object owner { | | | final existing = claims pointer ; | | | if existing = null && existing = owner { | | | return false; | | | } | | | claims pointer = owner; | | | return true; | | | } | | | static void release int pointer, Object owner { | | | final existing = claims pointer ; | | | if existing == owner { | | | claims.remove pointer ; | | | } | | | } | | | } | | | /// iOS-style tap wrapper. | | | /// | | | /// This replaces Flutter's default ripple effect with a simple opacity-based | | | /// press effect. | | | /// | | | /// Features: | | | /// - No Material ripple | | | /// - Immediate opacity feedback on pointer down | | | /// - Smooth opacity recovery on pointer up / cancel | | | /// - Automatically cancels press state while scrolling | | | /// - Prevents nested TapButton pointer conflicts | | | /// - Blocks duplicate taps while asyncOnTap is running | | | class TapButton extends StatefulWidget { | | | const TapButton { | | | super.key, | | | required this.child, | | | this.onTap, | | | this.asyncOnTap, | | | this.enabled = true, | | | this.isLoading = false, | | | this.pressedOpacity = 0.4, | | | this.disabledOpacity = 0.5, | | | this.duration = const Duration milliseconds: 200 , | | | this.loadingDuration = const Duration milliseconds: 500 , | | | this.hitTestBehavior = HitTestBehavior.opaque, | | | } : assert | | | onTap == null || asyncOnTap == null, | | | 'onTap and asyncOnTap cannot be provided at the same time.', | | | ; | | | final Widget child; | | | final VoidCallback? onTap; | | | final AsyncTapCallback? asyncOnTap; | | | final bool enabled; | | | final bool isLoading; | | | final double pressedOpacity; | | | final double disabledOpacity; | | | final Duration duration; | | | final Duration loadingDuration; | | | final HitTestBehavior hitTestBehavior; | | | @override | | | State<TapButton createState = TapButtonState ; | | | } | | | class TapButtonState extends State<TapButton with TickerProviderStateMixin { | | | final Set<int activePointers = <int {}; | | | final Set<int insidePointers = <int {}; | | | ScrollPosition? scrollPosition; | | | bool isScrolling = false; | | | bool isAsyncBusy = false; | | | late final AnimationController pressController; | | | late Animation<double pressOpacity; | | | late final AnimationController loadingController; | | | late Animation<double loadingOpacity; | | | bool get isInteractive { | | | return widget.enabled && | | | widget.isLoading && | | | isAsyncBusy && | | | widget.onTap = null || widget.asyncOnTap = null ; | | | } | | | @override | | | void initState { | | | super.initState ; | | | pressController = AnimationController | | | duration: widget.duration, | | | vsync: this, | | | ; | | | loadingController = AnimationController | | | duration: widget.loadingDuration, | | | vsync: this, | | | ; | | | rebuildAnimations ; | | | if widget.isLoading { | | | loadingController.value = 1.0; | | | loadingController.repeat reverse: true ; | | | } | | | } | | | @override | | | void didUpdateWidget covariant TapButton oldWidget { | | | super.didUpdateWidget oldWidget ; | | | if oldWidget.pressedOpacity = widget.pressedOpacity || | | | oldWidget.disabledOpacity = widget.disabledOpacity || | | | oldWidget.duration = widget.duration || | | | oldWidget.loadingDuration = widget.loadingDuration { | | | pressController.duration = widget.duration; | | | loadingController.duration = widget.loadingDuration; | | | rebuildAnimations ; | | | } | | | if oldWidget.isLoading = widget.isLoading { | | | cancelAllPointers ; | | | pressController.value = 0.0; | | | if widget.isLoading { | | | loadingController.value = 1.0; | | | loadingController.repeat reverse: true ; | | | } else { | | | loadingController.stop ; | | | loadingController.value = 0.0; | | | } | | | } | | | } | | | @override | | | void didChangeDependencies { | | | super.didChangeDependencies ; | | | updateScrollPosition ; | | | } | | | void rebuildAnimations { | | | pressOpacity = Tween<double | | | begin: 1.0, | | | end: widget.pressedOpacity, | | | .animate | | | CurvedAnimation | | | parent: pressController, | | | curve: Curves.easeOut, | | | , | | | ; | | | loadingOpacity = Tween<double | | | begin: 0.8, | | | end: widget.disabledOpacity, | | | .animate | | | CurvedAnimation | | | parent: loadingController, | | | curve: Curves.easeInOut, | | | , | | | ; | | | } | | | void updateScrollPosition { | | | final position = Scrollable.maybeOf context ?.position; | | | if scrollPosition == position return; | | | scrollPosition?.isScrollingNotifier.removeListener handleScrollState ; | | | scrollPosition = position; | | | scrollPosition?.isScrollingNotifier.addListener handleScrollState ; | | | } | | | void handleScrollState { | | | final isScrolling = scrollPosition?.isScrollingNotifier.value ?? false; | | | if isScrolling == isScrolling return; | | | isScrolling = isScrolling; | | | if isScrolling { | | | cancelAllPointers ; | | | } | | | } | | | void handlePointerDown PointerDownEvent event { | | | if mounted || isInteractive || isScrolling return; | | | if PointerClaimRegistry.claim event.pointer, this return; | | | activePointers.add event.pointer ; | | | insidePointers.add event.pointer ; | | | pressController.value = 1.0; | | | } | | | void handlePointerMove PointerMoveEvent event { | | | if mounted || isInteractive return; | | | if activePointers.contains event.pointer return; | | | final isInside = isInsideGlobal event.position ; | | | final wasInside = insidePointers.contains event.pointer ; | | | if isInside == wasInside return; | | | if isInside { | | | insidePointers.add event.pointer ; | | | } else { | | | insidePointers.remove event.pointer ; | | | } | | | updatePressedOpacity ; | | | } | | | void handlePointerUp PointerUpEvent event { | | | if mounted || isInteractive return; | | | if activePointers.remove event.pointer return; | | | insidePointers.remove event.pointer ; | | | PointerClaimRegistry.release event.pointer, this ; | | | updatePressedOpacity ; | | | } | | | void handlePointerCancel PointerCancelEvent event { | | | cancelPointer event.pointer ; | | | } | | | bool isInsideGlobal Offset globalPosition { | | | final renderObject = context.findRenderObject ; | | | if renderObject is RenderBox return false; | | | if renderObject.attached || renderObject.hasSize return false; | | | final local = renderObject.globalToLocal globalPosition ; | | | final size = renderObject.size; | | | return local.dx = 0 && | | | local.dy = 0 && | | | local.dx <= size.width && | | | local.dy <= size.height; | | | } | | | void updatePressedOpacity { | | | if insidePointers.isNotEmpty { | | | pressController.forward ; | | | } else { | | | pressController.reverse ; | | | } | | | } | | | void cancelAllPointers { | | | if mounted return; | | | for final pointer in activePointers { | | | PointerClaimRegistry.release pointer, this ; | | | } | | | activePointers.clear ; | | | insidePointers.clear ; | | | updatePressedOpacity ; | | | } | | | void cancelPointer int pointer { | | | if activePointers.remove pointer return; | | | insidePointers.remove pointer ; | | | PointerClaimRegistry.release pointer, this ; | | | updatePressedOpacity ; | | | } | | | bool handleScrollNotification ScrollNotification notification { | | | if notification is ScrollStartNotification { | | | isScrolling = true; | | | cancelAllPointers ; | | | } else if notification is ScrollEndNotification { | | | isScrolling = false; | | | } | | | return false; | | | } | | | void handleTapUp TapUpDetails details { | | | if mounted || isInteractive return; | | | if isInsideGlobal details.globalPosition return; | | | if widget.asyncOnTap = null { | | | unawaited handleAsyncTap ; | | | } else { | | | widget.onTap?.call ; | | | } | | | } | | | Future<void handleAsyncTap async { | | | if isAsyncBusy return; | | | setState { | | | isAsyncBusy = true; | | | } ; | | | try { | | | await widget.asyncOnTap?.call ; | | | } finally { | | | if mounted { | | | setState { | | | isAsyncBusy = false; | | | } ; | | | } | | | } | | | } | | | @override | | | void dispose { | | | scrollPosition?.isScrollingNotifier.removeListener handleScrollState ; | | | for final pointer in activePointers { | | | PointerClaimRegistry.release pointer, this ; | | | } | | | activePointers.clear ; | | | insidePointers.clear ; | | | pressController.dispose ; | | | loadingController.dispose ; | | | super.dispose ; | | | } | | | @override | | | Widget build BuildContext context { | | | final opacity = widget.isLoading ? loadingOpacity : pressOpacity; | | | return NotificationListener<ScrollNotification | | | onNotification: handleScrollNotification, | | | child: Listener | | | onPointerDown: handlePointerDown, | | | onPointerMove: handlePointerMove, | | | onPointerUp: handlePointerUp, | | | onPointerCancel: handlePointerCancel, | | | behavior: widget.hitTestBehavior, | | | child: TapCancelScope | | | enabled: isInteractive, | | | onTapCancel: cancelAllPointers, | | | onTapUp: handleTapUp, | | | child: RepaintBoundary | | | child: Semantics | | | button: true, | | | enabled: isInteractive, | | | onTap: isInteractive | | | ? widget.onTap ?? = unawaited handleAsyncTap | | | : null, | | | child: FadeTransition | | | opacity: widget.enabled | | | ? opacity | | | : AlwaysStoppedAnimation<double | | | widget.disabledOpacity, | | | , | | | child: widget.child, | | | , | | | , | | | , | | | , | | | , | | | ; | | | } | | | } | | | class TapCancelScope extends StatelessWidget { | | | const TapCancelScope { | | | required this.enabled, | | | required this.onTapCancel, | | | required this.onTapUp, | | | required this.child, | | | } ; | | | static final DeviceGestureSettings gestureSettings = DeviceGestureSettings | | | touchSlop: 1000000, | | | ; | | | final bool enabled; | | | final VoidCallback onTapCancel; | | | final GestureTapUpCallback onTapUp; | | | final Widget child; | | | @override | | | Widget build BuildContext context { | | | if enabled return child; | | | return RawGestureDetector | | | behavior: HitTestBehavior.opaque, | | | gestures: <Type, GestureRecognizerFactory { | | | TapGestureRecognizer: | | | GestureRecognizerFactoryWithHandlers<TapGestureRecognizer | | | = TapGestureRecognizer , | | | instance { | | | instance | | | ..onTapCancel = onTapCancel | | | ..onTapUp = onTapUp | | | ..gestureSettings = gestureSettings; | | | }, | | | , | | | }, | | | child: child, | | | ; | | | } | | | } | | | /// Blocks a parent TapButton from claiming pointers inside this subtree. | | | /// | | | /// Useful for sliders, scrollable regions, embedded controls, or any child | | | /// widget that should handle its own gestures. | | | class TapButtonPointerBlocker extends StatefulWidget { | | | const TapButtonPointerBlocker { | | | super.key, | | | required this.child, | | | this.enabled = true, | | | } ; | | | final Widget child; | | | final bool enabled; | | | @override | | | State<TapButtonPointerBlocker createState = | | | TapButtonPointerBlockerState ; | | | } | | | class TapButtonPointerBlockerState extends State<TapButtonPointerBlocker { | | | final Set<int activePointers = <int {}; | | | @override | | | void dispose { | | | for final pointer in activePointers { | | | PointerClaimRegistry.release pointer, this ; | | | } | | | activePointers.clear ; | | | super.dispose ; | | | } | | | void handlePointerDown PointerDownEvent event { | | | if widget.enabled return; | | | if PointerClaimRegistry.claim event.pointer, this return; | | | activePointers.add event.pointer ; | | | } | | | void handlePointerUp PointerUpEvent event { | | | releasePointer event.pointer ; | | | } | | | void handlePointerCancel PointerCancelEvent event { | | | releasePointer event.pointer ; | | | } | | | void releasePointer int pointer { | | | if activePointers.remove pointer return; | | | PointerClaimRegistry.release pointer, this ; | | | } | | | @override | | | Widget build BuildContext context { | | | if widget.enabled return widget.child; | | | return Listener | | | onPointerDown: handlePointerDown, | | | onPointerUp: handlePointerUp, | | | onPointerCancel: handlePointerCancel, | | | behavior: HitTestBehavior.opaque, | | | child: widget.child, | | | ; | | | } | | | } |