A RenderFlex overflowed 🐦 Flutter / Dart

Flutter: A RenderFlex overflowed by x pixels on the right/bottom

A Row or Column’s children need more space than available, so Flutter draws the yellow-black overflow stripes.

Seen on: Flutter

Meaning

Long text in a Row, fixed-size widgets on small screens, or a Column taller than the screen (e.g. when the keyboard opens) cause it. Make children flexible or scrollable.

Common causes

  • Long text/widgets in a Row without Expanded/Flexible
  • Column taller than the screen
  • Keyboard reducing available height
  • Fixed sizes not adapting to small devices

⚡ Quick fix

  1. Wrap the child in Expanded/Flexible (and set overflow on Text)
  2. Use SingleChildScrollView or ListView for tall content
  3. Use LayoutBuilder/MediaQuery for responsive sizes

Detailed fix by platform

Dart

  1. dart
    Row(children: [
  const Icon(Icons.info),
  Expanded(child: Text(longText, overflow: TextOverflow.ellipsis)),
])

How to diagnose

  1. Widget — Which Row/Column (inspector)?
  2. Direction — Right (Row) or bottom (Column)?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.