How to make a custom FlutterFlow checkBox

i am trying to build a custom check box like this:

which is simply a round container containing an icon inside, clicking on it will change the container background color and the icon color,

i tried to build a custom widget in flutter flow using custom checkbox flutter packages but they all need me to pass a function to the custom but i have the following error:

Unknown error compiling custom code. A common cause is a custom widget or action whose name in the code does not match the name provided in the editor.

that happened again when i tried to build it myself without using packages here is the code i searched and found:

    // Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

class IngridentsCheckBox extends StatefulWidget {
  const IngridentsCheckBox({
    Key? key,
    this.width,
    this.height,
    required this.onChange,
    required this.isChecked,
    required this.size,
    required this.iconSize,
    required this.selectedColor,
    required this.selectedIconColor,
    required this.borderColor,
    required this.checkIcon,
  }) : super(key: key);

  final double? width;
  final double? height;
  final Function onChange;
  final bool isChecked;
  final double size;
  final double iconSize;
  final Color selectedColor;
  final Color selectedIconColor;
  final Color borderColor;
  final Icon checkIcon;

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

class _IngridentsCheckBoxState extends State<IngridentsCheckBox> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
          widget.onChange(_isSelected);
        });
      },
      child: AnimatedContainer(
        margin: EdgeInsets.all(4),
        duration: Duration(milliseconds: 500),
        curve: Curves.fastLinearToSlowEaseIn,
        decoration: BoxDecoration(
            color: _isSelected
                ? widget.selectedColor ?? Colors.blue
                : Colors.transparent,
            borderRadius: BorderRadius.circular(3.0),
            border: Border.all(
              color: widget.borderColor ?? Colors.black,
              width: 1.5,
            )),
        width: widget.size ?? 18,
        height: widget.size ?? 18,
        child: _isSelected
            ? Icon(
                Icons.check,
                color: widget.selectedIconColor ?? Colors.white,
                size: widget.iconSize ?? 14,
              )
            : null,
      ),
    );
  }
}

and those are the parameters i am sending to the custom widget:

i am getting the same error which is not clear enough to know exactly what is the issue, in previous versions of the code the error disappeared when i removed "onChange" function, so i do not know if it was the reason,

i also tried to do it using flutter state but couldn't make it, so i will be thankful if someone helps,

PLEASE NOTE: the code quoted is for a custom checkbox i found on stackoverflow, i used to customize it later if worked on flutterflow but i couldn't make it work