How to Remove Default Padding From Widgets In Flutter ?

3 min read
How to Remove Default Padding From Widgets In Flutter
How to Remove Default Padding From Widgets In Flutter

In a flutter mobile application, everything we see on a screen is a widget. So earlier we have been through widgets like CheckBox Widget, RadioButton Widget, IconButton Widget, Generally, this widget comes with default padding around 48 px as per the official document. So today we will learn how to Remove Default Padding From Widgets In Flutter.

How to Remove Default Padding From Widgets In Flutter?

Users can wrap CheckBox inside SizedBox will resize the padding of the CheckBox

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

You can achieve this by customizing the Checkbox widget.

  • Create a CustomCheckbox using the exact code from flutter/packages/flutter/lib/src/material/checkbox.dart.
  • Add a new field to your CustomCheckbox widget
    final bool useTapTarget;
  • Make sure to add the new field to your constructor with its default value set to true.
this.useTapTarget = true
  • So now, you can 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);
  • Finally, use your CustomCheckbox Widget in your code, and set your custom field to false to remove material padding.

So the Code Snippet will look like the below:

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

So we will get output like a below:

Remove Default Padding Widget
Remove Default Padding Widget
Wrap(
    children: <Widget>[
        Text('radio'),
        Radio(
            groupValue: _character,
            onChanged: (value){},
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        )
    ],
    crossAxisAlignment: WrapCrossAlignment.center,
),

Wrap your CheckBox inside SizedBox Widget and give them height or width as per your need.

SizedBox(
         height: 20.0,
          width: 20.0,
          child: Checkbox(
              value: _checkBoxValue, onChanged: (value){
            setState(() {
              _checkBoxValue = value;
            });
          }),
        ),

Conclusion:

Thanks for Reading !!! Hope you enjoyed 馃檪

So in this article, we learned how to Remove Default Padding From Widgets In Flutter.

Kindly drop us your feedback to serve you better. Stay connected!!

Do let us know if you need any assistance with聽Flutter Development? we would love to assist you.

Flutter Agency聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

Flutter Agency聽is one of the most popular online portals dedicated to聽Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply