A versatile touch ripple effect widget designed for Flutter, offering customization options

09 August 2023
0
202

Touch Ripple For Flutter

Customizable touch ripple for flutter widget

This Flutter package allows developer to customize most of the behaviors and animations, with excellent performance and a touch effect package that can be controlled externally.

In conclusion, using this package enables easy definition of flexible touch behaviors or touch animation.

View

ezgif-5-2ec16f8df8

How to apply ripple widget

Please referance to this code!

TouchRipple(
    onTap: () => print('Hello World!'),
    child: ... // <- this your widget!
),

Referance to the appropriate code to implement page movement with this code

TouchRipple(
    onTap: () {
        HapticFeedback.selectionClick();
        onTap?.call();
    },
    // or behavior
    tapBehavior: const TouchRippleBehavior(
        // "The spread animation must complete in order for the registered
        // event callback function to be called." which is equivalent to defining
        eventCallBackableMinPercent: 1,
    ),
);

Apply eventCallBackableMinPercent = 1

When defining the argument eventCallBackableMinPercent of the above [TouchRippleBehavior] to be 1, we can implement a behavior to move the page after the touch ripple effect is complete.

ezgif-2-af1eff8e7e

properties of TouchRipple Widget

ProperieDescriptionDefault valueTypechildThe [child] widget contained by the [TouchRipple] widget.requiredWidgetonTapDefines a function that is called when the user taps on that widget.nullTouchRippleEventCallBackonDoubleTapDefines a function that is called when the user double taps on that widget.nullTouchRippleEventCallBackonDoubleTapContinuableChecked…nullTouchRippleContinuableCheckedCallBackonDoubleTapStartDefines a function that is called when a double tap event occurs and enters the double tap state.nullTouchRippleStateCallBackonDoubleTapEndDefines a function that is called when a double tap event is fired and the double tap state has ended.nullTouchRippleStateCallBackonLongTapDefines a function that is called when the user long tap on that widget.nullTouchRippleContinuableCheckedCallBackonLongTapStartDefines a function that is called when a long tap event occurs and enters the long tap state.nullTouchRippleStateCallBackonLongTapEndDefines a function that is called when a long tap event is fired and the long tap state has ended.nullTouchRippleStateCallBackonHoverStartDefines a function that is called when a hover event occurs and enters the hover state.nullTouchRippleStateCallBackonHoverEndDefines a function that is called when the hover state ends.nullTouchRippleStateCallBackonFocusStartDefines a callback function that is called when the transitions to the focus state, The focus state is a state in which the gesture can continue to detect and process pointers. For example, a double tap state can be defined as a state in which the widget continues to detect the pointer and define the gesture continuously.nullTouchRippleStateCallBackonFocusEndDefines a callback function that is called when the focus state ends, The focus state is a state in which the gesture can continue to detect and process pointers. For example, a double tap state can be defined as a state in which the widget continues to detect the pointer and define the gesture continuously.nullTouchRippleStateCallBackbehaviorDefines the default behavior of touch ripple all event. See also: If an behavior is not defined in the tap, double tap, or long tap events, it will be defined as the value defined for that behavior.nullTouchRippleBehaviortapBehaviorDefines the behavior applied when a tap event occurs.nullTouchRippleBehaviordoubleTapBehaviorDefines the behavior applied when a double tap event occurs.nullTouchRippleBehaviorlongTapBehaviorDefines the behavior applied when a long tap event occurs.nullTouchRippleBehaviorisDoubleTapContinuableDefines whether double tapping is allowed in succession.trueboolisLongTapContinuableDefines whether long tapping is allowed in succession.trueboolrejectBehaviorDefines the touch ripple reject with pointer position behavior.TouchRippleRejectBehavior.leaveTouchRippleRejectBehaviorcancelledBehaviorDefines the behavior that causes the gesture to be cancelled.TouchRippleCancelledBehavior.noneTouchRippleCancelledBehaviorlongTapFocusStartEvent…TouchRippleLongTapFocusStartEvent.onRejectableTouchRippleLongTapFocusStartEventrippleColorDefines touch ripple background color of all events.getter defaultRippleColorColorhoverColorDefines the background color of the hover effect shown when the mouse hovers.nullColorhoverFadeInDurationDefines fade-in duration of hover animatin.nullDurationhoverFadeInCurveDefines fade-in curve of hover curved animatin.nullCurvehoverFadeOutDurationDefines fade-out duration of hover animatin.nullDurationhoverFadeOutCurveDefines fade-out curve of hover curved animatin.nullCurverippleScaleDefines scale of touch ripple effect size.1double (1~max)tapableDuration[tapableDuration] defines the duration after which the tap event is canceled after the pointerDown event occurs, In other words, in order to detect the point and have the tap event occur, the tap event must occur before the [tapableDuration].nullDurationrenderOrderDefines the order in which the touch ripple effect is drawn.TouchRippleRenderOrderType.foregroundTouchRippleRenderOrderTypehitTestBehaviorSame as [HitTestBehavior] of [RawGestureDetector].HitTestBehavior.translucentHitTestBehaviordoubleTappableDurationThe duration between two taps that is considered a double tap, This refers to the time interval used to recognize double taps, If a tap occurs and a tap occurs again before [doubleTappableDuration], it is considered a double tap.const Duration(milliseconds: 250)DurationdoubleTapHoldDurationDefines the minimum duration to end the double tap state. If a double tap state starts and no tap events occur during that duration, the double tap state ends.nullDurationlongTappableDurationDefines the minimum duration define as a long tap. See also: A pointer down event is defined as a long tap when it occurs and a duration of [longTappableDuration] or more has elapsed. If the value is not defined, it is replaced by the spread duration of the long tap behavior.const Duration(milliseconds: 750)DurationlongTapStartDeleyDurationDefines the amount of duration that must elapse before a long press gesture is considered initiated. See also: For example if that value is defined as 500 milliseconds, the long press action is not considered to have started until the user has held down the widget for at least 500 milliseconds.const Duration(milliseconds: 150)DurationtapPreviewMinDurationThe minimum duration to wait before showing the preview tap effect, if no other events need to be considered.const Duration(milliseconds: 150)DurationcontrollerThis is the controller you define when you need to manage touch ripple effects externally.nullTouchRippleControllerborderRadiusSame as [BorderRadius] of [ClipRRect].BorderRadius.zeroTouchRippleControllerhoverCursorDefines the mouse cursor that is visible when hovering with the mouse.SystemMouseCursors.clickSystemMouseCursorhoverColorRelativeOpacityDefines what percentage of ripple color opacity the default hover color will be defined as when no hover color is artificially defined.0.4doublefocusColorRelativeOpacityDefines what percentage of ripple color opacity the default focus color will be defined as when no focus color is artificially defined.0.4doubleuseHoverEffectDefines whether a hover effect should be used throughout.truebooluseFocusEffectDefines whether a focus effect should be used throughout.trueboolfocusColorDefines the background colour of the focus effect that occurs on focus.nullColorfocusFadeInDurationDefines fade-in duration of focus animatin.const Duration(milliseconds: 150)DurationfocusFadeInCurveDefines fade-in curve of focus curved animatin.Curves.easeOutCurvefocusFadeOutDurationDefines fade-out duration of focus animatin.nullDurationfocusFadeOutCurveDefines fade-out curve of focus curved animatin.nullCurveuseDoubleTapFocusEffectDefines whether to use the focus effect on double tap state.truebooluseLongTapFocusEffectDefines whether to use the focus effect on long tap state.trueboolisOnHoveredDisableFocusEffectDefines whether to disable the focus effect when in a hover state.falsebool

properties of TouchRippleBehavior

See also: Because this values is flexible and interacts with multiple values, we were unable to document a default value.

ProperieDescriptionTypeoverlapDefines the behavior when the effect is overlapped.TouchRippleOverlapBehaviorlowerPercentDefines in decimal form ranging from 0 to 1, at what point the spread animation of the touch ripple effect will be started.double (0~1)upperPercentDefines in decimal form ranging from 0 to 1, at what point the spread animation of the touch ripple effect will be ended.double (0~1)fadeLowerPercentDefines in decimal form ranging from 0 to 1, at what point the fade animation of the touch ripple effect will be started.double (0~1)fadeUpperPercentDefines in decimal form ranging from 0 to 1, at what point the fade animation of the touch ripple effect will be ended.double (0~1)eventCallBackableMinPercentDefines the point in the spread animation of the touch ripple effect when the registered event callback function can be called. For example, if the user is about to click to move the page, you don’t want the event callback function to be called before the effect has fully spread, causing the page to move.doublespreadDurationDefines the duration of the touch ripple spread animation.DurationspreadCurveDefines the curve of the touch ripple spread curved animation.CurvefadeInDurationDefines the duration of the touch ripple fade-in of fade animation.DurationfadeInCurveDefines the curve of the touch ripple fade-in of fade curved animation.CurvefadeOutDurationDefines the duration of the touch ripple fade-out of fade animation.DurationfadeOutCurveDefines the curve of the touch ripple fade-out of fade curved animation.CurvecanceledDurationDefines the duration for the touch ripple effect to fade out when it is interrupted by a touch ripple overlap behavior.DurationcanceledDurationDefines the duration for the touch ripple effect to fade out when it is interrupted by a touch ripple overlap behavior.DurationcanceledCurveDefines the curve of the fade out curve animation when the touch ripple effect is cancelled midway by the touch ripple overlap behavior.Curve

Values of TouchRippleOverlapBehavior

This enum is used to defines the behavior of a touch ripple when it overlaps.

ProperieDescriptionoverlappableDefines that the touch ripples should overlap.cancelIf the effects overlap, the previous touch effect will be canceled and the should be added to the stack will be added.ignoringIf the effects overlap, ignore and cancel the event until the previous touch effect disappears.

Apply TouchRippleRejectBehavior.overlappable

ezgif-2-29d7de7115

Apply TouchRippleRejectBehavior.cancel

ezgif-2-5f471041ff

Apply TouchRippleRejectBehavior.ignoring

ezgif-2-6f60071360

Values of TouchRippleRejectBehavior

This enum is defines behavior for which the gesture is rejected.

ProperieDescriptiontouchSlopOnce the pointer is detected, the event is canceled if the pointer movement distance is greater than or equal to [kTouchSlop].leaveOnce the pointer is detected, the event is canceled if the pointer position is outside the position occupied by the widget.

Apply TouchRippleRejectBehavior.touchSlop

ezgif-5-d5e8cb93e2

Apply TouchRippleRejectBehavior.leave

ezgif-5-63fc65bd9f

Values of TouchRippleCancelledBehavior

This enum is defines the task when the gesture is cancelled.

ValueDescriptionnoneNo specific task is performed when the gesture is canceled.stopSpreadThe spread animation of the touch ripple effect is stopped when the gesture is canceled.reverseSpreadThe spread animation of the touch ripple effect is reversed when the gesture is canceled.

Apply TouchRippleCancelBehavior.none

ezgif-1-8b40a9458c

Apply TouchRippleCancelBehavior.stopSpread

ezgif-1-61b8e1cf2c

Apply TouchRippleCancelBehavior.reverseSpread

ezgif-1-fe8e2bf8fa

Values of TouchRippleLongTapFocusStartEvent

ValueDescriptiononContinueStartThe considered to be in focus when it is in a continuable state.onRejectableThe situation that defines whether it is a long tap is considered the focus state.

Apply TouchRippleCancelBehavior.onContinueStart

ezgif-1-8ad43f2371

Apply TouchRippleCancelBehavior.onRejectable

ezgif-1-fafc42efee

Values of TouchRippleRenderOrderType

This enum is used to defines the render order of a touch ripple effects.

ValueDescriptionforegroundThis value Defines that the touch ripple should be rendered in front of other elementsbackgroundThis value Defines that the touch ripple should be rendered behind other elements.