Foundation
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.
FTappable(
builder: (context, states, child) => Container(
decoration: BoxDecoration(
color: (states.contains(WidgetState.hovered) || states.contains(WidgetState.pressed))
? context.theme.colors.secondary
: context.theme.colors.background,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: context.theme.colors.border),
),
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12),
child: child!,
),
child: const Text('Tappable'),
onPress: () {},
);Usage
FTappable(...)
FTappable(
style: (style) => style.copyWith(...),
focusedOutlineStyle: (style) => style.copyWith(...),
semanticsLabel: 'Label',
excludeSemantics: false,
autofocus: false,
focusNode: FocusNode(),
onFocusChange: (focused) {},
onHoverChange: (hovered) {},
onStateChange: (delta) {},
selected: false,
behavior: HitTestBehavior.translucent,
onPress: () {},
onLongPress: () {},
onSecondaryPress: () {},
onSecondaryLongPress: () {},
shortcuts: {SingleActivator(LogicalKeyboardKey.enter): ActivateIntent()},
actions: {ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {})},
builder: (context, states, child) => child!,
child: const Text('Tappable'),
);FTappable.static(...)
A variant of FTappable without any animation. This is similar to using FTappableMotion.none.
FTappable.static(
style: (style) => style.copyWith(...),
focusedOutlineStyle: (style) => style.copyWith(...),
semanticsLabel: 'Label',
excludeSemantics: false,
autofocus: false,
focusNode: FocusNode(),
onFocusChange: (focused) {},
onHoverChange: (hovered) {},
onStateChange: (delta) {},
selected: false,
behavior: HitTestBehavior.translucent,
onPress: () {},
onLongPress: () {},
onSecondaryPress: () {},
onSecondaryLongPress: () {},
shortcuts: {SingleActivator(LogicalKeyboardKey.enter): ActivateIntent()},
actions: {ActivateIntent: CallbackAction<ActivateIntent>(onInvoke: (_) {})},
builder: (context, states, child) => child!,
child: const Text('Tappable'),
);Custom Bounce Animation
// Default animation.
FTappableMotion(bounceTween: FTappableMotion.defaultBounceTween);
// No animation.
FTappableMotion(bounceTween: FTappableMotion.noBounceTween);
// Custom tween.
FTappableMotion(bounceTween: Tween(begin: 1.0, end: 0.97));