Flutter - how to change CheckboxListTile size?

Question

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.

Answer 1

You can use Transform.scale()!

It will help you manage the scale of the checkbox.

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

Answer 2

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)

Answer 3

Could be used the parameter "visualDensity" to change the height and width.

1-Example with default Enums:

  CheckboxListTile(
      value: _isChecked,
      title: Text('Example item 1'),
      visualDensity: VisualDensity.compact,
    ),

2-Example with custom values:

CheckboxListTile(
    value: _isChecked,
    title: Text('Example item 2'),
    visualDensity: const VisualDensity(horizontal: -4.0, vertical:-4.0),
    ),

Answer 4

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

Answer 5

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


  );

Answer 6

I had to make some modifications to make some behaviours and constraints better

1. When using Transform.scale(), the text is now slightly shifted. Hence the addition of a padding depending on the position of the checkbox.
2. GestureDetector allows a wide range of check behaviour
3. Expanded allows to separate the checkbox from the text

    
import 'package:flutter/material.dart';
import 'package:webshop/theme/data/sd_constants.dart';

class MyCheckboxListTile extends StatelessWidget {
  /// Whether this checkbox is checked.
  final bool? value;

  /// Called when the value of the checkbox should change.
  final ValueChanged<bool?>? onChanged;

  /// The primary content of the list tile.
  final Widget? title;

  const MyCheckboxListTile({
    Key? key,
    required this.value,
    required this.onChanged,
    this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onChanged?.call(value),
      child: Row(
        children: [
          Expanded(
              child: Container(
            padding: const EdgeInsets.only(left: 8.0),
            child: title,
          )),
          Transform.scale(
            scale: 1.5,
            child: Checkbox(
              value: value,
              onChanged: onChanged,
            ),
          ),
        ],
      ),
    );
  }
}