AnimatedToggleSwitch #

If you like this package, please leave a like there on pub.flutter-io.cn and star on GitHub. #

Fully customizable, draggable and animated switch with multiple choices and smooth loading animation. It has prebuilt constructors for rolling and size animations, but it also allows you to create your own switches with CustomAnimatedToggleSwitch.
LTR and RTL are both supported.
Switches without an (initial) selection are also possible.
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()

Switch inspired by lite_rolling_switch (made with AnimatedToggleSwitch.dual())

Switch inspired by toggle_switch (made with AnimatedToggleSwitch.size())

Switch inspired by crazy-switch (made with CustomAnimatedToggleSwitch())

AnimatedToggleSwitch.rolling()

You can build any other switch with CustomAnimatedToggleSwitch()

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,
  style: ToggleStyle(...), // optional style settings
  ... // many more parameters available
)

Styling #

style, styleBuilder and customStyleBuilder can be used to style the switch.
For the general look of the switch, you can use style.
For parameters that should change with the selection, you can use styleBuilder.
If you need additional parameters, you can use customStyleBuilder.

AnimatedToggleSwitch<int>.rolling(
  ...
  style: ToggleStyle(backgroundColor: Colors.red), // backgroundColor is set independently of the current selection
  styleBuilder: (value) => ToggleStyle(indicatorColor: value.isEven ? Colors.yellow : Colors.green)), // indicatorColor changes and animates its value with the selection
  ...
)

Loading animation #

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
)

Nullable selection #

To use this feature, you simply have to set allowUnlistedValues to true.

AnimatedToggleSwitch<int?>.rolling(
   allowUnlistedValues: true,
   current: nullableValue, // no selection if nullableValue is not contained in values
   values: const [0, 1, 2, 3],
   onChanged: (i) => setState(() => nullableValue = i),
   iconBuilder: iconBuilder,
   indicatorAppearingBuilder: ..., // appearing animation is fully customizable (optional)
)

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: const [0, 1, 2, 3],
  iconOpacity: 0.2,
  indicatorSize: const Size.fromWidth(100),
  iconAnimationType: AnimationType.onHover,
  colorAnimationType: AnimationType.onHover,
  iconBuilder: (value, size) {
    IconData data = Icons.access_time_rounded;
    if (value.isEven) data = Icons.cancel;
    return Icon(data, size: min(size.width, size.height));
  },
  style: const ToggleStyle(borderColor: Colors.transparent),
  borderWidth: 0.0,
  styleBuilder: (i) => ToggleStyle(indicatorColor: i.isEven == true ? Colors.amber : Colors.red),
  onChanged: (i) => setState(() => value = i),
)

Self-made rolling animation (with foregroundIndicatorIconBuilder) #

AnimatedToggleSwitch<int>.size(
  current: value,
  values: const [0, 1, 2, 3],
  iconOpacity: 1.0,
  selectedIconScale: 1.0,
  indicatorSize: const 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))
        ]));
  },
  iconBuilder: iconBuilder,
  style: ToggleStyle(
    borderColor: Colors.red,
    borderRadius: BorderRadius.circular(8.0),
    indicatorBorderRadius: BorderRadius.zero,
  ),
  styleBuilder: (i) => ToggleStyle(indicatorColor: i.isEven == true ? Colors.green : Colors.tealAccent),
  onChanged: (i) => setState(() => value = i),
)