Skip to content

Commit 225e5bc

Browse files
authored
Update README.md
1 parent d310a2c commit 225e5bc

1 file changed

Lines changed: 22 additions & 14 deletions

File tree

README.md

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
Fully customizable, draggable and animated switch with multiple choices and [smooth loading animation](#loading-animation). It has prebuilt constructors for rolling and size animations, but it also allows you to create your own switches with `CustomAnimatedToggleSwitch`.
1616
`LTR` and `RTL` are both supported.
1717
[Switches without an (initial) selection](#nullable-selection) are also possible.
18-
Most builder arguments of `AnimatedToggleSwitch` have a standard and a custom version. This ensures that you can get started easily and still customize a lot if necessary.
18+
Most builder arguments of `AnimatedToggleSwitch` have a standard and a custom version. This ensures that you can get started easily and still customize a lot if necessary. There are several options for [styling](#styling) it.
1919

2020
For a slider with a similar look you can check out [action_slider](https://pub.dev/packages/action_slider).
2121

@@ -56,7 +56,8 @@ You can build any other switch with `CustomAnimatedToggleSwitch()`
5656
![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif)
5757

5858
`AnimatedToggleSwitch.rolling()` with custom `indicatorSize`, `borderRadius` and `indicatorBorderRadius`
59-
![animated_toggle_switch_example_7](https://user-images.githubusercontent.com/43761463/161432823-6cf3c855-2a9a-4f4a-9e5c-2951c4166f49.gif) ![animated_toggle_switch_example_8](https://user-images.githubusercontent.com/43761463/161432826-4b0c3e57-eed7-4567-8e7e-31b8a2ba6bee.gif)
59+
![animated_toggle_switch_example_7](https://user-images.githubusercontent.com/43761463/161432823-6cf3c855-2a9a-4f4a-9e5c-2951c4166f49.gif)
60+
![animated_toggle_switch_example_8](https://user-images.githubusercontent.com/43761463/161432826-4b0c3e57-eed7-4567-8e7e-31b8a2ba6bee.gif)
6061

6162
## Easy Usage
6263

@@ -76,7 +77,7 @@ AnimatedToggleSwitch<int>.rolling(
7677
```
7778

7879
### Styling
79-
`style`, `styleBuilder` and `customStyleBuilder` can be used to style the switch.
80+
`style`, `styleBuilder`, `customStyleBuilder` and `styleList` can be used to style an `AnimatedToggleSwitch`.
8081
For the general look of the switch, you can use `style`.
8182
For parameters that should change with the selection, you can use `styleBuilder`.
8283
If you need additional parameters, you can use `customStyleBuilder`.
@@ -139,29 +140,36 @@ CustomAnimatedToggleSwitch<int>(
139140
```
140141

141142
### `AnimatedToggleSwitch.size` with some settings
142-
![animated_toggle_switch_example_4](https://user-images.githubusercontent.com/43761463/161432714-435d8369-7e54-432a-8b9b-6b55a0764f4a.gif)
143+
![animated_toggle_switch_example_size](https://github.com/splashbyte/animated_toggle_switch/assets/43761463/805a0e3f-b3a2-4801-baf9-7a5509905452)
143144
```dart
144145
AnimatedToggleSwitch<int>.size(
146+
textDirection: TextDirection.rtl,
145147
current: value,
146148
values: const [0, 1, 2, 3],
147149
iconOpacity: 0.2,
148150
indicatorSize: const Size.fromWidth(100),
151+
iconBuilder: iconBuilder,
152+
borderWidth: 4.0,
149153
iconAnimationType: AnimationType.onHover,
150-
colorAnimationType: AnimationType.onHover,
151-
iconBuilder: (value, size) {
152-
IconData data = Icons.access_time_rounded;
153-
if (value.isEven) data = Icons.cancel;
154-
return Icon(data, size: min(size.width, size.height));
155-
},
156-
style: const ToggleStyle(borderColor: Colors.transparent),
157-
borderWidth: 0.0,
158-
styleBuilder: (i) => ToggleStyle(indicatorColor: i.isEven == true ? Colors.amber : Colors.red),
154+
style: ToggleStyle(
155+
borderColor: Colors.transparent,
156+
borderRadius: BorderRadius.circular(10.0),
157+
boxShadow: [
158+
BoxShadow(
159+
color: Colors.black26,
160+
spreadRadius: 1,
161+
blurRadius: 2,
162+
offset: Offset(0, 1.5),
163+
),
164+
],
165+
),
166+
styleBuilder: (i) => ToggleStyle(indicatorColor: colorBuilder(i)),
159167
onChanged: (i) => setState(() => value = i),
160168
)
161169
```
162170

163171
### Self-made rolling animation (with `foregroundIndicatorIconBuilder`)
164-
![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif)
172+
![animated_toggle_switch_example_6](https://user-images.githubusercontent.com/43761463/161432744-f60b660d-30d9-4d1d-9b87-14b62bc54e39.gif)
165173
```dart
166174
AnimatedToggleSwitch<int>.size(
167175
current: value,

0 commit comments

Comments
 (0)