, ,

What is Container class in Flutter

Posted by

In Flutter, the Container class is a handy widget that integrates typical widget painting, positioning, and size. We can store one or more widgets in a container class and arrange them on the screen as we see fit. In essence, a container is just a box used to hold things. A margin delineates the current container element from its contents in a basic container element that holds a widget. A border of various shapes, such as rounded rectangles, can be applied to the entire container. Padding envelops its child inside a container, which imposes further limits on the padded portion (including width and height, if either is non-null).

Constructor of Container Class

Syntax: 

Properties of Container Class:

  • child:  Container widget has a property ‘child:’ which stores its children. The child class can be any widget. Let us take an example, taking a text widget as a child. 
  •  color:  The color property sets the background color of the entire container. Now we can visualize the position of the container using a background color. 

 Output:

  •  height and width: By default, a container class takes the space that is required by the child. We can also specify the height and width of the container based on our requirements.

Output: 

  • margin: The container’s perimeter is made empty by using the margin. Take note of the white area surrounding the container. EdgeInsets here.The margin is set using geometry.The all() function shows that the margin is equally present in each of the four directions.

Output:

  • Padding: Padding is utilised to separate the container’s border from its contents. Pay attention to the distance between the text and the border.

Output:

  • alignment: The kid is positioned inside the container using the alignment. We can align left, right, bottom, bottom centre, and so on. In this instance, the infant is positioned in the bottom centre.

Output:

  • decorating: The box can be decorated (e.g. given a border) using the decorating property. This covers the child’s back. Before a youngster, however, foreground decoration paints. Let’s give the container a boundary. However, colour and border colour cannot both be specified.

Output:

  • Transform: We can rotate the container with the aid of this property. The container can be rotated in any direction; in this case, the z-axis is being rotated.

Output:

  • Constraints: We can utilise this attribute to offer the child additional constraints.
  • ClipBehaviour: The object for this property is Clip Enum. This controls whether or not the content inside the container is clipped.
  • Foreground Decoration: The object in this parameter is the Decoration class. It regulates the styling of the Container widget’s front.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x