Fix Flutter 'A RenderFlex overflowed by N pixels' Error

Those yellow-and-black stripes mean a Row or Column tried to lay out children wider/taller than the space available. The fix depends on whether you want the content to wrap, shrink, or scroll.

Cause: Unbounded Children in a Flex

A Row gives children infinite width and a Column gives infinite height. A long Text or fixed-size widget then exceeds the screen. You have three good fixes.

Fix 1: Expanded / Flexible

Row(
  children: [
    const Icon(Icons.message),
    // Lets the text take remaining space and wrap/ellipsize
    Expanded(
      child: Text(longMessage, overflow: TextOverflow.ellipsis),
    ),
  ],
)

Fix 2: Wrap (Move to the Next Line)

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: chips, // flows onto new lines instead of overflowing
)

Fix 3: Make It Scrollable

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(children: items),
)