Skip to content

esentis/load_switch

Repository files navigation

Version Version
Publish to Pub.dev

Show some love by dropping a ⭐ at GitHub
HTML tutorial

bool value = false;

Future<bool> _getFuture() async {
    await Future.delayed(const Duration(seconds: 2));
    return !value;
}

Default

Version

LoadSwitch(
    value: value,
    future: _getFuture,
    style: SpinStyle.material
    onChange: (v) {
        value = v;
        print('Value changed to $v');
        setState(() {});
    },
    onTap: (v) {
        print('Tapping while value is $v');
    },
)

Custom

Version

LoadSwitch(
value: value,
future: _getFuture,
style: SpinStyle.material
curveIn: Curves.easeInBack,
curveOut: Curves.easeOutBack,
animationDuration: const Duration(milliseconds: 500),
switchDecoration: (value) => BoxDecoration(
    color: value ? Colors.green[100] : Colors.red[100],
    borderRadius: BorderRadius.circular(30),
    shape: BoxShape.rectangle,
    boxShadow: [
    BoxShadow(
        color: value
            ? Colors.green.withOpacity(0.2)
            : Colors.red.withOpacity(0.2),
        spreadRadius: 5,
        blurRadius: 7,
        offset: const Offset(0, 3), // changes position of shadow
    ),
    ],
),
spinColor: (value) => value
    ? const Color.fromARGB(255, 41, 232, 31)
    : const Color.fromARGB(255, 255, 77, 77),
spinStrokeWidth: 3,
thumbDecoration: (value) => BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(30),
    shape: BoxShape.rectangle,
    boxShadow: [
    BoxShadow(
        color: value
            ? Colors.green.withOpacity(0.2)
            : Colors.red.withOpacity(0.2),
        spreadRadius: 5,
        blurRadius: 7,
        offset: const Offset(0, 3), // changes position of shadow
    ),
    ],
),
onChange: (v) {
    value = v;
    print('Value changed to $v');
    setState(() {});
},
onTap: (v) {
    print('Tapping while value is $v');
},
),

Spin styles

The library extends flutter_spinkit internally adding some fancy spin animations. Keep in mind you can also edit the thumbDecoration & switchDecoration for different color & shapes. The examples have the default circular thumb with white color. The default style is SpinStyle.material.

material cupertino chasingDots
material cupertino chasingDots
circle cubeGrid dancingSquare
circle cubeGrid dancingSquare
doubleBounce dualRing fadingCircle
doubleBounce dualRing fadingCircle
fadingCube fadingFour fadingGrid
fadingCube fadingFour fadingGrid
foldingCube hourGlass pianoWave
foldingCube hourGlass pianoWave
pouringHourGlass pulse pulsingGrid
pouringHourGlass pulse pulsingGrid
pumpingHeart ring ripple
pumpingHeart ring ripple
rotatingCircle rotatingPlain spinningCircle
rotatingCircle rotatingPlain spinningCircle
spinningLines squareCircle threeBounce
spinningLines squareCircle threeBounce
threeInOut wanderingCubes waveStart
threeInOut wanderingCubes waveStart
waveCenter waveEnd waveSpinner
waveCenter waveEnd waveSpinner

Issues / Features

Found a bug or want a new feature? Open an issue in the Github repository of the project.