added animated theme toggle button

Vivek Chib · Vivek Chib · commit a7c7f180d17f · 2025-01-10T14:14:20.000+05:30
diff --git a/lib/utils/theme/theme.dart b/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,
diff --git a/lib/views/home_page.dart b/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(),
-            ),
-          )
         ],
       ),
     );
diff --git a/lib/views/widgets/animated_theme_switch/painter.dart b/lib/views/widgets/animated_theme_switch/painter.dart
@@ -0,0 +1,76 @@
+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;
+
+  Paint get canvasPaint => Paint()
+    ..color = iconColor
+    ..style = PaintingStyle.fill;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final boxSize = size.width * .70;
+    final radius = size.width * 0.30;
+    final center = Offset(size.width / 2, size.height / 2);
+
+    // Circular mask for center
+    final circlePath = Path()
+      ..addOval(Rect.fromCircle(center: center, radius: radius));
+
+    // save canvas
+    canvas.save();
+
+    // move canvas to center
+    canvas.translate(center.dx, center.dy);
+
+    // rotate canvas with animation value
+    canvas.rotate(1 - animation.value * pi);
+
+    // draw a box with an additional path to clip center circle
+    canvas.drawPath(
+      Path()
+        ..addRect(Rect.fromLTWH(-boxSize / 2, -boxSize / 2, boxSize, boxSize))
+        ..addPath(circlePath.shift(-center), Offset.zero)
+        ..fillType = PathFillType.evenOdd,
+      canvasPaint,
+    );
+
+    // rotate canvas to rotate the next box 45 degrees
+    canvas.rotate(pi / 4);
+
+    // draw a box with an additional path to clip center circle
+    canvas.drawPath(
+      Path()
+        ..addRect(Rect.fromLTWH(-boxSize / 2, -boxSize / 2, boxSize, boxSize))
+        ..addPath(circlePath.shift(-center), Offset.zero)
+        ..fillType = PathFillType.evenOdd,
+      canvasPaint,
+    );
+
+    // restore canvas
+    canvas.restore();
+
+    // 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 translateX = size.width / 2 + (animation.value * size.width * .10);
+    final translateY = size.height / 2 - (animation.value * size.height * .10);
+
+    canvas.drawCircle(Offset(translateX, translateY), moonRadius, canvasPaint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return false;
+  }
+}
diff --git a/lib/views/widgets/animated_theme_switch/widget.dart b/lib/views/widgets/animated_theme_switch/widget.dart
@@ -0,0 +1,74 @@
+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.easeInOutCubic,
+    );
+  }
+
+  @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 iconTheme = Theme.of(context).iconTheme;
+
+    return Consumer<ThemeProvider>(
+      builder: (context, provider, child) {
+        return IconButton(
+          onPressed: provider.toggleTheme,
+          icon: CustomPaint(
+            size: Size.square(iconTheme.size ?? 24),
+            painter: ThemeSwitchPainter(
+              animation: animation,
+              iconThemeData: iconTheme,
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/lib/views/widgets/appbar.dart b/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(),
         ),
       ],
     );
diff --git a/lib/views/widgets/code_block.dart b/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
diff --git a/lib/views/widgets/dropdown_menu.dart b/lib/views/widgets/dropdown_menu.dart
@@ -1,20 +1,18 @@
 import 'package:flutter/material.dart';
 
 class DropdownMenuWidget<T> extends StatelessWidget {
-  final double? width;
   final String title;
   final T? value;
   final List<T> items;
   final Widget Function(BuildContext context, T value, TextStyle? textStyle)?
-      childBuilder;
+      builder;
   final void Function(T?)? onChanged;
 
   const DropdownMenuWidget({
     super.key,
     required this.title,
     required this.items,
-    this.width,
-    this.childBuilder,
+    this.builder,
     this.onChanged,
     this.value,
   });
@@ -25,39 +23,32 @@ class DropdownMenuWidget<T> extends StatelessWidget {
 
     final childTextStyle = Theme.of(context).textTheme.titleMedium;
 
-    final borderRadius = BorderRadius.circular(10);
-
     return PhysicalModel(
-      color: Colors.transparent,
+      color: Theme.of(context).colorScheme.onPrimaryFixed,
       shadowColor: Theme.of(context).colorScheme.shadow,
       elevation: 1.0,
-      borderRadius: borderRadius,
-      child: Container(
-        width: width,
-        padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.onPrimaryFixed,
-          borderRadius: borderRadius,
-        ),
+      borderRadius: BorderRadius.circular(10),
+      child: Padding(
+        padding: EdgeInsets.fromLTRB(16, 8, 16, 0.0),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text(title, style: titleStyle),
             DropdownButton<T>(
               value: value,
-              underline: SizedBox.shrink(),
+              onChanged: onChanged,
+              underline: const SizedBox.shrink(),
               isExpanded: true,
+              isDense: false,
               items: items.map(
-                (e) {
+                (item) {
                   return DropdownMenuItem<T>(
-                    value: e,
-                    child: childBuilder == null
-                        ? Text(e.toString(), style: childTextStyle)
-                        : childBuilder!(context, e, childTextStyle),
+                    value: item,
+                    child: builder?.call(context, item, childTextStyle) ??
+                        Text(item.toString(), style: childTextStyle),
                   );
                 },
               ).toList(),
-              onChanged: onChanged,
             ),
           ],
         ),
diff --git a/lib/views/widgets/time_slider.dart b/lib/views/widgets/time_slider.dart

Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,7 @@ class CodeBlock extends StatelessWidget {`
`14`	`14`
`15`	`15`	`ScaffoldMessenger.of(context)`
`16`	`16`	`..clearSnackBars()`
`17`		`- ..showSnackBar(`
`18`		`- const SnackBar(content: Text('Copied to clipboard')),`
`19`		`- );`
	`17`	`+ ..showSnackBar(const SnackBar(content: Text('Copied to clipboard')));`
`20`	`18`	`}`
`21`	`19`
`22`	`20`	`@override`