Flutter widget Container Spacing (padding, margin) - Mobile app ui/ux

This simple and smart Flutter ui widget CONTAINER tutorial that explains you about padding dimensions and usage of flutter container widget .

Here you can see simple container which have a single child text,

Container(
    child: Text("Hello World"),
);

Now we make some padding around container widget by one by one individual sides,

Container(
    padding: EdgeInsets.only(
        left: 10.0,
        right: 10.0,
        top: 5.0,
        bottom: 5.0
    ),
    child: Text("individual spacing"),
);

Here you can see if we use EdgeInsets.only() property method, so we can set values of padding on individual side.

Now we go for axis based padding, so let get in,

Container(
    padding: EdgeInsets.symmetric(
        horizontal: 10.0,
        vertical: 5.0
    ),
    child: Text("Axis spacing),
);

Here, you can see, if we use EdgeInsets.symmetric()  can easily set top,bottom spacing by vertical axis selection and left,right axis spacing by horizontal axis.

Final Conclusion, That same as padding property, |You Have to try margin property as yourself if you find any difficulty Please comment down below or ping me over contact us form on bottom

You can also text me over facebook Page :)

Share on FacebookPlus on Google+

SUBSCRIBE TO OUR NEWSLETTER