![Version](https://camo.githubusercontent.com/a2915a386f23290c548e416e415d538769b534bc8ed5ea46d847ad9afcdf6783/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c616e6775616765732f636f64652d73697a652f6573656e7469732f6c6f61645f7377697463683f636f6c6f723d363337643064267374796c653d666f722d7468652d6261646765266c6162656c3d73697a65)
bool value = false;
Future<bool> _getFuture() async {
await Future.delayed(const Duration(seconds: 2));
return !value;
}
![Version](https://camo.githubusercontent.com/fbd1e39ddba5572a4449107e0ba2276dc9f0f8af2cd90545000ea28941aa32dc/68747470733a2f2f692e696d6775722e636f6d2f704438344f65612e676966)
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');
},
)
![Version](https://camo.githubusercontent.com/beb54f10e421ea7d314d02b66283af2fd0f8636d3ca18a22e34be1a44438161e/68747470733a2f2f692e696d6775722e636f6d2f735365634472502e676966)
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');
},
),
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 material](https://camo.githubusercontent.com/c97f87b4e4dd7772bc3e7d0d96523ae5e00fa2586463462caa882d28dd7bf762/68747470733a2f2f692e696d6775722e636f6d2f6938307462326e2e676966) |
![cupertino cupertino](https://camo.githubusercontent.com/f99285cca426e6f4cd7860af54a052abf16a4f90d37ac8553f47b49dc909da4a/68747470733a2f2f692e696d6775722e636f6d2f63694f6a6a49782e676966) |
![chasingDots chasingDots](https://camo.githubusercontent.com/1d7e219959e920050784b4c4a726b4a209e089298aabac2381937094a2a2a095/68747470733a2f2f692e696d6775722e636f6d2f566e565a3779572e676966) |
circle |
cubeGrid |
dancingSquare |
![circle circle](https://camo.githubusercontent.com/454aedc73a2fcb826a052bc8d88b6bec208f5ef8f4e407347245b600590a4000/68747470733a2f2f692e696d6775722e636f6d2f655042523978422e676966) |
![cubeGrid cubeGrid](https://camo.githubusercontent.com/26602c036381e477dae2ac87d037ddba69d5224297afd2851bc3c8e0f7a4ede2/68747470733a2f2f692e696d6775722e636f6d2f48686f796a75412e676966) |
![dancingSquare dancingSquare](https://camo.githubusercontent.com/653e082c31e367a4abe7801ccc76ffa2f0b7b2da0675708e3127cebdadd1131c/68747470733a2f2f692e696d6775722e636f6d2f687551474637662e676966) |
doubleBounce |
dualRing |
fadingCircle |
![doubleBounce doubleBounce](https://camo.githubusercontent.com/cf4fc4f7c7140068640b3e97e8f9f37141851aa529e0c8db2c42d2fec443905b/68747470733a2f2f692e696d6775722e636f6d2f586f4e4b4355622e676966) |
![dualRing dualRing](https://camo.githubusercontent.com/836834835206f1bd05d9e892f31bfdde24436a8d78afa9299a9b97311b60718f/68747470733a2f2f692e696d6775722e636f6d2f594f44547461772e676966) |
![fadingCircle fadingCircle](https://camo.githubusercontent.com/7dadd25510fbff6dabd813c79f32b7a220cf2daf247a51932ee011bdf3452773/68747470733a2f2f692e696d6775722e636f6d2f784d464d4936462e676966) |
fadingCube |
fadingFour |
fadingGrid |
![fadingCube fadingCube](https://camo.githubusercontent.com/efd1acd0fbc18faab39e24d3d2b533f2cf83dbfe1d0fe5511748511a7b724888/68747470733a2f2f692e696d6775722e636f6d2f73366a716342792e676966) |
![fadingFour fadingFour](https://camo.githubusercontent.com/ab4ab50272bc21890815b7075cfd1843dc19b745eb74d445edf5b8e9def47bce/68747470733a2f2f692e696d6775722e636f6d2f31674c394737302e676966) |
![fadingGrid fadingGrid](https://camo.githubusercontent.com/7345233dd8b42ad61e144fdc7ed2be0ad7624ae1abfd4f40f04af98520c84c0f/68747470733a2f2f692e696d6775722e636f6d2f484c48545652772e676966) |
foldingCube |
hourGlass |
pianoWave |
![foldingCube foldingCube](https://camo.githubusercontent.com/771112a01d4be6cbace24ac957c25d7d5c4bae5bc1f5b63458ae9cd8d93035aa/68747470733a2f2f692e696d6775722e636f6d2f4f664f783954612e676966) |
![hourGlass hourGlass](https://camo.githubusercontent.com/70153ef74b773118a111b0b3477f5da08b5f2baba4739c7d7e48d7a48f0b1c59/68747470733a2f2f692e696d6775722e636f6d2f58754f5a4d756f2e676966) |
![pianoWave pianoWave](https://camo.githubusercontent.com/33cc8212694207d0ce567145ed1da473049faa307851159fa7150f29bc3b7c36/68747470733a2f2f692e696d6775722e636f6d2f346f6d6359366d2e676966) |
pouringHourGlass |
pulse |
pulsingGrid |
![pouringHourGlass pouringHourGlass](https://camo.githubusercontent.com/288ef3f192d00d6860f5a55a630989401e8d413802e8d923cf6b26e39c169c8c/68747470733a2f2f692e696d6775722e636f6d2f716144596b456b2e676966) |
![pulse pulse](https://camo.githubusercontent.com/9b88d6dd7901856765aeb80848363890877b857a67eeb48e7015dd21a54046ac/68747470733a2f2f692e696d6775722e636f6d2f587669534148352e676966) |
![pulsingGrid pulsingGrid](https://camo.githubusercontent.com/b83a908e15addcfd15d1fda85edfbcc784c16606a26e94f117cdf89f657b9fac/68747470733a2f2f692e696d6775722e636f6d2f586b764c75536d2e676966) |
rotatingCircle |
rotatingPlain |
spinningCircle |
![rotatingCircle rotatingCircle](https://camo.githubusercontent.com/d668c29686a83482d87d648391d4b748df622de4ff9a7983a783ea68d0f118cd/68747470733a2f2f692e696d6775722e636f6d2f48466d5a5676642e676966) |
![rotatingPlain rotatingPlain](https://camo.githubusercontent.com/519a9e8cc052f5d49d83bdb29a93b7af5008303068933af00a91792bed868676/68747470733a2f2f692e696d6775722e636f6d2f5a5277375a416b2e676966) |
![spinningCircle spinningCircle](https://camo.githubusercontent.com/d6e8a4388e5a7c1335711cb3823abf70f51e28fe0811d11f53d20139f99eca8c/68747470733a2f2f692e696d6775722e636f6d2f374576426650342e676966) |
spinningLines |
squareCircle |
threeBounce |
![spinningLines spinningLines](https://camo.githubusercontent.com/3576e61e0ba938e0bb215df617bcc0f2d2d219e88ddc4de5b7c7f016e29fd1e5/68747470733a2f2f692e696d6775722e636f6d2f625a6469484e4d2e676966) |
![squareCircle squareCircle](https://camo.githubusercontent.com/2e4e895a20eca090b03da79fbf61f2534649b9526c455e8959ebec2bdd02bbbf/68747470733a2f2f692e696d6775722e636f6d2f4f424a736f454f2e676966) |
![threeBounce threeBounce](https://camo.githubusercontent.com/8892e213fedb23fa3f213b1bf7ffc94463e85f20ad3351f4f462cc388f6ff478/68747470733a2f2f692e696d6775722e636f6d2f73754d6c6f37392e676966) |
threeInOut |
wanderingCubes |
waveStart |
![threeInOut threeInOut](https://camo.githubusercontent.com/d954bf2e6f8e4b923ef2d2e553583a1753ac99055f8f9b7e5fe20b51ee1e3322/68747470733a2f2f692e696d6775722e636f6d2f567a34514357682e676966) |
![wanderingCubes wanderingCubes](https://camo.githubusercontent.com/7b67d03df471ffc57ca211e6b883438de97541b985c45b67347bd4f0066f2fa1/68747470733a2f2f692e696d6775722e636f6d2f533757326a48542e676966) |
![waveStart waveStart](https://camo.githubusercontent.com/42e74c48b33721bae90e2cf8ee8ec137ef3df386df37ab20866973526a0333f8/68747470733a2f2f692e696d6775722e636f6d2f546e6c7362646f2e676966) |
waveCenter |
waveEnd |
waveSpinner |
![waveCenter waveCenter](https://camo.githubusercontent.com/33831a737e75b6596c87a87dc390841147f16e940206b30b4e4ac98581ef697e/68747470733a2f2f692e696d6775722e636f6d2f4d58375348624e2e676966) |
![waveEnd waveEnd](https://camo.githubusercontent.com/a14b247b6d88dc78c0edd261b2e6c1e3ff5e1f820ef6c4508c2d64b039617afe/68747470733a2f2f692e696d6775722e636f6d2f424d4c5570724d2e676966) |
![waveSpinner waveSpinner](https://camo.githubusercontent.com/6daa92aa29edfed940bbbde6a10ea75617ad357ff2dbf731a47b6ff382fede2a/68747470733a2f2f692e696d6775722e636f6d2f396765575563362e676966) |
Found a bug or want a new feature? Open an issue in the Github repository of the project.