Tappable

An area that responds to touch.

This widget is typically used to create other high-level widgets, e.g., button. You should prefer those high-level widgets unless you’re creating a custom widget.

Preview

Usage

`FTappable(...)`


const FTappable(
  style: FTappableStyle(),
  semanticsLabel: 'Label',
  excludeSemantics: false,
  selected: false,
  autofocus: false,
  focusNode: FocusNode(),
  onFocusChange: (focused) {},
  onHoverChange: (hovered) {},
  onStateChange: (states) {},
  behavior: HitTestBehavior.translucent,
  onPress: () {},
  onLongPress: () {},
  builder: (context, state, child) => child!,
  child: const Text('Tappable'),
);

`FTappable.static(...)`

A variant of FTappable without any animation. This is similar to using FTappableAnimations.none.


FTappable.static(
  style: FTappableStyle(),
  semanticsLabel: 'Label',
  excludeSemantics: false,
  selected: false,
  autofocus: false,
  focusNode: FocusNode(),
  onFocusChange: (focused) {},
  onHoverChange: (hovered) {},
  onStateChange: (states) {},
  behavior: HitTestBehavior.translucent,
  onPress: () {},
  onLongPress: () {},
  builder: (context, state, child) => child!,
  child: const Text('Tappable'),
);

Custom scale animation


// Default animation.
FTappableStyle(animationTween: FTappableAnimations.bounce);
 
// No animation.
FTappableStyle(animationTween: FTappableAnimations.none);
 
// Custom tween.
FTappableStyle(animationTween: Tween(begin: 1.0, end: 0.97));