Foundation

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.

Usage

FTappable(...)

1FTappable(
2 style: const .delta(motion: FTappableMotion.none),
3 focusedOutlineStyle: const .delta(color: Colors.black),
4 selected: false,
5 behavior: .translucent,
6 builder: (context, states, child) => child!,
7 child: const Text('Tap me'),
8)

FTappable.static(...)

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

1FTappable.static(
2 style: const .delta(motion: FTappableMotion.none),
3 focusedOutlineStyle: const .delta(color: Color(0xFF000000)),
4 selected: false,
5 behavior: .translucent,
6 builder: (context, states, child) => child!,
7 child: const Text('Tap me'),
8)

Custom Bounce Animation

You can customize a tappable's bounce animation by passing a FTappableMotion.

Slide-across Interaction

Several tappables can be placed in a FTappableGroup to enable slide-across interaction. When you press one tappable and slide across to another, the pressed state transfers to the new tappable.

On this page