A fully customizable, draggable, and animated switch featuring multiple options and a smooth loading animation.

Getting started

You only need to import the package:

import 'package:animated_icon_switch.dart'

Usage

Here is a simple light/dark mode switch with icons.

AnimatedIconSwitch(
    withIcons: true,
    activeColor: Colors.grey.shade900,
    activeIcon: Icons.brightness_2,
    shadowColor: Colors.grey.withAlpha(150),
    inactiveIcon: Icons.sunny,
    elevation: 6,
    value: value,
    onChanged: (v) {
        value = v;
        setState(() {});
    },
),

light-dark-switch

Features

Here is a list of all the options:

Main widget options

  • borderRadius: the borderRadius of the thumb and the switch.
  • inactiveColor: the color of the switch when the switch is disabled.
  • activeColor: the color of the switch when the switch is enabled.
  • shadowColor: the color of the elevation shadow.
  • height: the height of the widget.
  • width: the width of the widget.
  • elevation: the elevation of the widget.

Thumb widget options

  • activeThumbColor: the color of the thumb when the switch is enabled.
  • inactiveThumbColor: the color of the thumb when the switch is disabled.
  • withIcons: wether the widget will have icons inside the switch or not.
  • iconOnThumb: whether the icons will be on the thumb or behind the thumb.
  • inactiveIcon: changing icon for inactive state.
  • inactiveIconSize: changing icon size for inactive state.
  • inactiveIconColor: changing icon color for inactive state.
  • activeIcon: changing icon for active states.
  • activeIconSize: changing icon size for active state.
  • activeIconColor: changing icon color for active state.

Animations

  • withIconAnimation: wether the icons will have a pop up animation or not.
  • animationDuration: the animation duration of the icon pop up animation.

Caution

Some options need a cold reload (restart), Here are the options:

  • inactiveColor
  • activeColor
  • height
  • width
  • inactiveThumbColor
  • activeThumbColor
  • withIconAnimation
  • animationDuration

Libraries

animated_icon_switch