From 187635bc94138c9c070f19ec7fe9334aa5ff9391 Mon Sep 17 00:00:00 2001
From: laiiihz <laiiihz@outlook.com>
Date: Mon, 7 Dec 2020 11:48:40 +0800
Subject: [PATCH] add styled checkbox

---
 example/lib/example_box.dart | 10 ++++++++
 lib/box/as_check_box.dart    | 44 +++++++++++++++++++++++++++++++++---
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/example/lib/example_box.dart b/example/lib/example_box.dart
index 568b4c2..24cf880 100644
--- a/example/lib/example_box.dart
+++ b/example/lib/example_box.dart
@@ -25,6 +25,16 @@ class _ExampleBoxState extends State<ExampleBox> {
               });
             },
           ),
+          ListTile(
+            leading: ASCheckBox.checkStyle(value: _state),
+            title: Text('CheckBox'),
+            subtitle: Text('with styled'),
+            onTap: () {
+              setState(() {
+                _state = !_state;
+              });
+            },
+          ),
         ],
       ),
     );
diff --git a/lib/box/as_check_box.dart b/lib/box/as_check_box.dart
index 490876d..00e8f67 100644
--- a/lib/box/as_check_box.dart
+++ b/lib/box/as_check_box.dart
@@ -3,15 +3,21 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 class ASCheckBox extends StatefulWidget {
   final bool value;
-  ASCheckBox({Key key, this.value = false}) : super(key: key);
+  final bool checkStyle;
+  ASCheckBox({Key key, this.value = false})
+      : checkStyle = false,
+        super(key: key);
+
+  ASCheckBox.checkStyle({Key key, this.value = false})
+      : checkStyle = true,
+        super(key: key);
 
   @override
   _ASCheckBoxState createState() => _ASCheckBoxState();
 }
 
 class _ASCheckBoxState extends State<ASCheckBox> {
-  @override
-  Widget build(BuildContext context) {
+  _renderDefault() {
     return Container(
       height: 17.w,
       width: 17.w,
@@ -35,4 +41,36 @@ class _ASCheckBoxState extends State<ASCheckBox> {
       ),
     );
   }
+
+  _renderCheck() {
+    return AnimatedContainer(
+      duration: Duration(milliseconds: 300),
+      curve: Curves.fastOutSlowIn,
+      height: 27.w,
+      width: 27.w,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: Color(0xFFD5D5D5),
+          width: widget.value ? 0 : 1.w,
+        ),
+        borderRadius: BorderRadius.circular(27.w),
+        color: Color(0xFFFFBD32).withOpacity(widget.value ? 1 : 0),
+      ),
+      child: AnimatedOpacity(
+        duration: Duration(milliseconds: 300),
+        curve: Curves.fastOutSlowIn,
+        opacity: widget.value ? 1 : 0,
+        child: Icon(
+          Icons.check,
+          size: 18.w,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.checkStyle ? _renderCheck() : _renderDefault();
+  }
 }