Understanding Boxes

ConstrainedBox

- It constraints size of it's child, as per the given values.

- The size of ConstrainedBox itself depends on it's parent.

// Restrict the width between 70 — 150
ConstrainedBox(
  constraints: Boxconstraints(
    minWidth: 70, maxWidth: 150,
  ),
  child: AnyWidget(),
)     

UnconstrainedBox

- UnconstrainedBox imposes no constraints on its child.

- It renders the child as if it were alone on an infinite canvas with no constraints.

// No restriction applied on the child
UnconstrainedBox(
  child: AnyWidget(),
)

OverflowBox

- OverflowBox is similar to UnconstrainedBox the difference is that it won't display any warnings if the child doesn't fit the space.

- That is, it allows overflow.

// Will overflow the width after 150 px
OverflowBox (
  minWidth: 70,
  maxWidth: 150,
  child: AnyWidget(),
)

LimitedBox

- As the name suggests, it limits the size of its child.

- Difference between ConstrainedBox and LimitedBox is that, the later limits only when it gets infinite constraints,

// limits the width to 100 px
UnconstrainedBox(
  child: LimitedBox(
    maxWidth: 100,
    child: AnyWidget(),
  )
)        

FittedBox

- FittedBox will increase or decrease the size of it's child, until it is completely filled.

- In the example, FittedBox scales the Text until it fills all of the available width.

// Text size will increase to occupy all 100 px
Container(
  width: 100.0,
  child: FittedBox(
    child: Text('l am fit. '),
  )
)