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.
Flutter – CheckboxListTile. CheckboxListTile is a built-in widget in flutter. We can say it a combination of CheckBox with a ListTile. Its properties such as value, activeColor, and checkColor are similar to the CheckBox widget, and title, subtitle, contentPadding, etc are similar to the ListTile widget.
If it is set to true the values in the checkbox can either true, false, or null. value: This property also takes in a boolean as the object to control whether the checkbox is selected or not. Explanation: In the body of this flutter app the hierarchy till the CheckBoxListTile is SizedBox > Center > Padding > Container > CheckBoxListTile.
When trying to resize the CheckboxListFile it seems that Google actually recommends creating a custom Tile widget and making use of the Checkbox widget. Look at the LabeledCheckbox widget that's been created. You can very easily modify all components to fit your needs.
To show the CheckboxListTile as disabled, pass null as the onChanged callback. This widget shows a checkbox that, when checked, slows down all animations (including the animation of the checkbox itself getting checked!). This sample requires that you also import 'package:flutter/scheduler.dart', so that you can reference timeDilation .
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)
change size of flutter checkbox and colors and round cornder somthing like this:
Transform.scale(
scale: 1.2,
child: Checkbox(
value: isBoxChecked,
checkColor: Colors.white,
activeColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
),
onChanged: (isChecked) {},
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With