@@ -8,8 +8,8 @@ class YakoThemeSwitch extends StatefulWidget {
88 /// You can set the custom width of the switch
99 final double width;
1010
11- /// Just a callback function to get the changed state of the switch
12- final Function ({ bool changed}) onChanged;
11+ /// Callback invoked with the new state whenever the switch is toggled
12+ final ValueChanged < bool > onChanged;
1313
1414 /// The background color of the switch when it is enabled
1515 final Color ? enabledBackgroundColor;
@@ -26,10 +26,11 @@ class YakoThemeSwitch extends StatefulWidget {
2626 /// The duration of the animation
2727 final Duration animationDuration;
2828
29- /// The border radius of the toggle. Try setting it to 4 and chech how circle now is square
29+ /// The border radius of the toggle. Try setting it to 4 to make the circle square
3030 final double ? enabledToggleBorderRadius;
3131
3232 const YakoThemeSwitch ({
33+ super .key,
3334 this .enabled = false ,
3435 this .width = 45 ,
3536 this .enabledBackgroundColor,
@@ -42,61 +43,57 @@ class YakoThemeSwitch extends StatefulWidget {
4243 });
4344
4445 @override
45- _YakoThemeSwitchState createState () => _YakoThemeSwitchState ();
46+ State < YakoThemeSwitch > createState () => _YakoThemeSwitchState ();
4647}
4748
4849class _YakoThemeSwitchState extends State <YakoThemeSwitch >
4950 with SingleTickerProviderStateMixin {
50- late AnimationController animationController ;
51- late Animation <double > animation ;
52- late bool turnState ;
53- late Color enabledBackgroundColor ;
54- late Color disabledBackgroundColor ;
55- late Color enabledToggleColor ;
56- late Color disabledToggleColor ;
57- double animationControllerValue = 0.0 ;
51+ late AnimationController _animationController ;
52+ late Animation <double > _animation ;
53+ late bool _turnState ;
54+ late Color _enabledBackgroundColor ;
55+ late Color _disabledBackgroundColor ;
56+ late Color _enabledToggleColor ;
57+ late Color _disabledToggleColor ;
58+ double _animationValue = 0.0 ;
5859
5960 @override
6061 void dispose () {
61- animationController .dispose ();
62+ _animationController .dispose ();
6263 super .dispose ();
6364 }
6465
6566 @override
6667 void initState () {
6768 super .initState ();
6869
69- enabledBackgroundColor =
70+ _enabledBackgroundColor =
7071 widget.enabledBackgroundColor ?? Colors .grey.shade300;
71- disabledBackgroundColor =
72- widget.disabledBackgroundColor ?? Color (0xFF2E386E );
73- enabledToggleColor =
72+ _disabledBackgroundColor =
73+ widget.disabledBackgroundColor ?? const Color (0xFF2E386E );
74+ _enabledToggleColor =
7475 widget.enabledToggleColor ?? Colors .amberAccent.shade700;
75- disabledToggleColor = widget.disabledToggleColor ?? Color (0xFF70E2FB );
76+ _disabledToggleColor =
77+ widget.disabledToggleColor ?? const Color (0xFF70E2FB );
7678
77- animationControllerValue = widget.enabled ? 1.0 : 0.0 ;
78- animationController = AnimationController (
79- value: animationControllerValue,
79+ _turnState = widget.enabled;
80+ _animationValue = widget.enabled ? 1.0 : 0.0 ;
81+
82+ _animationController = AnimationController (
83+ value: _animationValue,
8084 vsync: this ,
8185 lowerBound: 0.0 ,
8286 upperBound: 1.0 ,
8387 duration: widget.animationDuration,
8488 );
85- animation =
86- CurvedAnimation (parent: animationController, curve: Curves .easeInOut);
87-
88- animationController.addListener (() {
89- setState (() {
90- animationControllerValue = animation.value;
91- });
92- });
93- turnState = widget.enabled;
89+ _animation = CurvedAnimation (
90+ parent: _animationController,
91+ curve: Curves .easeInOut,
92+ );
9493
95- WidgetsBinding .instance. addPostFrameCallback ((_ ) {
94+ _animationController. addListener (( ) {
9695 setState (() {
97- if (turnState) {
98- animationController.forward ();
99- }
96+ _animationValue = _animation.value;
10097 });
10198 });
10299 }
@@ -105,29 +102,26 @@ class _YakoThemeSwitchState extends State<YakoThemeSwitch>
105102 void didUpdateWidget (YakoThemeSwitch oldWidget) {
106103 super .didUpdateWidget (oldWidget);
107104
108- // if enabled value is updated, reflect the change in switch
109105 if (oldWidget.enabled != widget.enabled) {
110- turnState = widget.enabled;
111- if (turnState ) {
112- animationController .forward ();
106+ _turnState = widget.enabled;
107+ if (_turnState ) {
108+ _animationController .forward ();
113109 } else {
114- animationController .reverse ();
110+ _animationController .reverse ();
115111 }
116112 }
117113 }
118114
119115 @override
120116 Widget build (BuildContext context) {
121117 final Color ? transitionColor = Color .lerp (
122- disabledBackgroundColor ,
123- enabledBackgroundColor ,
124- animationControllerValue ,
118+ _disabledBackgroundColor ,
119+ _enabledBackgroundColor ,
120+ _animationValue ,
125121 );
126122
127123 return GestureDetector (
128- onTap: () {
129- toggle (changeState: true );
130- },
124+ onTap: _toggle,
131125 child: Container (
132126 padding: const EdgeInsets .all (3 ),
133127 width: widget.width,
@@ -138,23 +132,21 @@ class _YakoThemeSwitchState extends State<YakoThemeSwitch>
138132 child: Stack (
139133 children: < Widget > [
140134 Transform .translate (
141- offset: Offset ((widget.width - 25 ) * animationControllerValue , 0 ),
135+ offset: Offset ((widget.width - 25 ) * _animationValue , 0 ),
142136 child: Transform .rotate (
143- angle: animationControllerValue ,
144- child: Container (
137+ angle: _animationValue ,
138+ child: SizedBox (
145139 height: 18 ,
146140 width: 18 ,
147- alignment: Alignment .center,
148141 child: Stack (
149142 children: < Widget > [
150143 Center (
151144 child: Opacity (
152- opacity:
153- (1 - animationControllerValue).clamp (0.0 , 1.0 ),
145+ opacity: (1 - _animationValue).clamp (0.0 , 1.0 ),
154146 child: SvgPicture .asset (
155147 'assets/dark_mode_switch_icon.svg' ,
156148 colorFilter: ColorFilter .mode (
157- disabledToggleColor ,
149+ _disabledToggleColor ,
158150 BlendMode .srcIn,
159151 ),
160152 height: 18 ,
@@ -164,12 +156,13 @@ class _YakoThemeSwitchState extends State<YakoThemeSwitch>
164156 ),
165157 Center (
166158 child: Opacity (
167- opacity: animationControllerValue .clamp (0.0 , 1.0 ),
159+ opacity: _animationValue .clamp (0.0 , 1.0 ),
168160 child: Container (
169161 decoration: BoxDecoration (
170162 borderRadius: BorderRadius .circular (
171- widget.enabledToggleBorderRadius ?? 20 ),
172- color: enabledToggleColor,
163+ widget.enabledToggleBorderRadius ?? 20 ,
164+ ),
165+ color: _enabledToggleColor,
173166 ),
174167 ),
175168 ),
@@ -178,19 +171,22 @@ class _YakoThemeSwitchState extends State<YakoThemeSwitch>
178171 ),
179172 ),
180173 ),
181- )
174+ ),
182175 ],
183176 ),
184177 ),
185178 );
186179 }
187180
188- void toggle ({ bool changeState = false } ) {
181+ void _toggle ( ) {
189182 setState (() {
190- if (changeState) turnState = ! turnState;
191- turnState ? animationController.forward () : animationController.reverse ();
192-
193- widget.onChanged (changed: turnState);
183+ _turnState = ! _turnState;
184+ if (_turnState) {
185+ _animationController.forward ();
186+ } else {
187+ _animationController.reverse ();
188+ }
194189 });
190+ widget.onChanged (_turnState);
195191 }
196192}
0 commit comments