user14260694
user14260694

Reputation: 5

Flutter: How to remove extra paddings of checkbox (multiple CheckboxListTile)?

I am trying to create a checkbox list like this: my plan

I used CheckBoxListTile with dense and contentPadding to remove all possible paddings, and this is what I have: my result

Is there any way to remove the extra "padding" between CheckBoxListTile?

Here is my code (a single checkbox):

class Checklist extends StatefulWidget {
  Checklist({@required this.content});
  final String content;

  @override
  _ChecklistState createState() => _ChecklistState();
}

class _ChecklistState extends State<Checklist> {
  bool _checked = false;
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      contentPadding: EdgeInsets.all(0),
      //dense: true,
      title: Text(widget.content, style: TextStyle(color: kBlackColor),),
      value: _checked,
      onChanged: (bool value) {
        setState(() {
          _checked = value;
        });
      },
      controlAffinity: ListTileControlAffinity.leading,
      activeColor: kBlackColor,
    );
  }
}

Multiple checkboxes:

Column(
   children: [
      Checklist(content: 'Develop an app'),
      Checklist(content: 'Develop a good app'),
      Checklist(content: 'Develop a really good app'),
   ],
),

Upvotes: 0

Views: 4764

Answers (1)

ElsayedDev
ElsayedDev

Reputation: 650

wrap your CheckBox inside SizedBox will resize the padding of the check box

SizedBox(
    height: whatYouWant,
    width: whatYouWant,
    child: Checkbox(...),
 )

please check this solution: https://stackoverflow.com/a/59420505/11989529

Upvotes: 3

Related Questions