AnimatedToggleSwitch
pub.dev and star on GitHub.
If you like this package, please leave a like there onSimple and animated switch with multiple choices. It's an easy way if you don't want to use something like a DropDownMenuButton
.
LTR
and RTL
are both supported.
Most builder arguments of AnimatedToggleSwitch
have a standard and a custom version. This ensures that you can get started easily and still customize a lot if necessary.
For a slider with a similar look, you can check out action_slider.
Example Usage
Examples
AnimatedToggleSwitch.dual()
Standard AnimatedToggleSwitch.rolling()
Modified AnimatedToggleSwitch.rolling()
You can build any other switch with CustomAnimatedToggleSwitch()
AnimatedToggleSwitch.size()
Custom AnimatedToggleSwitch.size()
AnimatedToggleSwitch.size()
with custom rolling animation
AnimatedToggleSwitch.rolling()
with custom indicatorSize
, borderRadius
and indicatorBorderRadius
Easy Usage
Easy to use and highly customizable.
Simple Rolling Animation
AnimatedToggleSwitch<int>.rolling(
current: value,
values: [0, 1, 2, 3],
onChanged: (i) => setState(() => value = i),
iconBuilder: iconBuilder,
... // many more parameters available
)
CustomAnimatedToggleSwitch
Fully customizable toggle switch with CustomAnimatedToggleSwitch<int>(
current: value,
values: [0, 1, 2, 3],
wrapperBuilder: ..., // the builder for the wrapper around the whole switch
iconBuilder: ..., // the builder for the icons
foregroundIndicatorBuilder: ..., // a builder for an indicator in front of the icons
backgroundIndicatorBuilder: ..., // a builder for an indicator behind the icons
... // many more parameters available
)
AnimatedToggleSwitch.size
with some settings
AnimatedToggleSwitch<int>.size(
current: value,
values: [0, 1, 2, 3],
iconOpacity: 0.2,
indicatorSize: Size.fromWidth(100),
iconBuilder: (value, size) {
IconData data = Icons.access_time_rounded;
if (value.isEven) data = Icons.cancel;
return Icon(data, size: min(size.width, size.height));
},
borderColor: value.isEven ? Colors.blue : Colors.red,
colorBuilder: (i) => i.isEven ? Colors.amber : Colors.red,
onChanged: (i) => setState(() => value = i),
)
foregroundIndicatorIconBuilder
)
Self-made rolling animation (with AnimatedToggleSwitch<int>.size(
value: value,
values: [0, 1, 2, 3],
iconOpacity: 1.0,
indicatorSize: Size.fromWidth(25),
foregroundIndicatorIconBuilder: (context, global) {
double pos = global.position;
double transitionValue = pos - pos.floorToDouble();
return Transform.rotate(
angle: 2.0 * pi * transitionValue,
child: Stack(children: [
Opacity(
opacity: 1 - transitionValue,
child: iconBuilder(pos.floor(), global.indicatorSize)),
Opacity(
opacity: transitionValue,
child: iconBuilder(pos.ceil(), global.indicatorSize))
]),
);
},
selectedIconSize: Size.square(20),
iconSize: Size.square(20),
iconBuilder: iconBuilder,
colorBuilder: (i) => i.isEven ? Colors.green : Colors.tealAccent,
onChanged: (i) => setState(() => value = i),
borderRadius: BorderRadius.circular(8.0),
borderColor: Colors.red,
),