added animated theme toggle button

Author: Vivek Chib

lib/utils/theme/theme.dart

@@ -341,10 +341,7 @@ class MaterialTheme {
         useMaterial3: true,
         brightness: colorScheme.brightness,
         colorScheme: colorScheme,
-        snackBarTheme: SnackBarThemeData(
-          behavior: SnackBarBehavior.floating,
-          showCloseIcon: true,
-        ),
+        snackBarTheme: SnackBarThemeData(showCloseIcon: true),
         textTheme: textTheme.apply(
           fontFamily: "Outfit",
           bodyColor: colorScheme.onSurface,

lib/utils/theme/theme_provider.dart

@@ -11,7 +11,7 @@ class ThemeProvider extends ChangeNotifier {
     return isDarkMode ? ThemeMode.dark : ThemeMode.light;
   }
 
-  void toggleTheme() {
+  Future<void> toggleTheme() async {
     final isDarkMode = pref.getBool('darkMode') ?? false;
     pref.setBool('darkMode', !isDarkMode);
     notifyListeners();

lib/views/home_page.dart

@@ -10,7 +10,6 @@ import 'package:provider/provider.dart';
 import 'widgets/animated_box/animated_boxes.dart';
 import 'widgets/animated_box/provider.dart';
 import 'widgets/code_block.dart';
-import 'widgets/cubic_curve_input_widget.dart';
 
 class HomePage extends StatefulWidget {
   const HomePage({super.key});
@@ -27,34 +26,21 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
   late String selectedCategory;
   late CurveModel selectedCurve;
 
-  late List<TextEditingController> customCubicControllers;
-
   late int animationTime;
 
   @override
   void initState() {
     super.initState();
 
-    customCubicControllers = List.generate(4, (index) {
-      final value = switch (index) {
-        0 => "0.5",
-        1 => "0",
-        2 => "0.75",
-        3 => "1",
-        int() => throw UnimplementedError(),
-      };
-
-      return TextEditingController(text: value);
-    });
-
     selectedCategory = CurveModel.list.keys.first;
     selectedCurve = CurveModel.list.values.first.first;
 
     animationTime = 2;
 
     playPauseController = AnimationController(
       vsync: this,
-      duration: Duration(milliseconds: 250),
+      duration: 100.ms,
+      reverseDuration: 100.ms,
     )..forward();
 
     controller = AnimationController(
@@ -70,10 +56,6 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
 
   @override
   void dispose() {
-    for (final controller in customCubicControllers) {
-      controller.dispose();
-    }
-
     playPauseController.dispose();
     controller.dispose();
     super.dispose();
@@ -207,11 +189,11 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
               Flexible(
                 flex: 2,
                 child: DropdownMenuWidget<CurveModel>(
-                  title: "Type",
+                  title: "Curve",
                   value: selectedCurve,
                   items: CurveModel.list[selectedCategory]!.toList(),
                   onChanged: (value) => updateCurve(value!),
-                  childBuilder: (context, value, textStyle) {
+                  builder: (context, value, textStyle) {
                     return Text(value.name.toString(), style: textStyle);
                   },
                 ),
@@ -224,24 +206,6 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
             animationTime: animationTime,
             onChanged: updateAnimationTime,
           ),
-
-          // TODO : TextField have some issues with current flutter version, waiting it to be fixed
-          Visibility(
-            visible: false,
-            child: AnimatedSize(
-              curve: Curves.fastOutSlowIn,
-              duration: 200.ms,
-              reverseDuration: 200.ms,
-              child: (selectedCurve.isCustom)
-                  ? CubicCurveInputWidget(
-                      controllers: customCubicControllers,
-                      onApply: (curve) {
-                        updateCurve(selectedCurve.copyWith(curve: curve));
-                      },
-                    )
-                  : const SizedBox.shrink(),
-            ),
-          )
         ],
       ),
     );

lib/views/widgets/animated_theme_switch/painter.dart

@@ -0,0 +1,71 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+class ThemeSwitchPainter extends CustomPainter {
+  final IconThemeData iconThemeData;
+  final Animation<double> animation;
+
+  ThemeSwitchPainter({
+    required this.iconThemeData,
+    required this.animation,
+  }) : super(repaint: animation);
+
+  Color get iconColor => iconThemeData.color ?? Colors.white;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    _drawBackgroundSquares(canvas, size);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return false;
+  }
+
+  void _drawBackgroundSquares(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = iconColor
+      ..style = PaintingStyle.fill;
+
+    final boxSize = size.width * .75;
+    final radius = size.width * 0.30;
+    final center = Offset(size.width / 2, size.height / 2);
+
+    // Create circular mask
+    final circlePath = Path()
+      ..addOval(Rect.fromCircle(center: center, radius: radius));
+
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.rotate(animation.value * pi);
+
+    canvas.drawPath(
+      Path()
+        ..addRect(Rect.fromLTWH(-boxSize / 2, -boxSize / 2, boxSize, boxSize))
+        ..addPath(circlePath.shift(Offset(-size.width / 2, -size.height / 2)),
+            Offset.zero)
+        ..fillType = PathFillType.evenOdd,
+      paint,
+    );
+
+    canvas.rotate(pi / 4);
+    canvas.drawPath(
+      Path()
+        ..addRect(Rect.fromLTWH(-boxSize / 2, -boxSize / 2, boxSize, boxSize))
+        ..addPath(circlePath.shift(Offset(-size.width / 2, -size.height / 2)),
+            Offset.zero)
+        ..fillType = PathFillType.evenOdd,
+      paint,
+    );
+
+    canvas.restore();
+
+    final rad = radius - 2;
+
+    canvas.drawCircle(
+        Offset(size.width / 2 + (animation.value * size.width * .10),
+            size.height / 2 - (animation.value * size.height * .10)),
+        rad,
+        paint);
+  }
+}

lib/views/widgets/animated_theme_switch/widget.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_curve_visualizer/utils/theme/theme_provider.dart';
+import 'package:flutter_curve_visualizer/views/widgets/animated_theme_switch/painter.dart';
+import 'package:provider/provider.dart';
+
+class AnimatedThemeSwitcher extends StatefulWidget {
+  const AnimatedThemeSwitcher({super.key});
+
+  @override
+  State<AnimatedThemeSwitcher> createState() => _AnimatedThemeSwitcherState();
+}
+
+class _AnimatedThemeSwitcherState extends State<AnimatedThemeSwitcher>
+    with TickerProviderStateMixin {
+  late AnimationController controller;
+
+  late Animation<double> animation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 500),
+    );
+
+    animation = CurvedAnimation(
+      parent: controller,
+      curve: Curves.easeInOut,
+    );
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+
+    final isDark =
+        context.read<ThemeProvider>().getThemeMode() == ThemeMode.dark;
+
+    if ((isDark && controller.status != AnimationStatus.completed) ||
+        (!isDark && controller.status != AnimationStatus.dismissed)) {
+      if (isDark) {
+        controller.forward();
+      } else {
+        controller.reverse();
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final iconSize = Theme.of(context).iconTheme.size ?? 24;
+
+    return Consumer<ThemeProvider>(
+      builder: (context, provider, child) {
+        final isDark = provider.getThemeMode() == ThemeMode.dark;
+
+        return IconButton(
+          onPressed: () {
+            provider.toggleTheme().then((_) {
+              if (controller.status == AnimationStatus.completed) {
+                controller.reverse();
+              } else {
+                controller.forward();
+              }
+            });
+          },
+          icon: CustomPaint(
+            size: Size.square(iconSize),
+            painter: ThemeSwitchPainter(
+              animation: animation,
+              iconThemeData: Theme.of(context).iconTheme,
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/views/widgets/appbar.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_curve_visualizer/utils/theme/theme_provider.dart';
+import 'package:flutter_curve_visualizer/views/widgets/animated_theme_switch/widget.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -11,11 +12,13 @@ class HomeAppBar extends StatelessWidget implements PreferredSizeWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
+    final actionPadding = const EdgeInsets.only(right: 12.0);
+
     return AppBar(
       title: const Text('Flutter Curve Visualizer'),
       actions: [
         Padding(
-          padding: const EdgeInsets.only(right: 12.0),
+          padding: actionPadding,
           child: IconButton(
             onPressed: () {
               launchUrl(Uri.parse(
@@ -33,19 +36,8 @@ class HomeAppBar extends StatelessWidget implements PreferredSizeWidget {
           ),
         ),
         Padding(
-          padding: const EdgeInsets.only(right: 12.0),
-          child: Consumer<ThemeProvider>(
-            builder: (context, value, child) {
-              final iconData = value.getThemeMode() == ThemeMode.dark
-                  ? Icons.light_mode
-                  : Icons.dark_mode;
-
-              return IconButton(
-                onPressed: () => value.toggleTheme(),
-                icon: Icon(iconData),
-              );
-            },
-          ),
+          padding: actionPadding,
+          child: AnimatedThemeSwitcher(),
         ),
       ],
     );

lib/views/widgets/code_block.dart

@@ -14,9 +14,7 @@ class CodeBlock extends StatelessWidget {
 
     ScaffoldMessenger.of(context)
       ..clearSnackBars()
-      ..showSnackBar(
-        const SnackBar(content: Text('Copied to clipboard')),
-      );
+      ..showSnackBar(const SnackBar(content: Text('Copied to clipboard')));
   }
 
   @override