Search code examples
fluttercheckboxflutter-layouticonssize

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


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) {},
              ),
            ),

Solution

  • 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,
          ),
        );
      }
    }