https://github.com/esentis/load_switch
A highly customizable toggle switch with a loading state.
https://github.com/esentis/load_switch
flutter flutter-widget loading-switch switch toggle-switch
Last synced: 6 months ago
JSON representation
A highly customizable toggle switch with a loading state.
- Host: GitHub
- URL: https://github.com/esentis/load_switch
- Owner: esentis
- License: bsd-3-clause
- Created: 2022-04-13T14:46:01.000Z (almost 4 years ago)
- Default Branch: develop
- Last Pushed: 2025-07-08T17:10:41.000Z (7 months ago)
- Last Synced: 2025-08-20T05:05:35.235Z (6 months ago)
- Topics: flutter, flutter-widget, loading-switch, switch, toggle-switch
- Language: Dart
- Homepage: https://pub.dev/packages/load_switch
- Size: 776 KB
- Stars: 19
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Show some love by dropping a ⭐ at GitHub
```dart
bool value = false;
Future _getFuture() async {
await Future.delayed(const Duration(seconds: 2));
return !value;
}
```
### Default
```dart
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
```dart
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');
},
),
```
### Controller Features
You can use the `LoadSwitchController` to control and listen to the switch's state.
| Feature | Description |
| ---------------------------- | -------------------------------------------------------------- |
| `toggle()` | Toggle the switch value programmatically |
| `executeWithLoading(future)` | Run an async operation with automatic loading state management |
| `value` (get/set) | Get or set the current switch value |
| `isLoading` (get/set) | Get or set the loading state |
| `isActive` (get/set) | Get or set whether the switch is active |
| `addListener(listener)` | Listen to state changes in the controller |
| `dispose()` | Clean up resources when no longer needed |
## Spin styles
The library extends [flutter_spinkit](https://pub.dev/packages/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 |
| ------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
|  |  |  |
| circle | cubeGrid | dancingSquare |
| --------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
|  |  |  |
| doubleBounce | dualRing | fadingCircle |
| --------------------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------- |
|  |  |  |
| fadingCube | fadingFour | fadingGrid |
| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
|  |  |  |
| foldingCube | hourGlass | pianoWave |
| ------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- |
|  |  |  |
| pouringHourGlass | pulse | pulsingGrid |
| ----------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------- |
|  |  |  |
| pumpingHeart | ring | ripple |
| --------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------- |
|  |  |  |
| rotatingCircle | rotatingPlain | spinningCircle |
| ------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------- |
|  |  |  |
| spinningLines | squareCircle | threeBounce |
| ----------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- |
|  |  |  |
| threeInOut | wanderingCubes | waveStart |
| ----------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------- |
|  |  |  |
| waveCenter | waveEnd | waveSpinner |
| ----------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------- |
|  |  |  |
## Issues / Features
Found a bug or want a new feature? Open an issue in the [Github repository](https://github.com/esentis/load_switch/issues/new/choose) of the project.