AnimatedToggleSwitch #

If you like this package, please leave a like there on pub.flutter-io.cn 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,
  iconBuilder: (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,
),