Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - how to change CheckboxListTile size?

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

like image 310
Rafael Honda Avatar asked Oct 15 '19 12:10

Rafael Honda


People also ask

What is checkboxlisttile in flutter?

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.

How to set the value of a checkbox in flutter?

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.

How can I resize the checkboxlistfile?

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.

How to disable checkboxlisttile when checkbox is checked?

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 .


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),
            )
          ],
        ),
like image 51
neon97 Avatar answered Oct 23 '22 21:10

neon97


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)

like image 29
Lama Avatar answered Oct 23 '22 21:10

Lama


change size of flutter checkbox and colors and round cornder somthing like this:

enter image description here

              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) {},
                ),
              ),
like image 1
AmirahmadAdibi Avatar answered Oct 23 '22 20:10

AmirahmadAdibi