flutter

Flutter Container Widget

In Flutter, the Container widget is a box that can contain other widgets. It allows you to apply visual styling to the contained widgets, such as padding, background color, and borders.

Here's an example of using a Container widget in Flutter:

Container(
  padding: EdgeInsets.all(10.0),
  margin: EdgeInsets.all(10.0),
  color: Colors.white,
  child: Text('Hello World'),
)

This example creates a Container widget with 10 pixels of padding and margin around all sides, a white background color, and a Text widget as its child.

You can customize the appearance of the Container widget by setting its various properties, such as padding, color, and decoration. You can also use the Container widget as a parent widget to layout and style other widgets.

To customize a Container in Flutter, you can read below articles:

Add box shadow to Container

Add padding to Container

Add border-radius to Container

Add a border to Container


Use Case of Flutter Container

The Flutter Container widget can be used in a variety of applications. It is often used to create custom layouts for mobile and web applications, as well as for complex UIs in games and other interactive experiences. It can also be used to create visually appealing and functional layouts for websites and other web-based applications.


Flutter Container Width

In Flutter, you can specify the width of a Container widget using the width property. The value of the width property can be a double, a double expression, or a BoxConstraints object.

Here's an example of setting the width of a Container widget in Flutter:

Container(
  width: 120.0,
  height: 80.0,
  color: Colors.white,
  child: Text('Hello World'),
)

This example creates a Container widget with a width of 120 pixels and a height of 80 pixels, with a white background color and a Text widget as its child.

You can also use a double expression to set the width of the Container widget. For example:

Container(
  width: MediaQuery.of(context).size.width * 0.5,
  height: 80.0,
  color: Colors.white,
  child: Text('Hello World'),
)

This example sets the width of the Container widget to 50% of the width of the screen.

Alternatively, you can use a BoxConstraints object to specify the constraints on the size of the Container widget. For example:

Container(
  constraints: BoxConstraints.expand(
    width: 150.0,
    height: 150.0,
  ),
  color: Colors.white,
  child: Text('Hello World'),
)

This example creates a Container widget that is constrained to have a width of 150 pixels and a height of 150 pixels, with a yellow background color and a Text widget as its child.


Was this helpful?