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 border-radius 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.
- Add border to widget in Flutter
- Simple stateless widget in Flutter
- Create stateful widget in Flutter
- Add a single widget as a sliver in Flutter
- Center Row widget children vertically and horizontally Flutter
- Add spacing between characters of Text widget Flutter
- Convert text of Text widget to uppercase or lowercase in Flutter