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) {},
),
),
CodePudding user response:
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,
),
);
}
}