(Flutter) Is it possible to change the icon size in a checkbox?

Godwin IE 0
Viewed 26

Is it possible to change the tick size of checkbox ? i tried wrapping the CheckBox with Transform.scale with scale: 2.0 but it makes the whole CheckBox button bigger.

Transform.scale(
              scale: 2.0,
              child: Checkbox(
                splashRadius: 18,
                value: true,
                activeColor: primaryColor,
                //checkColor: Colors.white,

                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                onChanged: (bool? newValue) {},
              ),
            ),
icons checkbox size flutter-layout flutter
1 Answers

It's not possible to make the checkmark bigger. But you can write your own custom checkbox widget. Here's a short idea to how to make a custom widget. If you want to customize other fields just write them like below:

class CustomCheckbox extends StatefulWidget {
  const CustomCheckbox({
    Key? key,
    this.width = 24.0,
    this.height = 24.0,
    this.color,
    this.iconSize,
    this.onChanged,
    this.checkColor,
  }) : super(key: key);

  final double width;
  final double height;
  final Color? color;
  // Now you can set the checkmark size of your own
  final double? iconSize;
  final Color? checkColor;
  final Function(bool?)? onChanged;

  @override
  State<CustomCheckbox> createState() => _CustomCheckboxState();
}

class _CustomCheckboxState extends State<CustomCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() => isChecked = !isChecked);
        widget.onChanged?.call(isChecked);
      },
      child: Container(
        width: widget.width,
        height: widget.height,
        decoration: BoxDecoration(
          border: Border.all(
            color: widget.color ?? Colors.grey.shade500,
            width: 2.0,
          ),
          borderRadius: BorderRadius.circular(6.0),
        ),
        child: isChecked
            ? Icon(
                Icons.check,
                size: widget.iconSize,
                color: widget.checkColor,
              )
            : null,
      ),
    );
  }
}
Minjin Gelegdorj0
Related