Flutter Container Widget

CodeWithFlutter
2 Min Read

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:

  1. color: This property sets the background color of the container.
  2. width and height: These properties set the width and height of the container, respectively.
  3. padding: This property adds padding to the inside of the container. The padding can be specified as a EdgeInsets object, which allows you to set different padding values for each edge of the container.
  4. margin: This property adds a margin around the outside of the container. Like padding, the margin can also be specified as an EdgeInsets object.
  5. decoration: This property allows you to specify a border, a background image, or other visual elements to be applied to the container. The decoration property takes a BoxDecoration object.
  6. 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.

Share this Article
Leave a comment