Flutter - how to change CheckboxListTile size?

Viewed 18413

How can I change only the checkbox icon size on a CheckboxListTile? For a Checkbox widget I was able to change its size using Transform.scale, but on the CheckboxListTile I couldn't manipulate the checkbox icon. On a tablet screen the size is too small as you can see in the image.

tablet and mobile

3 Answers

No worries !! Its better then use Transform.scale(), It would help you to manage the size with scaling functionality..

*** Code below ***

Row(
          children: [
            Transform.scale(
              scale: 1.3,
              child: Checkbox(value: mail, onChanged: (value) {}),
            ),
            Text(
              "Recieve Mail",
              style: TextStyle(fontSize: 18.0),
            )
          ],
        ),

Not sure if I'm going to help here, but as it looks like you are right on the fact that the CheckBox size cannot be changed when added through a CheckBoxListTile Widget.

Though, you could also create your own tile by inserting a Row for each tile you're using:

Row(
 children: [
  Icon(Icons.attach_money),
  Text("Sinal"),
  Transform(
   transform: myTransform, // I don't remember the correct syntax for this one
   child: Checkbox(
    value: true,
    onChanged: (_) {},
   ),
  ),
 ]
),

The only thing you'll have to add is to dynamically change the Icon, Text and Checkbox sizes based on the device. (you could use MediaQuery.of(context).size in order to achieve this)

     return Scaffold(
  body: Container(
    width: size.width,
    height: size.height,
    child: Center(
          child: new StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return new Transform.scale(
                scale: 1.2,
                child:  Checkbox(
                   value: isChecked,
                    onChanged: (bool? value) {
                      setState(() {
                        isChecked = value!;
                      });
                    },
                ),
              );
            },
          ),
        ),
      ),


  );
Related