更新页面

lib/pages/device_bind/componnet/FancyCircleCheckbox.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+
+class FancyCircleCheckbox extends StatefulWidget {
+  final bool value;
+  final ValueChanged<bool> onChanged;
+  final Color borderColor;
+  final Color fillColor;
+
+  const FancyCircleCheckbox({
+    Key? key,
+    required this.value,
+    required this.onChanged,
+    this.borderColor = Colors.white,
+    this.fillColor = Colors.blue,
+  }) : super(key: key);
+
+  @override
+  State<FancyCircleCheckbox> createState() => _FancyCircleCheckboxState();
+}
+
+class _FancyCircleCheckboxState extends State<FancyCircleCheckbox>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _scaleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 200),
+      vsync: this,
+    );
+    _scaleAnimation = CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut,
+    );
+
+    if (widget.value) {
+      _controller.forward();
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant FancyCircleCheckbox oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.value != oldWidget.value) {
+      widget.value ? _controller.forward() : _controller.reverse();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => widget.onChanged(!widget.value),
+      child: Container(
+        width: 24,
+        height: 24,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+            color: widget.value
+                ? widget.borderColor
+                : widget.borderColor.withOpacity(0.5),
+            width: 1,
+          ),
+        ),
+        child: ScaleTransition(
+          scale: _scaleAnimation,
+          child: Container(
+            margin: EdgeInsets.all(5),
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: widget.fillColor,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}