Solved: how to set height and width of container in flutter
Setting the height and width of a container in Flutter is one of the most fundamental yet powerful layout techniques in mobile UI development. In Flutter, layout works differently compared to traditional HTML/CSS. Instead of directly controlling size in all cases, Flutter uses a constraint-based layout system. That means parent widgets provide constraints (minimum and maximum width and height), and child widgets decide their size within those constraints.
In this detailed guide, we will explore:
- Basic Container sizing
- Understanding Flutter’s constraint system
- Fixed width and height
- Using double.infinity
- Responsive sizing with MediaQuery
- Using Expanded and Flexible
- Using SizedBox
- Using FractionallySizedBox
- Using LayoutBuilder
- Setting constraints manually
- Common errors and how to fix them
- Complete working examples
1. Understanding Flutter’s Layout System
Before setting height and width, you must understand how Flutter layout works.
Flutter layout rule:
- Parent gives constraints to child
- Child chooses size within constraints
- Parent positions child
So you don’t always “force” a size — sometimes the parent decides.
For example:
- In a Column, height is flexible but width is full by default.
- In a Row, width is flexible but height is based on content.
Understanding this helps avoid layout overflow errors.
2. Basic Container with Fixed Width and Height
The simplest way to set height and width is using the width and height properties of Container.
Example:
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: Container(
width: 200,
height: 150,
color: Colors.blue,
child: Center(
child: Text(
"Fixed Size Container",
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
}
Explanation:
- width: 200 sets container width to 200 pixels
- height: 150 sets container height to 150 pixels
This is called fixed sizing.
3. Setting Only Width or Only Height
You can set only one dimension.
Example:
Container( width: 250, color: Colors.red, )
Height will be determined automatically by content.
Or:
Container( height: 100, color: Colors.green, )
Width will expand depending on parent constraints.
4. Using double.infinity
If you want a container to take full width or height of its parent, use double.infinity.
Example:
Container( width: double.infinity, height: 100, color: Colors.orange, )
This makes the container stretch fully horizontally.
Important:
double.infinity only works if the parent allows it.
For example:
- Inside Column → width can be infinity
- Inside Row → height can be infinity
- Inside unbounded scroll views → may cause error
5. Responsive Height and Width Using MediaQuery
To make layouts responsive (different screen sizes), use MediaQuery.
Example:
Container( width: MediaQuery.of(context).size.width * 0.8, height: MediaQuery.of(context).size.height * 0.3, color: Colors.purple, )
Explanation:
- size.width gives screen width
- size.height gives screen height
- 0.8 means 80% of screen width
- 0.3 means 30% of screen height
Complete Example:
class ResponsiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: Center(
child: Container(
width: screenWidth * 0.7,
height: screenHeight * 0.4,
color: Colors.teal,
child: Center(
child: Text(
"Responsive Container",
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
}
This is best for production apps.
6. Using SizedBox for Height and Width
SizedBox is a simpler alternative to Container when you only need size.
Example:
SizedBox( width: 200, height: 100, child: Container( color: Colors.yellow, ), )
SizedBox is lightweight and recommended if you only need size control.
7. Using Expanded in Row and Column
Expanded makes a child take available space.
Example:
Row( children: [ Expanded( flex: 1, child: Container( height: 100, color: Colors.red, ), ), Expanded( flex: 2, child: Container( height: 100, color: Colors.blue, ), ), ], )
Explanation:
- First container gets 1 part
- Second gets 2 parts
- Total space divided into 3 parts
This is dynamic width control.
8. Using Flexible
Flexible is similar to Expanded but allows child to size itself smaller if needed.
Example:
Flexible( child: Container( width: 150, height: 100, color: Colors.green, ), )
Use Flexible when you don’t want forced expansion.
9. Using FractionallySizedBox
This sizes a widget as a fraction of its parent.
Example:
FractionallySizedBox( widthFactor: 0.5, heightFactor: 0.3, child: Container( color: Colors.indigo, ), )
This means:
- 50% of parent width
- 30% of parent height
Very useful for responsive design.
10. Using Constraints
You can manually define constraints.
Example:
Container( constraints: BoxConstraints( minWidth: 100, maxWidth: 300, minHeight: 50, maxHeight: 200, ), color: Colors.cyan, )
This ensures container size stays within limits.
11. Using LayoutBuilder for Advanced Control
LayoutBuilder gives parent constraints.
Example:
LayoutBuilder(
builder: (context, constraints) {
return Container(
width: constraints.maxWidth * 0.5,
height: constraints.maxHeight * 0.3,
color: Colors.pink,
);
},
)
Use this for advanced responsive UI.
12. Common Errors
1. Overflow Error
Occurs when container exceeds parent size.
Solution:
- Use Expanded
- Use Flexible
- Wrap in SingleChildScrollView
2. Infinite Size Error
Occurs inside ListView or Column without bounded height.
Wrong:
Column( children: [ Container( height: double.infinity, ), ], )
Fix:
Wrap in Expanded.
13. Full Practical Example
Complete app demonstrating multiple sizing methods:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DemoScreen(),
);
}
}
class DemoScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(title: Text("Container Size Demo")),
body: Column(
children: [
Container(
width: 200,
height: 100,
color: Colors.blue,
),
SizedBox(height: 10),
Container(
width: double.infinity,
height: 80,
color: Colors.green,
),
SizedBox(height: 10),
Container(
width: width * 0.8,
height: 60,
color: Colors.orange,
),
SizedBox(height: 10),
Row(
children: [
Expanded(
child: Container(
height: 70,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 70,
color: Colors.purple,
),
),
],
),
],
),
);
}
}
