The Container
widget in Flutter is used to create a box with a specified size, background color, and other visual properties. Some of the common properties of the Container
widget are:
color
: This property sets the background color of the container.width
andheight
: These properties set the width and height of the container, respectively.padding
: This property adds padding to the inside of the container. The padding can be specified as aEdgeInsets
object, which allows you to set different padding values for each edge of the container.margin
: This property adds a margin around the outside of the container. Likepadding
, themargin
can also be specified as anEdgeInsets
object.decoration
: This property allows you to specify a border, a background image, or other visual elements to be applied to the container. Thedecoration
property takes aBoxDecoration
object.child
: This property takes a single widget that will be displayed inside the container.
Here’s an example of how to use the Container
widget with some of its properties:
Container(
color: Colors.yellow,
width: 200,
height: 200,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2,
),
),
child: Text('Hello World'),
)
In this example, the container has a yellow background color and is 200×200 pixels in size. The padding
is set to 20 pixels on all sides, and the margin
is set to 10 pixels on all sides. The decoration
property creates a black border with a width of 2 pixels around the container. The text “Hello World” is displayed inside the container.