Demystifying Intrinsic Size in Flutter

Introduction

Constraints go down. Sizes go up. Parent sets position.

Widgets and their intrinsic sizes

Scaffold(
body: Text("Hello Word"),
);
constraints: BoxConstraints(0.0<=w<=202.0, 0.0<=h<=165.0)
size: Size(77.0, 16.0)

in·trin·sic (adjective): belonging naturally; essential.

What’s going on under the hood

When would a Widget use its intrinsic size?

Scaffold(
body: Container(
child: Text("Hello World"), // maxIntrinsicWidth = 77
width: 50.0,
),
);
// Text's RenderObject properties
constraints: BoxConstraints(w=50.0, 0.0<=h<=165.0)
size: Size(50.0, 32.0)
Scaffold(
body: Container(
height: 10,
child: Text("Hello World"),
),
);
// Text's RenderObject properties
constraints: BoxConstraints(0.0<=w<=284.0, h=10.0)
size: Size(77.0, 10.0)
Scaffold(
body: Container(
width: 14.0,
child: Text("Hello World"),
),
);
// Text's RenderObject properties
constraints: BoxConstraints(w=14.0, 0.0<=h<=797.0)
size: Size(14.0, 96.0)

Not all Widget will have an intrinsic size

Row(
children: [
Container(height: 100, width: 100, color: Colors.green,),
Text("Hello World"),
Container(height: 50, width: 50, color: Colors.yellow,),
],
)

Some Widgets will have their own intrinsic sizes, others will borrow from their children.

IntrinsicHeight and IntrinsicWidth widgets

Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Text("Hello World"),
Container(
height: 50,
width: 50,
color: Colors.yellow,
),
],
)
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Text("Hello World"),
Container(
height: 50,
width: 50,
color: Colors.yellow,
),
],
),
)

IntrinsicHeight / IntrinsicWidth are useful when unlimited height/width is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height/width

Conclusion

Flutter Enthusiast, Mobile developer @Be