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.
1@override2Widget build(BuildContext context) => FTappable(3 builder: (context, states, child) => Container(4 decoration: BoxDecoration(5 color:6 (states.contains(FTappableVariant.hovered) ||7 states.contains(FTappableVariant.pressed))8 ? context.theme.colors.secondary9 : context.theme.colors.background,10 borderRadius: .circular(8),11 border: .all(color: context.theme.colors.border),12 ),13 padding: const .symmetric(vertical: 8.0, horizontal: 12),14 child: child!,15 ),16 child: const Text('Tappable'),17 onPress: () {},18);19Usage
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
// Default animation.
FTappableMotion(bounceTween: FTappableMotion.defaultBounceTween);
// No animation.
FTappableMotion(bounceTween: FTappableMotion.noBounceTween);
// Custom tween.
FTappableMotion(bounceTween: Tween(begin: 1.0, end: 0.97));