Flutter Errors Skill

This skill provides solutions for the most common Flutter runtime and layout errors.

---

RenderFlex Overflowed

Error: A RenderFlex overflowed by X pixels on the right/bottom.

Cause: A Row or Column contains children that are wider/taller than the available space.

Fix: Wrap the overflowing child in Flexible or Expanded, or constrain its size:

Row(
  children: [
    Expanded(child: Text('Long text that might overflow')),
    Icon(Icons.info),
  ],
)

---

Vertical Viewport Given Unbounded Height

Error: Vertical viewport was given unbounded height.

Cause: A ListView (or other scrollable) is placed inside a Column without a bounded height.

Fix: Wrap the ListView in Expanded or give it a fixed height with SizedBox:

Column(
  children: [
    Text('Header'),
    Expanded(
      child: ListView(children: [...]),
    ),
  ],
)

---

InputDecorator Cannot Have Unbounded Width

Error: An InputDecorator...cannot have an unbounded width.

Cause: A TextField or similar widget is placed in a context without width constraints.

Fix: Wrap it in Expanded, SizedBox, or any parent that provides width constraints:

Row(
  children: [
    Expanded(child: TextField()),
  ],
)

---

setState Called During Build

Error: setState() or markNeedsBuild() called during build.

Cause: setState or showDialog is called directly inside the build method.

Fix: Trigger state changes in response to user actions, or defer to after the frame using addPostFrameCallback:

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // Safe to call setState or showDialog here
  });
}

---

ScrollController Attached to Multiple Scroll Views

Error: The ScrollController is attached to multiple scroll views.