Building Layouts with Container Widgets
1. Using Container Widget
| Property | Values | Description |
|---|---|---|
| child | Widget? |
The widget to be displayed inside the container |
| width | double? |
The width of the container |
| height | double? |
The height of the container |
| padding | EdgeInsets? |
The padding inside the container |
| margin | EdgeInsets? |
The margin outside the container |
| decoration | Decoration? |
The decoration to apply to the container |
| alignment | AlignmentGeometry? |
The alignment of the child widget |
Example: Basic Container Usage
Container(
width: 200,
height: 100,
padding: EdgeInsets.all(16),
margin: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Hello, Flutter!',
style: TextStyle(color: Colors.white),
),
)2. Using SizedBox Widget
The SizedBox widget is a utility widget in Flutter that allows you to explicitly set the size of its child widget. It's particularly useful for adding spacing or enforcing specific dimensions.
| Property | Description | Values |
|---|---|---|
| width | Sets the width of the widget. | double? |
| height | Sets the height of the widget. | double? |
| child | The widget to be sized. | Widget? |
Example: Setting fixed size using SizedBox
SizedBox(
width: 200.0,
height: 100.0,
child: Container(
color: Colors.blue,
child: Center(
child: Text('Fixed Size'),
),
),
)Example: Adding vertical spacing with SizedBox
Column(
children: [
Text('First item'),
SizedBox(height: 20.0),
Text('Second item'),
],
)3. Using Center Widget
| Property | Values | Description |
|---|---|---|
| child | Widget? |
The widget to be centered within the parent. |
| widthFactor | double? |
Multiplies the width of the center widget by this factor. |
| heightFactor | double? |
Multiplies the height of the center widget by this factor. |
Example: Centering a Text Widget
Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24),
),
)Example: Centering with Width and Height Factors
Center(
widthFactor: 2.0,
heightFactor: 1.5,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)
Note: The Center widget aligns its child to the center of its parent's layout area. It is useful for simple centering of content in a layout.
4. Using Align Widget
| Property | Values | Description |
|---|---|---|
| child | Widget? |
The widget to align within the container. |
| alignment | AlignmentGeometry |
The alignment to use for positioning the child. Default is Alignment.center. |
| widthFactor | double? |
A factor to multiply the child's width by. Can be null. |
| heightFactor | double? |
A factor to multiply the child's height by. Can be null. |
Example: Aligning a Text Widget
Align(
alignment: Alignment.topLeft,
child: Text("Hello, Flutter!"),
)Example: Using Align with Width and Height Factors
Align(
alignment: Alignment.center,
widthFactor: 0.5,
heightFactor: 0.5,
child: Container(
color: Colors.blue,
width: 100,
height: 100,
),
)
Note: The
Align widget is useful for precise positioning of a child widget within its parent. It does not constrain the child's size, so it's often used in combination with other layout widgets like Container or SizedBox.
5. Using Padding Widget
| Property | Values | Description |
|---|---|---|
| child | Widget |
The widget to be padded. |
| padding | EdgeInsets |
The amount of padding to apply around the child. |
| color | Color |
The background color of the padded area. |
Example: Different Padding Values
<Padding
padding: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 30.0,
bottom: 40.0,
),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.blue,
),
/>
Note: Padding is applied in the direction specified by
EdgeInsets. It does not affect the layout of other widgets in the same parent.
6. Using AspectRatio Widget
The AspectRatio widget in Flutter ensures that its child maintains a specific aspect ratio. It's particularly useful for ensuring consistent sizing of images, videos, or other content that should preserve their proportions.
| Property | Description | Values |
|---|---|---|
| aspectRatio | Defines the ratio of width to height. | double |
| child | The widget to be laid out with the specified aspect ratio. | Widget |
Example: Using AspectRatio
AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.blue,
child: Center(
child: Text('16:9 Aspect Ratio'),
),
),
)
Note: The
AspectRatio widget is particularly useful in responsive layouts where maintaining the aspect ratio of media content is crucial.
7. Using FractionallySizedBox Widget
The FractionallySizedBox widget allows you to size its child relative to the parent's dimensions, using fractional values between 0.0 and 1.0.
| Property | Values | Description |
|---|---|---|
| child | Widget? |
The widget to be sized fractionally. |
| widthFactor | double? |
Horizontal scaling factor (0.0 to 1.0). Default is null. |
| heightFactor | double? |
Vertical scaling factor (0.0 to 1.0). Default is null. |
| alignment | AlignmentGeometry |
Position of the child within the box. Default is Alignment.center. |
Example: FractionallySizedBox with widthFactor
Container(
color: Colors.blue,
child: FractionallySizedBox(
widthFactor: 0.5,
child: Container(
color: Colors.red,
child: Text('Half width'),
),
),
)Example: FractionallySizedBox with alignment
Container(
color: Colors.grey,
child: FractionallySizedBox(
widthFactor: 0.8,
heightFactor: 0.6,
alignment: Alignment.topLeft,
child: Container(
color: Colors.green,
child: Text('Top Left aligned'),
),
),
)8. Using ConstrainedBox Widget
The ConstrainedBox widget in Flutter is used to impose size constraints on its child widget. It allows you to define minimum and maximum width and height values for the child, ensuring that the child is laid out within these bounds.
| Property | Description | Values |
|---|---|---|
| constraints | Sets the size constraints for the child widget. | BoxConstraints |
Example: Applying ConstrainedBox to a Container
<ConstrainedBox
constraints: const BoxConstraints(
minWidth: 100,
maxWidth: 200,
minHeight: 50,
maxHeight: 150,
),
child: Container(
color: Colors.blue,
child: Text('Constrained Content'),
),
)>
Note: The
ConstrainedBox widget does not change the size of its child; it only enforces constraints. If the child's natural size exceeds these constraints, Flutter will apply layout rules to fit it within the bounds.
9. Using LimitedBox Widget
The LimitedBox widget is used to constrain the maximum width or height of its child widget. It's particularly useful when you want to ensure that a widget doesn't exceed a certain size, regardless of its content or the available space.
| Property | Description | Values |
|---|---|---|
| maxWidth | Maximum width the child can take | double? |
| maxHeight | Maximum height the child can take | double? |
| child | The widget to be constrained | Widget? |
Example: Using LimitedBox to constrain width
<LimitedBox
maxWidth: 200,
child: Container(
width: 300,
height: 100,
color: Colors.blue,
child: Center(
child: Text("This is constrained to 200px width"),
),
),
)>
Note: If both
maxWidth and maxHeight are provided, the child will be constrained to both dimensions.
10. Using FittedBox Widget
| Property | Values | Description |
|---|---|---|
| child | Widget |
The widget to be fitted inside the FittedBox. |
| fit | BoxFit |
How to fit the child widget inside the parent. |
| alignment | AlignmentGeometry |
The alignment of the child widget within the parent. |
Example: Using FittedBox with BoxFit.cover
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: FittedBox(
fit: BoxFit.cover,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
),
),
);
}
}
Note: FittedBox is useful for scaling a widget to fit within its parent's constraints.