Skip to content

Commit e84db8c

Browse files
boringdeveloperboringdeveloper
authored
Merge pull request #22 from boringdeveloper/Maksim-Nikolaev-master
Animation Changes
2 parents 7ba5e21 + 61121e5 commit e84db8c

6 files changed

Lines changed: 113 additions & 74 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,8 @@
4141
## [0.2.1] - February 16, 2021
4242

4343
* Handling the display of the switch in the AppBar
44+
45+
## [0.2.2] - March 06, 2021
46+
47+
* Made toggle animation smoother
48+
* Opacity animation for switch texts and icons

‎example/lib/main.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -214,8 +214,8 @@ class _MyHomePageState extends State<MyHomePage> {
214214
mainAxisAlignment: MainAxisAlignment.spaceBetween,
215215
children: <Widget>[
216216
FlutterSwitch(
217-
activeText: "All Good",
218-
inactiveText: "Under Quarantine",
217+
activeText: "All Good. Negative.",
218+
inactiveText: "Under Quarantine.",
219219
value: status6,
220220
valueFontSize: 10.0,
221221
width: 110,

‎example/pubspec.lock‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,42 @@ packages:
77
name: async
88
url: "https://pub.dartlang.org"
99
source: hosted
10-
version: "2.5.0-nullsafety.1"
10+
version: "2.5.0"
1111
boolean_selector:
1212
dependency: transitive
1313
description:
1414
name: boolean_selector
1515
url: "https://pub.dartlang.org"
1616
source: hosted
17-
version: "2.1.0-nullsafety.1"
17+
version: "2.1.0"
1818
characters:
1919
dependency: transitive
2020
description:
2121
name: characters
2222
url: "https://pub.dartlang.org"
2323
source: hosted
24-
version: "1.1.0-nullsafety.3"
24+
version: "1.1.0"
2525
charcode:
2626
dependency: transitive
2727
description:
2828
name: charcode
2929
url: "https://pub.dartlang.org"
3030
source: hosted
31-
version: "1.2.0-nullsafety.1"
31+
version: "1.2.0"
3232
clock:
3333
dependency: transitive
3434
description:
3535
name: clock
3636
url: "https://pub.dartlang.org"
3737
source: hosted
38-
version: "1.1.0-nullsafety.1"
38+
version: "1.1.0"
3939
collection:
4040
dependency: transitive
4141
description:
4242
name: collection
4343
url: "https://pub.dartlang.org"
4444
source: hosted
45-
version: "1.15.0-nullsafety.3"
45+
version: "1.15.0"
4646
cupertino_icons:
4747
dependency: "direct main"
4848
description:
@@ -56,7 +56,7 @@ packages:
5656
name: fake_async
5757
url: "https://pub.dartlang.org"
5858
source: hosted
59-
version: "1.2.0-nullsafety.1"
59+
version: "1.2.0"
6060
flutter:
6161
dependency: "direct main"
6262
description: flutter
@@ -68,7 +68,7 @@ packages:
6868
path: ".."
6969
relative: true
7070
source: path
71-
version: "0.2.1"
71+
version: "0.2.2"
7272
flutter_test:
7373
dependency: "direct dev"
7474
description: flutter
@@ -80,21 +80,21 @@ packages:
8080
name: matcher
8181
url: "https://pub.dartlang.org"
8282
source: hosted
83-
version: "0.12.10-nullsafety.1"
83+
version: "0.12.10"
8484
meta:
8585
dependency: transitive
8686
description:
8787
name: meta
8888
url: "https://pub.dartlang.org"
8989
source: hosted
90-
version: "1.3.0-nullsafety.3"
90+
version: "1.3.0"
9191
path:
9292
dependency: transitive
9393
description:
9494
name: path
9595
url: "https://pub.dartlang.org"
9696
source: hosted
97-
version: "1.8.0-nullsafety.1"
97+
version: "1.8.0"
9898
sky_engine:
9999
dependency: transitive
100100
description: flutter
@@ -106,55 +106,55 @@ packages:
106106
name: source_span
107107
url: "https://pub.dartlang.org"
108108
source: hosted
109-
version: "1.8.0-nullsafety.2"
109+
version: "1.8.0"
110110
stack_trace:
111111
dependency: transitive
112112
description:
113113
name: stack_trace
114114
url: "https://pub.dartlang.org"
115115
source: hosted
116-
version: "1.10.0-nullsafety.1"
116+
version: "1.10.0"
117117
stream_channel:
118118
dependency: transitive
119119
description:
120120
name: stream_channel
121121
url: "https://pub.dartlang.org"
122122
source: hosted
123-
version: "2.1.0-nullsafety.1"
123+
version: "2.1.0"
124124
string_scanner:
125125
dependency: transitive
126126
description:
127127
name: string_scanner
128128
url: "https://pub.dartlang.org"
129129
source: hosted
130-
version: "1.1.0-nullsafety.1"
130+
version: "1.1.0"
131131
term_glyph:
132132
dependency: transitive
133133
description:
134134
name: term_glyph
135135
url: "https://pub.dartlang.org"
136136
source: hosted
137-
version: "1.2.0-nullsafety.1"
137+
version: "1.2.0"
138138
test_api:
139139
dependency: transitive
140140
description:
141141
name: test_api
142142
url: "https://pub.dartlang.org"
143143
source: hosted
144-
version: "0.2.19-nullsafety.2"
144+
version: "0.2.19"
145145
typed_data:
146146
dependency: transitive
147147
description:
148148
name: typed_data
149149
url: "https://pub.dartlang.org"
150150
source: hosted
151-
version: "1.3.0-nullsafety.3"
151+
version: "1.3.0"
152152
vector_math:
153153
dependency: transitive
154154
description:
155155
name: vector_math
156156
url: "https://pub.dartlang.org"
157157
source: hosted
158-
version: "2.1.0-nullsafety.3"
158+
version: "2.1.0"
159159
sdks:
160-
dart: ">=2.10.0-110 <2.11.0"
160+
dart: ">=2.12.0-0.0 <3.0.0"

‎lib/flutter_switch.dart‎

Lines changed: 66 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ class FlutterSwitch extends StatefulWidget {
4141
this.inactiveToggleBorder,
4242
this.activeIcon,
4343
this.inactiveIcon,
44+
this.duration = const Duration(milliseconds: 200),
4445
}) : assert(
4546
(toggleColor == null || activeToggleColor == null) &&
4647
(toggleColor == null || inactiveToggleColor == null),
@@ -242,6 +243,11 @@ class FlutterSwitch extends StatefulWidget {
242243
/// This property is optional.
243244
final Icon inactiveIcon;
244245

246+
/// The duration in milliseconds to change the state of the switch
247+
///
248+
/// Defaults to the value of 200 milliseconds.
249+
final Duration duration;
250+
245251
@override
246252
_FlutterSwitchState createState() => _FlutterSwitchState();
247253
}
@@ -257,13 +263,16 @@ class _FlutterSwitchState extends State<FlutterSwitch>
257263
_animationController = AnimationController(
258264
vsync: this,
259265
value: widget.value ? 1.0 : 0.0,
260-
duration: Duration(milliseconds: 60),
266+
duration: widget.duration,
261267
);
262268
_toggleAnimation = AlignmentTween(
263269
begin: Alignment.centerLeft,
264270
end: Alignment.centerRight,
265271
).animate(
266-
CurvedAnimation(parent: _animationController, curve: Curves.linear),
272+
CurvedAnimation(
273+
parent: _animationController,
274+
curve: Curves.linear,
275+
),
267276
);
268277
}
269278

@@ -291,22 +300,21 @@ class _FlutterSwitchState extends State<FlutterSwitch>
291300
Color _switchColor = Colors.white;
292301
Border _switchBorder;
293302
Border _toggleBorder;
294-
Widget _icon;
295303

296304
if (widget.value) {
297305
_toggleColor = widget.activeToggleColor ?? widget.toggleColor;
298306
_switchColor = widget.activeColor;
299307
_switchBorder = widget.activeSwitchBorder ?? widget.switchBorder;
300308
_toggleBorder = widget.activeToggleBorder ?? widget.toggleBorder;
301-
_icon = widget.activeIcon;
302309
} else {
303310
_toggleColor = widget.inactiveToggleColor ?? widget.toggleColor;
304311
_switchColor = widget.inactiveColor;
305312
_switchBorder = widget.inactiveSwitchBorder ?? widget.switchBorder;
306313
_toggleBorder = widget.inactiveToggleBorder ?? widget.toggleBorder;
307-
_icon = widget.inactiveIcon;
308314
}
309315

316+
double _textSpace = widget.width - widget.toggleSize;
317+
310318
return AnimatedBuilder(
311319
animation: _animationController,
312320
builder: (context, child) {
@@ -329,39 +337,65 @@ class _FlutterSwitchState extends State<FlutterSwitch>
329337
color: _switchColor,
330338
border: _switchBorder,
331339
),
332-
child: Row(
333-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
340+
child: Stack(
334341
children: <Widget>[
335-
_toggleAnimation.value == Alignment.centerRight
336-
? Expanded(
337-
child: Container(
338-
padding: EdgeInsets.symmetric(horizontal: 4.0),
339-
child: _activeText,
340-
),
341-
)
342-
: Container(),
343-
Align(
344-
alignment: _toggleAnimation.value,
342+
AnimatedOpacity(
343+
opacity: widget.value ? 1.0 : 0.0,
344+
duration: widget.duration,
345345
child: Container(
346-
width: widget.toggleSize,
347-
height: widget.toggleSize,
348-
decoration: BoxDecoration(
349-
shape: BoxShape.circle,
350-
color: _toggleColor ?? Colors.white,
351-
border: _toggleBorder,
346+
width: _textSpace,
347+
padding: EdgeInsets.symmetric(horizontal: 4.0),
348+
alignment: Alignment.centerLeft,
349+
child: _activeText,
350+
),
351+
),
352+
Align(
353+
alignment: Alignment.centerRight,
354+
child: AnimatedOpacity(
355+
opacity: !widget.value ? 1.0 : 0.0,
356+
duration: widget.duration,
357+
child: Container(
358+
width: _textSpace,
359+
padding: EdgeInsets.symmetric(horizontal: 4.0),
360+
alignment: Alignment.centerRight,
361+
child: _inactiveText,
352362
),
353-
child: _icon,
354363
),
355364
),
356-
_toggleAnimation.value == Alignment.centerLeft
357-
? Expanded(
358-
child: Container(
359-
padding: EdgeInsets.symmetric(horizontal: 4.0),
360-
alignment: Alignment.centerRight,
361-
child: _inactiveText,
365+
Container(
366+
child: Align(
367+
alignment: _toggleAnimation.value,
368+
child: Container(
369+
width: widget.toggleSize,
370+
height: widget.toggleSize,
371+
decoration: BoxDecoration(
372+
shape: BoxShape.circle,
373+
color: _toggleColor ?? Colors.white,
374+
border: _toggleBorder,
375+
),
376+
child: Container(
377+
child: Stack(
378+
children: [
379+
Center(
380+
child: AnimatedOpacity(
381+
opacity: widget.value ? 1.0 : 0.0,
382+
duration: widget.duration,
383+
child: widget.activeIcon,
384+
),
385+
),
386+
Center(
387+
child: AnimatedOpacity(
388+
opacity: !widget.value ? 1.0 : 0.0,
389+
duration: widget.duration,
390+
child: widget.inactiveIcon,
391+
),
392+
),
393+
],
362394
),
363-
)
364-
: Container(),
395+
),
396+
),
397+
),
398+
),
365399
],
366400
),
367401
),

0 commit comments

Comments
 (0)