animated_toggle_switch 0.3.0-beta.2

Simple and animated toggle switch for multiple choices. It's a good alternative if you don't want to use something like a dropdown menu.

AnimatedToggleSwitch

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.
For a slider with a similar look, you can check out action_slider.

Example Usage

Examples

Standard AnimatedToggleSwitch.rolling()

Modified AnimatedToggleSwitch.rolling()


AnimatedToggleSwitch.dual()

AnimatedToggleSwitch.size()

Custom AnimatedToggleSwitch.size()

AnimatedToggleSwitch.size() with custom rolling animation

AnimatedToggleSwitch.rolling() with custom indicatorType

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
)

Custom with size animation

AnimatedToggleSwitch<int>.size(
  current: value,
  values: [0, 1, 2, 3],
  iconOpacity: 0.2,
  indicatorSize: Size.fromWidth(100),
  indicatorType: IndicatorType.rectangle,
  customIconBuilder: (context, local, global) {
    IconData data = Icons.access_time_rounded;
    if (local.value.isEven) data = Icons.cancel;
    return Container(
      child: Icon(data, size: min(local.iconSize.width, local.iconSize.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: sizeIconBuilder,
  colorBuilder: (i) => i.isEven ? Colors.green : Colors.tealAccent,
  onChanged: (i) => setState(() => value = i),
  borderRadius: BorderRadius.circular(8.0),
  borderColor: Colors.red,
),