Simple 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.
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 to use and highly customizable.
AnimatedToggleSwitch<int>.rolling(
current: value,
values: [0, 1, 2, 3],
onChanged: (i) => setState(() => value = i),
iconBuilder: iconBuilder,
... // many more parameters available
)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<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),
)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,
),
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent