Flutter Tip: “Easy Padding and Margin”

here’s a Flutter tip for adding padding and margin to columns

Most of developers do this:

• Padding: If you want to add padding inside a column, you can wrap its child with a Padding widget and specify the desired amount of padding using the padding property.

Column(
  children: [
    Padding(
      padding: EdgeInsets.all(16.0),
      child: Text('Hello'),
    ),
    Text('World'),
  ],
)

• Margin: If you want to add margin around a column, you can wrap it with a Container widget and specify the desired amount of margin using the margin property

Container(
  margin: EdgeInsets.all(16.0),
  child: Column(
    children: [
      Text('Hello'),
      Text('World'),
    ],
  ),
)

and like this below

body:Column(
         children:[
            Text('Hello'),
            Text('World'),
         ],

      ).wrap(padding:20.0, margin:8.0),

But Now you can do like this below, by making modifications to the code, you have the option to customize this extension even more and add extra features. For instance, you can reverse the sequence of elements in the Column or come up with other innovative ways to utilize it.

extention on Column {
  Widget wap({double padding=16.0, double  margin=8.0}) {
     final reversedChildren = children.map((e) => Container(
                         padding: EdgeInsets.all(padding),
                         margin: EdgeInsets.all(margin),
                         child: e)).toList();
                         return Column(
                         children: reversedChildren,);
}

Why don’t you give it a shot and share your feedback with me? If you require any help or have queries, don’t hesitate to ask me.

Support Me:

• Instagram
• Facebook
• GitHub
• Twitter
• Youtube