Skip to content

Commit 61121e5

Browse files
nickr-devnickr-dev
committed
Several adjustments relating to animation
1 parent 04b19f7 commit 61121e5

6 files changed

Lines changed: 95 additions & 61 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: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,7 @@ class FlutterSwitch extends StatefulWidget {
4141
this.inactiveToggleBorder,
4242
this.activeIcon,
4343
this.inactiveIcon,
44-
this.duration,
45-
this.curve,
44+
this.duration = const Duration(milliseconds: 200),
4645
}) : assert(
4746
(toggleColor == null || activeToggleColor == null) &&
4847
(toggleColor == null || inactiveToggleColor == null),
@@ -246,14 +245,9 @@ class FlutterSwitch extends StatefulWidget {
246245

247246
/// The duration in milliseconds to change the state of the switch
248247
///
249-
/// https://api.flutter.dev/flutter/dart-core/Duration-class.html
248+
/// Defaults to the value of 200 milliseconds.
250249
final Duration duration;
251250

252-
/// An parametric animation easing curve, i.e. a mapping of the unit interval to the unit interval.
253-
///
254-
/// https://api.flutter.dev/flutter/animation/Curves-class.html
255-
final Curve curve;
256-
257251
@override
258252
_FlutterSwitchState createState() => _FlutterSwitchState();
259253
}
@@ -269,15 +263,15 @@ class _FlutterSwitchState extends State<FlutterSwitch>
269263
_animationController = AnimationController(
270264
vsync: this,
271265
value: widget.value ? 1.0 : 0.0,
272-
duration: widget.duration ?? Duration(milliseconds: 60),
266+
duration: widget.duration,
273267
);
274268
_toggleAnimation = AlignmentTween(
275269
begin: Alignment.centerLeft,
276270
end: Alignment.centerRight,
277271
).animate(
278272
CurvedAnimation(
279273
parent: _animationController,
280-
curve: widget.curve ?? Curves.linear,
274+
curve: Curves.linear,
281275
),
282276
);
283277
}
@@ -306,22 +300,21 @@ class _FlutterSwitchState extends State<FlutterSwitch>
306300
Color _switchColor = Colors.white;
307301
Border _switchBorder;
308302
Border _toggleBorder;
309-
Widget _icon;
310303

311304
if (widget.value) {
312305
_toggleColor = widget.activeToggleColor ?? widget.toggleColor;
313306
_switchColor = widget.activeColor;
314307
_switchBorder = widget.activeSwitchBorder ?? widget.switchBorder;
315308
_toggleBorder = widget.activeToggleBorder ?? widget.toggleBorder;
316-
_icon = widget.activeIcon;
317309
} else {
318310
_toggleColor = widget.inactiveToggleColor ?? widget.toggleColor;
319311
_switchColor = widget.inactiveColor;
320312
_switchBorder = widget.inactiveSwitchBorder ?? widget.switchBorder;
321313
_toggleBorder = widget.inactiveToggleBorder ?? widget.toggleBorder;
322-
_icon = widget.inactiveIcon;
323314
}
324315

316+
double _textSpace = widget.width - widget.toggleSize;
317+
325318
return AnimatedBuilder(
326319
animation: _animationController,
327320
builder: (context, child) {
@@ -346,11 +339,28 @@ class _FlutterSwitchState extends State<FlutterSwitch>
346339
),
347340
child: Stack(
348341
children: <Widget>[
349-
Container(
350-
alignment: Alignment.center,
351-
child: _toggleAnimation.value == Alignment.centerRight
352-
? _activeText
353-
: _inactiveText,
342+
AnimatedOpacity(
343+
opacity: widget.value ? 1.0 : 0.0,
344+
duration: widget.duration,
345+
child: Container(
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,
362+
),
363+
),
354364
),
355365
Container(
356366
child: Align(
@@ -363,7 +373,26 @@ class _FlutterSwitchState extends State<FlutterSwitch>
363373
color: _toggleColor ?? Colors.white,
364374
border: _toggleBorder,
365375
),
366-
child: _icon,
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+
],
394+
),
395+
),
367396
),
368397
),
369398
),

0 commit comments

Comments
 (0)