hasanm08 / animated_toggle_switch

Simple and animated switch with multiple choices in Flutter. It's an easy way if you don't want something like a DropdownMenu.

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 and smooth loading animation. 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()

AnimatedToggleSwitch.dual() with loading animation

AnimatedToggleSwitch.rolling()

AnimatedToggleSwitch.rolling() with loading animation

Modified AnimatedToggleSwitch.rolling()

You can build any other switch with CustomAnimatedToggleSwitch()

AnimatedToggleSwitch.size()

AnimatedToggleSwitch.size() with loading animation

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

Simple rolling animation with loading

To use the loading animation, you simply have to return a Future in onChanged or onTap. You can alternatively control the loading manually with the loading parameter.
Hence, to disable the loading animation, loading: false must be set.

AnimatedToggleSwitch<int>.rolling(
  current: value,
  values: [0, 1, 2, 3],
  onChanged: (i) async {
    setState(() => value = i);
    await Future.delayed(Duration(seconds: 3));
  },
  loading: false, // for deactivating loading animation
  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,
),