changes to theme switcher

Author: Vivek Chib

lib/main.dart

@@ -17,7 +17,8 @@ Future<void> main() async {
     MultiProvider(
       providers: [
         ChangeNotifierProvider(create: (context) => ThemeProvider(pref: pref)),
-        ChangeNotifierProvider(create: (context) => AnimatedBoxesProvider(pref: pref)),
+        ChangeNotifierProvider(
+            create: (context) => AnimatedBoxesProvider(pref: pref)),
       ],
       child: const MyApp(),
     ),

lib/views/home_page.dart

@@ -71,8 +71,8 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
     });
   }
 
-  void updateCurve(CurveModel curve) {
-    if (curve == selectedCurve) return;
+  void updateCurve(CurveModel? curve) {
+    if (curve == null || curve == selectedCurve) return;
 
     setState(() {
       selectedCurve = curve;
@@ -192,7 +192,7 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
                   title: "Curve",
                   value: selectedCurve,
                   items: CurveModel.list[selectedCategory]!.toList(),
-                  onChanged: (value) => updateCurve(value!),
+                  onChanged: updateCurve,
                   builder: (context, value, textStyle) {
                     return Text(value.name.toString(), style: textStyle);
                   },

lib/views/widgets/animated_theme_switch/painter.dart

@@ -33,7 +33,7 @@ class ThemeSwitchPainter extends CustomPainter {
     canvas.translate(center.dx, center.dy);
 
     // rotate canvas with animation value
-    canvas.rotate(1 - animation.value * pi);
+    canvas.rotate((1 - animation.value) * pi / 2);
 
     // draw a box with an additional path to clip center circle
     canvas.drawPath(
@@ -61,16 +61,16 @@ class ThemeSwitchPainter extends CustomPainter {
 
     // now draw a circle at the center
     // and translate it with animation to form a moon shape from center to top-right
-    final moonRadius = radius - 2;
+    final moonRadius = radius * .70;
 
-    final translateX = size.width / 2 + (animation.value * size.width * .10);
-    final translateY = size.height / 2 - (animation.value * size.height * .10);
+    final translateX = size.width / 2 + (animation.value * size.width * .125);
+    final translateY = size.height / 2 - (animation.value * size.height * .075);
 
     canvas.drawCircle(Offset(translateX, translateY), moonRadius, canvasPaint);
   }
 
   @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return false;
+  bool shouldRepaint(covariant ThemeSwitchPainter oldDelegate) {
+    return oldDelegate.animation.value != animation.value;
   }
 }

lib/views/widgets/animated_theme_switch/widget.dart

@@ -11,7 +11,7 @@ class AnimatedThemeSwitcher extends StatefulWidget {
 }
 
 class _AnimatedThemeSwitcherState extends State<AnimatedThemeSwitcher>
-    with TickerProviderStateMixin {
+    with SingleTickerProviderStateMixin {
   late AnimationController controller;
 
   late Animation<double> animation;
@@ -21,12 +21,12 @@ class _AnimatedThemeSwitcherState extends State<AnimatedThemeSwitcher>
     super.initState();
     controller = AnimationController(
       vsync: this,
-      duration: const Duration(milliseconds: 500),
+      duration: const Duration(milliseconds: 750),
     );
 
     animation = CurvedAnimation(
       parent: controller,
-      curve: Curves.easeInOutCubic,
+      curve: Curves.easeInOutBack,
     );
   }