K-Learn

Flutter Container Widget

Posted on Friday, 24 February 2023 12:21 AM

The Container widget in Flutter is a versatile widget that can be used to create a rectangular visual element on the screen, with customizable properties for padding, margins, borders, background colors, and more.

Example of how to use the Container widget in Flutter:

Container(
  width: 300,
  height: 300,
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.green,
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
    borderRadius: BorderRadius.circular(16),
  ),
  child: Text('Flutter Container!'),
)

In this above example:

We are creating a Container widget that is 300 pixels wide and 300 pixels tall. We have set a margin of 16 pixels around the container, and a padding of 8 pixels within the container. We have also set a background color of green, a black border with a width of 2 pixels, and a border radius of 16 pixels.

The child property of the Container widget is used to specify the content that should be displayed inside the container. In this example, we are simply displaying a Text widget that says "Flutter Container!"

Some commonly used properties of the Container widget are:

width and height: The dimensions of the container in pixels.
margin and padding: The amount of space around and within the container, respectively.
decoration: A BoxDecoration object that can be used to customize the appearance of the container, including its background color, border, and border radius.
alignment: The alignment of the content within the container.

In addition to these properties, the Container widget also has many other properties that can be used to customize its appearance, such as color, foregroundDecoration, constraints, transform, and more.