Flutter & Dart | 8 - Margin, Padding & Box constrains | Googles Framework

In this video, we’ll learn about box constraints in Flutter using the Container widget.
The Container widget is used to contain child widgets and apply some basic styling properties such as Height, Width, Padding, Margin, Color etc… to be applied when the widgets laid out on screen.
If the container has no children then it will automatically fill the given area on the screen (dependant on constraints), otherwise it will wrap the height & width of the given child elements.

Height and Width
In Flutter, you can set the height and width of any widgets that appears on the screen. For that you can use the height and width properties of the Container widget.
If you run the application, you will see that the Container widget spans the entire screen ignoring the height and width which we have provided.

Why did this happen? In the previous post, we’ve seen that before displaying the layout on the screen, Flutter creates a layout tree and assigns some of the properties of the parent widget to it’s child widgets.

Here, the MaterialApp widget covers the entire screen. That is, height and width of the MaterialApp widget will be equal to the height and width of your screen. These properties are passed to the child elements of the MaterialApp widget which includes the Container widget. So the custom height and width property specified is ignored.

To apply the height and width properties to the Container widget, we should use a widget that gives priority to the properties of the child widget as the parent widget. One such widget is the Center widget.

Now, I’m placing the Container widget as the child widget of a Center widget.

To apply margin to all the sides of a widget, we’re using EdgeInsets.all() method.

margin: EdgeInsets.all(30.0)

To apply a different margin to the sides of a widget, you can use the following properties.

margin: EdgeInsets.only( left: value )
margin: EdgeInsets.only( top: value )
margin: EdgeInsets.only( right: value )
margin: EdgeInsets.only( bottom: value )

Now try the same with padding and see what happens. Happy coding

#softwareengineer #development #engineering #hacker #cybersecurity #programmerlife #android #datascience #developers #web #coders #ai #developerlife #robotics #daysofcode #raspberrypi #codingisfun #programmerslife #programmingisfun #iot #coderlife #ethicalhacking #webdev #design #dev #arduino #programmerhumor #kalilinux #js #electronics