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

Question

I am facing a problem with the default padding of the widgets (IconButton, CheckBox, FlatButton). I have searched a lot for this concern but with no success.

In the above image, the outer blue rect is the actual size of these widgets and I have to remove that space.

Checkbox(           onChanged: (value) {             setState(() {               _rememberMeFlag = !_rememberMeFlag;             });           },           value: _rememberMeFlag,           activeColor: const Color(0xff00bbff),           materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,         ) 

and below is the widget code for hide/show widget icon:

new Container(           child: TextFormField(             decoration: InputDecoration(               labelText: "Password",               suffixIcon: Padding(                 padding: EdgeInsetsDirectional.zero,                 child: GestureDetector(                   child: Icon(                     hidePassword ? Icons.visibility : Icons.visibility_off,                     size: 20.0,                     color: Colors.black,                   ),                 ),               ),               contentPadding: const EdgeInsets.only(                   left: 0.0, top: 6.0, bottom: 6.0, right: 0.0),             ),             obscureText: !hidePassword,             maxLength: 20,           ),         ) 

I have tried to set the container size too but no luck. Also tried the padding properties of the widgets but with no success.

Is there any way to remove this extra spacing from these widgets?

Answer 1

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

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

Answer 2

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 from flutter/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 default value set to true.

        this.useTapTarget = true 

4. Modify the build method in the _CheckboxState method. Add this block 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 your custom 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),       )