animated_icon_switch

Description:

animated icon switch

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'
copied to clipboard
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(() {});
},
),
copied to clipboard

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