Top 5 Flutter Box Widgets You Should Know

Understand the difference and practical use of the top 5 Flutter Box layout widget.

Why this article

1. ConstrainedBox

When to use

problem

Container(
height: 50,
child: Icon(
Icons.add,
size: 80,
color: Colors.red,
),
)

The solution -

Container(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: 50),
child: Icon(
Icons.add,
size: 80,
color: Colors.red,
),
),
)

2. FittedBox

When to use

Row(children: [
Expanded(
child: Text(
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
maxLines: 1,
style: TextStyle(fontSize: 23),
),
),
])
Row(children: [
Expanded(
child: FittedBox(
child: Text(
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
maxLines: 1,
style: TextStyle(fontSize: 23),
),
),
),
])

3. FractionallySizedBox

When to use

FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.1,
child: Container(
decoration: BoxDecoration(color: Colors.greenAccent),
),
)

4. LimitedBox

When to use

ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.greenAccent,
);
})
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return LimitedBox(
maxHeight: 50,
child: Container(
color: Colors.greenAccent,
),
);
})

5. SizedBox

When to use

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 20,
color: Colors.greenAccent,
),
SizedBox(
height: 10,
),

Container(
height: 20,
color: Colors.greenAccent,
)
],
)

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://twitter.com/PinkeshDarji

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store