Enhanced CircularCheckBox Flutter Widget with Hover Effect & new dependencies

lib/widgets/todo_screen_checker.dart

@@ -1,25 +1,40 @@
 import 'package:flutter/material.dart';
 
+// Define a callback for when the checkbox value changes
 typedef OnChangeCallback = void Function(bool checked);
 
 class CircularCheckBox extends StatefulWidget {
+  // Add a new property for the checked color
   Color color = Colors.white;
+  // Add a new property for the unchecked color
   Color uncheckedColor = Colors.blue;
+  // Specify that key is nullable
+  final Key? key;
+  // The initial checked state
   final bool checked;
+  // Callback function when the checkbox changes
   final OnChangeCallback onChange;
+  // Size of the checkbox
   double size = 30;
+  // A label to display next to the checkbox
   final String str;
 
+  // Constructor with named parameters
   CircularCheckBox({
-    super.key,
+    this.key,
     required this.checked,
     required this.onChange,
     required this.str,
   });
+
   @override
   _CircularCheckBoxState createState() => _CircularCheckBoxState();
 }
+
 class _CircularCheckBoxState extends State<CircularCheckBox> {
+  // Add a boolean property to track whether the checkbox is hovered or not
+  bool isHovered = false;
+
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -30,18 +45,26 @@ class _CircularCheckBoxState extends State<CircularCheckBox> {
             onTap: () {
               widget.onChange(!widget.checked);
             },
+            // Add a MouseRegion to handle hover events
+            onHover: (value) {
+              setState(() {
+                isHovered = value;
+              });
+            },
             child: Container(
               width: widget.size,
               height: widget.size,
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
                 border: Border.all(
                   width: 1.0,
-                  color: widget.uncheckedColor,
+                  color: isHovered ? Colors.black : widget.uncheckedColor,
                 ),
                 color: widget.checked
                     ? widget.color
-                    : Colors.white,
+                    : isHovered
+                        ? Colors.grey[200] // Change the background color on hover
+                        : Colors.white,
               ),
               child: widget.checked
                   ? const Center(
@@ -61,8 +84,9 @@ class _CircularCheckBoxState extends State<CircularCheckBox> {
             style: TextStyle(
               fontWeight: FontWeight.w500,
               fontSize: 20,
-              color: widget.checked ? Colors.black:Colors.black38,
-            ),),
+              color: widget.checked ? Colors.black : Colors.black38,
+            ),
+          ),
         ],
       ),
     );

pubspec.yaml

@@ -36,12 +36,12 @@ dependencies:
     sdk: flutter
   hive: ^2.2.3
   hive_flutter: ^1.1.0
-  image_picker: ^0.8.6
+  json_annotation: ^4.8.1
   json_annotation: ^4.7.0
-  path: ^1.8.2
-  path_provider: ^2.0.11
+  path: ^1.8.3
+  path_provider: ^2.1.1
   provider: ^6.0.3
-  shared_preferences: ^2.0.15
+  shared_preferences: ^2.2.2
   syncfusion_flutter_pdfviewer: ^20.3.52
 
 dev_dependencies: