Flutter - how to remove default padding (48 px as per doc) from widgets (IconButton, CheckBox, FlatButton) Flutter - how to remove default padding (48 px as per doc) from widgets (IconButton, CheckBox, FlatButton) flutter flutter

Flutter - how to remove default padding (48 px as per doc) from widgets (IconButton, CheckBox, FlatButton)


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

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


EDIT

Set the value of materialTapTargetSize to MaterialTapTargetSize.shrinkWrap

Checkbox(   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,    ... )

Alternatively, you can achieve this by customising the Checkbox widget.

  1. Create a CustomCheckbox using the exact code fromflutter/packages/flutter/lib/src/material/checkbox.dart.

  2. Add a new field to your CustomCheckbox widget

         final bool useTapTarget;
  3. Make sure to add the new field to your constructor with it defaultvalue set to true.

         this.useTapTarget = true
  4. Modify the build method in the _CheckboxState method. Add thisblock of code above the return call.

         Size noTapTargetSize = Size(CustomCheckbox.width,      CustomCheckbox.width);     final BoxConstraints additionalConstraints =      BoxConstraints.tight(widget        .useTapTarget? size : noTapTargetSize);
  5. Finally, use your CustomCheckbox widget in your code, and set yourcustom field to false to remove material padding. example

    Container(        margin: EdgeInsets.only(right: 15),        child:CustomCheckbox(            value: _checked,            onChanged: _onCheckBoxChange,            useTapTarget: false,            activeColor: Colors.teal),      )

Screenshot


For those looking for copy and paste ;), here is what I use

enter image description here

import 'package:flutter/material.dart';class NoPaddingCheckbox extends StatelessWidget {  final bool isMarked;  final Function(bool newValue) onChange;  final double size;  NoPaddingCheckbox({    @required this.isMarked,    @required this.onChange,    this.size = 24,  });  @override  Widget build(BuildContext context) {    return ConstrainedBox(      constraints: BoxConstraints(maxHeight: size, maxWidth: size),      child: RawMaterialButton(        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),        child: Icon(_getIconData(), size: size),        onPressed: () => onChange(!isMarked),      ),    );  }  IconData _getIconData() {    if (isMarked) {      return Icons.check_box;    }    return Icons.check_box_outline_blank;  }}