How to remove/reduce space betwen text and checkbox of CheckboxListTile in Flutter?

Question

How can I reduce/remove the space between the CheckboxListTile and the Text in the following image?

It seems the following line removes the surrounding space only.

CheckboxListTile(
    title: Text('Account number not available'),
    contentPadding: EdgeInsets.all(0),
    controlAffinity: ListTileControlAffinity.leading,
)

Answer 1

CheckboxListTile is using ListTile which has the same padding as contentPadding so this is not a problem because you set it to 0.0, but it also has field called visualDensity which you cannot set from CheckboxListTile . This visualDensity is inherited from ThemeData . So either you will set VisualDensity.compact in your theme (you still won't be able to completely remove the space you have highlighted, but it will be smaller, it depends on your current ThemeData settings), or make a custom LabeledCheckbox widget for full flexibility as i did which is not really hard.

Edit:

I am using this custom LabeledCheckbox widget, you can control the gap between CheckBox and Text with field gap , also it is wrapped with GestureDetector so it register tap on the text too, not just the checkbox itself.

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    this.label,
    this.contentPadding,
    this.value,
    this.onTap,
    this.activeColor,
    this.fontSize,
    this.gap = 4.0,
    this.bold = false,
  });

  final String label;
  final EdgeInsets contentPadding;
  final bool value;
  final Function onTap;
  final Color activeColor;
  final double fontSize;
  final double gap;
  final bool bold;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(!value),
      child: Padding(
        padding: contentPadding ?? const EdgeInsets.all(0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Checkbox(
              value: value,
              activeColor: activeColor,
              visualDensity: VisualDensity.compact,
              onChanged: (val) => onTap(val),
            ),
            SizedBox(
              width: gap,
            ), // you can control gap between checkbox and label with this field
            Flexible(
              child: Text(
                label,
                style: TextStyle(
                  fontSize: fontSize,
                  fontWeight: bold ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

You can do something like this

ListTileTheme(
    horizontalTitleGap: 0,
    child: CheckboxListTile(
      controlAffinity: ListTileControlAffinity.leading,
      title: Text(
        title,
        style: kRegularFontStyle.copyWith(
          fontSize: 16.0.sp,
          color: Theme.of(context).textTheme.subtitle1!.color,
        ),
      ),
      value: isChecked,
      onChanged: onChanged,
      activeColor: kStructuralBlue500,
      checkColor: kWhiteColor,
      checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0.r)),
      contentPadding: EdgeInsets.zero,
    ),
  ),

Answer 3

I reworked a complete widget inspired by the accepted answer that actually does not work (no state management, null safety, and gesture detector issue).

class LabeledCheckbox extends StatefulWidget {

  final String label;
  final EdgeInsets? contentPadding;
  final bool value;
  final Function onTap;
  final Color activeColor;
  final double fontSize;
  final double gap;
  final bool bold;

  const LabeledCheckbox({
    required this.label,
    this.contentPadding,
    required this.value,
    required this.onTap,
    this.activeColor = Colors.blueAccent,
    this.fontSize = 16.0,
    this.gap = 4.0,
    this.bold = false,
  });

  @override
  State<LabeledCheckbox> createState() => _LabeledCheckboxState();
}

class _LabeledCheckboxState extends State<LabeledCheckbox> {

  late bool _checkboxValue;

  @override
  void initState() {
    _checkboxValue = widget.value;
    super.initState();
  }

  void _updateCheckBox(bool val){
    setState(() {
      _checkboxValue = val;
      // call ontap with new value
      widget.onTap(_checkboxValue);
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => _updateCheckBox(!_checkboxValue),
      child: Padding(
        padding: widget.contentPadding ?? const EdgeInsets.all(0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Checkbox(
                value: _checkboxValue,
                activeColor: widget.activeColor,
                visualDensity: VisualDensity.compact,
                onChanged: (val){
                  _updateCheckBox(val??false);
                }
            ),
            SizedBox(
              width: widget.gap,
            ), // you can control gap between checkbox and label with this field
            Flexible(
              child: Text(
                widget.label,
                style: TextStyle(
                  fontSize: widget.fontSize,
                  fontWeight: widget.bold ? FontWeight.bold : FontWeight.normal,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

You can find a full working exemple on dartpad

Answer 4

It's Simple. Don't use CheckboxListTile . instead use CheckBox with Text in Row with mainAxisSize: MainAxisSize.min like following and set these properties to CheckBox :

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
visualDensity: VisualDensity.compact,

Check This Example Code

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    
    Checkbox(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      visualDensity: VisualDensity.compact,
      value: true,
      onChanged: (newValue){
        //Do Something When Value Changes to True Or False
        
      },
    ),
    
    Text('Account number not available'),
    
  ]
)

Enjoy!!