SInkButton class

A customizable button widget with ink splash animation and haptic feedback.

SInkButton provides a Material Design-inspired ink splash effect that originates from the exact tap position, creating a more natural and responsive feel compared to standard buttons.

Features

  • Ink splash animation: Circular splash effect expanding from tap position
  • Haptic feedback: Optional tactile feedback on tap (iOS/Android)
  • Hover effects: Visual feedback on mouse hover (desktop/web)
  • Scale animation: Subtle press-down effect
  • Multiple gestures: Support for tap, double-tap, and long-press
  • Customizable appearance: Configurable colors, border radius, and more

Basic Example

SInkButton(
  onTap: (position) {
    print('Button tapped at $position');
  },
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text('Press Me', style: TextStyle(color: Colors.white)),
  ),
)

Advanced Example with Custom Settings

SInkButton(
  color: Colors.purple,
  scaleFactor: 0.95,
  hoverAndSplashBorderRadius: BorderRadius.circular(16),
  hapticFeedbackType: HapticFeedbackType.mediumImpact,
  onTap: (position) => handleTap(),
  onLongPressStart: (details) => showMenu(),
  tooltipMessage: 'Long press for options',
  child: MyCustomButton(),
)

See also:

Inheritance
Available extensions

Constructors

SInkButton({Key? key, required Widget child, Color? color, BorderRadius? hoverAndSplashBorderRadius, double scaleFactor = 0.985, double initialSplashRadius = 0.5, bool isActive = true, bool enableHapticFeedback = true, HapticFeedbackType? hapticFeedbackType = HapticFeedbackType.lightImpact, void onTap(Offset)?, void onDoubleTap(Offset)?, void onLongPressStart(LongPressStartDetails)?, void onLongPressEnd(LongPressEndDetails)?, bool isCircleButton = false, String? tooltipMessage, HitTestBehavior? hitTestBehavior, void onHover(bool isHovered)?, void onFocusChange(bool isHovered)?, Color? hoverColor, Duration? splashDuration, Object? tapRegionObjectId, bool tapRegionEnabled = true, HitTestBehavior tapRegionBehavior = HitTestBehavior.deferToChild, TapRegionCallback? onTapOutside, TapRegionCallback? onTapInside, TapRegionUpCallback? onTapUpOutside, TapRegionUpCallback? onTapUpInside, bool consumeOutsideTaps = false, String? tapRegionDebugLabel})
Creates an SInkButton with the given child widget.
const

Properties

child → Widget
The widget displayed inside the button.
final
color → Color?
The color used for the splash and hover effects.
final
consumeOutsideTaps → bool
Whether an outside tap consumed by this region's group should stop being delivered to other widgets below it. Passed straight through to TapRegion.consumeOutsideTaps. Defaults to false.
final
enableHapticFeedback → bool
Whether to trigger haptic feedback on tap.
final
hapticFeedbackType → HapticFeedbackType?
The type of haptic feedback to trigger on tap.
final
hashCode → int
The hash code for this object.
no setterinherited
hitTestBehavior → HitTestBehavior?
The behavior of the button when it comes to hit testing.
final
hoverAndSplashBorderRadius → BorderRadius?
The border radius applied to the hover and splash effects.
final
hoverColor → Color?
Custom color for the hover overlay. If null, uses a darkened version of color.
final
initialSplashRadius → double
The initial radius of the splash animation.
final
isActive → bool
Whether the button responds to user interactions.
final
isCircleButton → bool
Whether the button has a circular shape.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onDoubleTap → void Function(Offset)?
Callback invoked when the button is double-tapped.
final
onFocusChange → void Function(bool isHovered)?
Called when the focus state changes.
final
onHover → void Function(bool isHovered)?
Called when the hover state changes.
final
onLongPressEnd → void Function(LongPressEndDetails)?
Callback invoked when a long press gesture ends.
final
onLongPressStart → void Function(LongPressStartDetails)?
Callback invoked when a long press gesture starts.
final
onTap → void Function(Offset)?
Callback invoked when the button is tapped.
final
onTapInside → TapRegionCallback?
Called when a tap down is detected inside of this button (or any other region sharing tapRegionObjectId). Passed straight through to TapRegion.onTapInside.
final
onTapOutside → TapRegionCallback?
Called when a tap down is detected outside of this button (and any other region sharing tapRegionObjectId). Passed straight through to TapRegion.onTapOutside.
final
onTapUpInside → TapRegionUpCallback?
Called when a tap up is detected inside of this button (or any other region sharing tapRegionObjectId). Passed straight through to TapRegion.onTapUpInside.
final
onTapUpOutside → TapRegionUpCallback?
Called when a tap up is detected outside of this button (and any other region sharing tapRegionObjectId). Passed straight through to TapRegion.onTapUpOutside.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scaleFactor → double
The scale factor applied when the button is pressed.
final
splashDuration → Duration?
Duration of the splash animation. If null, defaults to 800ms.
final
tapRegionBehavior → HitTestBehavior
Hit-test behavior of the button's built-in TapRegion. Passed straight through to TapRegion.behavior.
final
tapRegionDebugLabel → String?
Debug label for the button's built-in TapRegion. Passed straight through to TapRegion.debugLabel.
final
tapRegionEnabled → bool
Whether the button's built-in TapRegion is enabled. Passed straight through to TapRegion.enabled. Defaults to true.
final
tapRegionObjectId → Object?
Optional group ID that lets this button's built-in TapRegion act as one region together with other TapRegion/SInkButton widgets sharing the same id. Passed straight through to TapRegion.groupId.
final
tooltipMessage → String?
Optional tooltip message displayed when hovering over the button.
final

Methods

addMaterialWidget() → Material

Available on Widget, provided by the GenericExtensions extension

addTooltipWidget(String toolTip) → Tooltip

Available on Widget, provided by the GenericExtensions extension

borderRadius([BorderRadiusGeometry? borderRadius]) → Widget

Available on Widget, provided by the GenericExtensions extension

boxDecoration([BoxDecoration? boxDecoration]) → Widget

Available on Widget, provided by the GenericExtensions extension

colorFilter([ColorFilter? colorFilter]) → Widget

Available on Widget, provided by the GenericExtensions extension

set parent widget in center
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SInkButton>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited