AnimatedToggleSwitch

pub.dev github likes popularity pub points license

buy me a coffee

If you like this package, please leave a like there on pub.dev and star on GitHub.

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.

Example Usage

usage

Examples

AnimatedToggleSwitch.dual()
animated_toggle_switch_example_dual
Standard AnimatedToggleSwitch.rolling()
animated_toggle_switch_example_1
Modified AnimatedToggleSwitch.rolling()
animated_toggle_switch_example_2
animated_toggle_switch_example_3
You can build any other switch with CustomAnimatedToggleSwitch()
animated_toggle_switch_example_custom_1
AnimatedToggleSwitch.size()
animated_toggle_switch_example_4
Custom AnimatedToggleSwitch.size()
animated_toggle_switch_example_4
animated_toggle_switch_example_5
AnimatedToggleSwitch.size() with custom rolling animation
animated_toggle_switch_example_6

AnimatedToggleSwitch.rolling() with custom indicatorSize, borderRadius and indicatorBorderRadius
animated_toggle_switch_example_7
animated_toggle_switch_example_8

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
)

Fully customizable toggle switch with CustomAnimatedToggleSwitch

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),
)

Self-made rolling animation (with foregroundIndicatorIconBuilder)

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,
),

Libraries

animated_toggle_switch