Skip to content

Commit d7c0229

Browse files
esentisesentis
authored
New styles (#3)
* 🤡 Add LoadSwitch examples with default and custom styles * ✨ Add new loading spinner styles * ⬆️ ➕ Update version and add flutter_spinkit dependency
1 parent a8aec00 commit d7c0229

9 files changed

+618
-144
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎CHANGELOG.md

+48
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,51 @@
1+
### [2.1.0] New spin styles
2+
3+
- New parameter `style`. 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`.
4+
5+
| material | cupertino | chasingDots |
6+
| ------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
7+
| ![material](https://i.imgur.com/i80tb2n.gif "material") | ![cupertino](https://i.imgur.com/ciOjjIx.gif "cupertino") | ![chasingDots](https://i.imgur.com/VnVZ7yW.gif "chasingDots") |
8+
9+
| circle | cubeGrid | dancingSquare |
10+
| --------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
11+
| ![circle](https://i.imgur.com/ePBR9xB.gif "circle") | ![cubeGrid](https://i.imgur.com/HhoyjuA.gif "cubeGrid") | ![dancingSquare](https://i.imgur.com/huQGF7f.gif "dancingSquare") |
12+
13+
| doubleBounce | dualRing | fadingCircle |
14+
| --------------------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------- |
15+
| ![doubleBounce](https://i.imgur.com/XoNKCUb.gif "doubleBounce") | ![dualRing](https://i.imgur.com/YODTtaw.gif "dualRing") | ![fadingCircle](https://i.imgur.com/xMFMI6F.gif "fadingCircle") |
16+
17+
| fadingCube | fadingFour | fadingGrid |
18+
| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
19+
| ![fadingCube](https://i.imgur.com/s6jqcBy.gif "fadingCube") | ![fadingFour](https://i.imgur.com/1gL9G70.gif "fadingFour") | ![fadingGrid](https://i.imgur.com/HLHTVRw.gif "fadingGrid") |
20+
21+
| foldingCube | hourGlass | pianoWave |
22+
| ------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- |
23+
| ![foldingCube](https://i.imgur.com/OfOx9Ta.gif "foldingCube") | ![hourGlass](https://i.imgur.com/XuOZMuo.gif "hourGlass") | ![pianoWave](https://i.imgur.com/4omcY6m.gif "pianoWave") |
24+
25+
| pouringHourGlass | pulse | pulsingGrid |
26+
| ----------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------- |
27+
| ![pouringHourGlass](https://i.imgur.com/qaDYkEk.gif "pouringHourGlass") | ![pulse](https://i.imgur.com/XviSAH5.gif "pulse") | ![pulsingGrid](https://i.imgur.com/XkvLuSm.gif "pulsingGrid") |
28+
29+
| pumpingHeart | ring | ripple |
30+
| --------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------- |
31+
| ![pumpingHeart](https://i.imgur.com/J6jG4pT.gif "pumpingHeart") | ![ring](https://i.imgur.com/nDKRcu9.gif "ring") | ![ripple](https://i.imgur.com/Cdz31l9.gif "ripple") |
32+
33+
| rotatingCircle | rotatingPlain | spinningCircle |
34+
| ------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------- |
35+
| ![rotatingCircle](https://i.imgur.com/HFmZVvd.gif "rotatingCircle") | ![rotatingPlain](https://i.imgur.com/ZRw7ZAk.gif "rotatingPlain") | ![spinningCircle](https://i.imgur.com/7EvBfP4.gif "spinningCircle") |
36+
37+
| spinningLines | squareCircle | threeBounce |
38+
| ----------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- |
39+
| ![spinningLines](https://i.imgur.com/bZdiHNM.gif "spinningLines") | ![squareCircle](https://i.imgur.com/OBJsoEO.gif "squareCircle") | ![threeBounce](https://i.imgur.com/suMlo79.gif "threeBounce") |
40+
41+
| threeInOut | wanderingCubes | waveStart |
42+
| ----------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------- |
43+
| ![threeInOut](https://i.imgur.com/Vz4QCWh.gif "threeInOut") | ![wanderingCubes](https://i.imgur.com/S7W2jHT.gif "wanderingCubes") | ![waveStart](https://i.imgur.com/Tnlsbdo.gif "waveStart") |
44+
45+
| waveCenter | waveEnd | waveSpinner |
46+
| ----------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------- |
47+
| ![waveCenter](https://i.imgur.com/MX7SHbN.gif "waveCenter") | ![waveEnd](https://i.imgur.com/BMLUprM.gif "waveEnd") | ![waveSpinner](https://i.imgur.com/9geWUc6.gif "waveSpinner") |
48+
149
### [2.0.9]
250

351
- `onError(error)` : Callback when the Future throws an error

‎README.md

+50
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Future<bool> _getFuture() async {
2525
LoadSwitch(
2626
value: value,
2727
future: _getFuture,
28+
style: SpinStyle.material
2829
onChange: (v) {
2930
value = v;
3031
print('Value changed to $v');
@@ -44,6 +45,7 @@ LoadSwitch(
4445
LoadSwitch(
4546
value: value,
4647
future: _getFuture,
48+
style: SpinStyle.material
4749
curveIn: Curves.easeInBack,
4850
curveOut: Curves.easeOutBack,
4951
animationDuration: const Duration(milliseconds: 500),
@@ -92,6 +94,54 @@ onTap: (v) {
9294
),
9395
```
9496

97+
## Spin styles
98+
99+
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`.
100+
101+
| material | cupertino | chasingDots |
102+
| ------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
103+
| ![material](https://i.imgur.com/i80tb2n.gif "material") | ![cupertino](https://i.imgur.com/ciOjjIx.gif "cupertino") | ![chasingDots](https://i.imgur.com/VnVZ7yW.gif "chasingDots") |
104+
105+
| circle | cubeGrid | dancingSquare |
106+
| --------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------- |
107+
| ![circle](https://i.imgur.com/ePBR9xB.gif "circle") | ![cubeGrid](https://i.imgur.com/HhoyjuA.gif "cubeGrid") | ![dancingSquare](https://i.imgur.com/huQGF7f.gif "dancingSquare") |
108+
109+
| doubleBounce | dualRing | fadingCircle |
110+
| --------------------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------- |
111+
| ![doubleBounce](https://i.imgur.com/XoNKCUb.gif "doubleBounce") | ![dualRing](https://i.imgur.com/YODTtaw.gif "dualRing") | ![fadingCircle](https://i.imgur.com/xMFMI6F.gif "fadingCircle") |
112+
113+
| fadingCube | fadingFour | fadingGrid |
114+
| ----------------------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
115+
| ![fadingCube](https://i.imgur.com/s6jqcBy.gif "fadingCube") | ![fadingFour](https://i.imgur.com/1gL9G70.gif "fadingFour") | ![fadingGrid](https://i.imgur.com/HLHTVRw.gif "fadingGrid") |
116+
117+
| foldingCube | hourGlass | pianoWave |
118+
| ------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- |
119+
| ![foldingCube](https://i.imgur.com/OfOx9Ta.gif "foldingCube") | ![hourGlass](https://i.imgur.com/XuOZMuo.gif "hourGlass") | ![pianoWave](https://i.imgur.com/4omcY6m.gif "pianoWave") |
120+
121+
| pouringHourGlass | pulse | pulsingGrid |
122+
| ----------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------- |
123+
| ![pouringHourGlass](https://i.imgur.com/qaDYkEk.gif "pouringHourGlass") | ![pulse](https://i.imgur.com/XviSAH5.gif "pulse") | ![pulsingGrid](https://i.imgur.com/XkvLuSm.gif "pulsingGrid") |
124+
125+
| pumpingHeart | ring | ripple |
126+
| --------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------- |
127+
| ![pumpingHeart](https://i.imgur.com/J6jG4pT.gif "pumpingHeart") | ![ring](https://i.imgur.com/nDKRcu9.gif "ring") | ![ripple](https://i.imgur.com/Cdz31l9.gif "ripple") |
128+
129+
| rotatingCircle | rotatingPlain | spinningCircle |
130+
| ------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------- |
131+
| ![rotatingCircle](https://i.imgur.com/HFmZVvd.gif "rotatingCircle") | ![rotatingPlain](https://i.imgur.com/ZRw7ZAk.gif "rotatingPlain") | ![spinningCircle](https://i.imgur.com/7EvBfP4.gif "spinningCircle") |
132+
133+
| spinningLines | squareCircle | threeBounce |
134+
| ----------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------- |
135+
| ![spinningLines](https://i.imgur.com/bZdiHNM.gif "spinningLines") | ![squareCircle](https://i.imgur.com/OBJsoEO.gif "squareCircle") | ![threeBounce](https://i.imgur.com/suMlo79.gif "threeBounce") |
136+
137+
| threeInOut | wanderingCubes | waveStart |
138+
| ----------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------- |
139+
| ![threeInOut](https://i.imgur.com/Vz4QCWh.gif "threeInOut") | ![wanderingCubes](https://i.imgur.com/S7W2jHT.gif "wanderingCubes") | ![waveStart](https://i.imgur.com/Tnlsbdo.gif "waveStart") |
140+
141+
| waveCenter | waveEnd | waveSpinner |
142+
| ----------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------- |
143+
| ![waveCenter](https://i.imgur.com/MX7SHbN.gif "waveCenter") | ![waveEnd](https://i.imgur.com/BMLUprM.gif "waveEnd") | ![waveSpinner](https://i.imgur.com/9geWUc6.gif "waveSpinner") |
144+
95145
## Issues / Features
96146

97147
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.

‎example/lib/main.dart

+2-119
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,6 @@
1-
import 'package:flutter/foundation.dart';
1+
import 'package:example/styles/default_example.dart';
22
import 'package:flutter/material.dart';
3-
import 'package:load_switch/load_switch.dart';
43

54
void main() {
6-
runApp(MaterialApp(home: const MyApp()));
7-
}
8-
9-
class MyApp extends StatefulWidget {
10-
const MyApp({Key? key}) : super(key: key);
11-
12-
@override
13-
State<MyApp> createState() => _MyAppState();
14-
}
15-
16-
class _MyAppState extends State<MyApp> {
17-
bool value = false;
18-
bool thumbStatus = true;
19-
Future<bool> _getFuture() async {
20-
if (kDebugMode) {
21-
print('Calling futute...');
22-
}
23-
await Future.delayed(const Duration(seconds: 2));
24-
// If you want to test the onError callback, uncomment the following line.
25-
// throw Exception('Error');
26-
if (kDebugMode) {
27-
print('Future returned.');
28-
}
29-
value = !value;
30-
return value;
31-
}
32-
33-
@override
34-
Widget build(BuildContext context) {
35-
return Scaffold(
36-
body: Center(
37-
child: Column(
38-
mainAxisAlignment: MainAxisAlignment.center,
39-
children: [
40-
LoadSwitch(
41-
value: value,
42-
isActive: thumbStatus,
43-
future: _getFuture,
44-
onError: (error) {
45-
ScaffoldMessenger.of(context).showSnackBar(
46-
SnackBar(
47-
content: Text(error.toString()),
48-
),
49-
);
50-
},
51-
curveIn: Curves.easeInBack,
52-
curveOut: Curves.easeOutBack,
53-
animationDuration: const Duration(milliseconds: 500),
54-
switchDecoration: (value, isActive) => BoxDecoration(
55-
color: isActive
56-
? value
57-
? Colors.green[100]
58-
: Colors.red[100]
59-
: Colors.grey[300],
60-
borderRadius: BorderRadius.circular(30),
61-
shape: BoxShape.rectangle,
62-
boxShadow: [
63-
BoxShadow(
64-
color: isActive
65-
? value
66-
? Colors.green.withOpacity(0.2)
67-
: Colors.red.withOpacity(0.2)
68-
: Colors.grey,
69-
spreadRadius: 5,
70-
blurRadius: 7,
71-
offset: const Offset(0, 3), // changes position of shadow
72-
),
73-
],
74-
),
75-
spinColor: (value) => value
76-
? const Color.fromARGB(255, 41, 232, 31)
77-
: const Color.fromARGB(255, 255, 77, 77),
78-
spinStrokeWidth: 3,
79-
thumbDecoration: (value, isActive) => BoxDecoration(
80-
color: Colors.white,
81-
borderRadius: BorderRadius.circular(30),
82-
shape: BoxShape.rectangle,
83-
boxShadow: [
84-
BoxShadow(
85-
color: isActive
86-
? value
87-
? Colors.green.withOpacity(0.2)
88-
: Colors.red.withOpacity(0.2)
89-
: Colors.grey,
90-
spreadRadius: 5,
91-
blurRadius: 7,
92-
offset: const Offset(0, 3), // changes position of shadow
93-
),
94-
],
95-
),
96-
onChange: (v) {
97-
value = v;
98-
if (kDebugMode) {
99-
print('Value changed to $v');
100-
}
101-
setState(() {});
102-
},
103-
onTap: (v) {
104-
if (kDebugMode) {
105-
debugPrint('Tapping while value is $v');
106-
}
107-
},
108-
),
109-
const SizedBox(height: 20),
110-
TextButton(
111-
onPressed: () {
112-
setState(() {
113-
thumbStatus = !thumbStatus;
114-
});
115-
},
116-
child: Text(
117-
thumbStatus ? 'Deactivate toggle' : 'Activate toggle')),
118-
],
119-
),
120-
),
121-
);
122-
}
5+
runApp(const MaterialApp(home: DefaultStyleExample()));
1236
}

0 commit comments

Comments
 (0)