[ FLUTTER ] 체크박스 커스텀 V2

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:iamhere/config/config.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CustomCheckbox extends StatefulWidget {
  const CustomCheckbox({
    Key? key,
    required this.value,
    this.tristate = false,
    required this.onChanged,
    this.mouseCursor,
    this.activeColor = const Color(0xFF292929),
    this.borderColor = const Color(0xFFB5B5B6),
    this.width = 17,
    this.height = 17,
    this.tapRange = 8,
  })  : assert(tristate != null),
        assert(tristate || value != null),
        super(key: key);

  final bool? value;
  final ValueChanged<bool?>? onChanged;
  final MouseCursor? mouseCursor;
  final Color borderColor;
  final Color activeColor;
  final bool tristate;
  // static const double width = 18.0;
  final double width;
  final double height;
  final double tapRange;

  @override
  _CheckboxState createState() => _CheckboxState();
}

class _CheckboxState extends State<CustomCheckbox> with TickerProviderStateMixin, ToggleableStateMixin {
  bool? _previousValue;

  @override
  void initState() {
    super.initState();
    _previousValue = widget.value;
  }

  @override
  void didUpdateWidget(CustomCheckbox oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.value != widget.value) {
      _previousValue = oldWidget.value;
      animateToValue();
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  ValueChanged<bool?>? get onChanged => widget.onChanged;

  @override
  bool get tristate => widget.tristate;

  @override
  bool? get value => widget.value;

  @override
  Widget build(BuildContext context) {
    void _handleValueChange(bool value) {
      assert(widget.onChanged != null);
      bool state = value;
      setState(() {
        widget.onChanged!(state);
      });
    }

    return InkWell(
      onTap: widget.onChanged != null
          ? () {
              _handleValueChange(widget.value!);
            }
          : null,
      borderRadius: BorderRadius.circular(4),
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      child: Padding(
        padding: EdgeInsets.all(widget.tapRange),
        child: AnimatedCrossFade(
          crossFadeState: widget.value! ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          duration: Duration(milliseconds: 100),
          sizeCurve: Curves.easeIn,

          // inactive
          firstChild: Container(
            decoration: BoxDecoration(
              border: Border.all(width: 1.5, color: widget.borderColor),
              borderRadius: BorderRadius.circular(4),
              color: ColorConfig.white,
            ),
            child: SizedBox(
              width: widget.width,
              height: widget.height,
              child: SvgPicture.asset('assets/icons/ic-checkbox.svg', color: Color(0xFFE6E7E7)),
            ),
          ),

          // active
          secondChild: Container(
            decoration: BoxDecoration(
              border: Border.all(width: 1.5, color: widget.activeColor),
              borderRadius: BorderRadius.circular(4),
              color: widget.activeColor,
            ),
            child: SizedBox(
              width: widget.width,
              height: widget.height,
              child: SvgPicture.asset('assets/icons/ic-checkbox.svg', color: Color(0xFFE6E7E7)),
            ),
          ),
        ),
      ),
    );
  }
}