FX01: Horizontal Flex Overflow
Understand how unconstrained width and long text cause horizontal overflow in a Row
Observed Symptom & Flutter Error Assertion
A RenderFlex overflowed by 48 pixels on the right with yellow/black hazard caution stripes.
════╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 48.0 pixels on the right.
The relevant error-causing widget was:
Row
lib/main.dart:18:14
The leading edge of the overflowing RenderFlex was:
RenderFlex#a94bc relayoutBoundary=up1 OVERFLOWING
creator: Row ← SizedBox ← Center ← Scaffold
parentData: offset=Offset(0.0, 0.0); id=null (can use size)
constraints: BoxConstraints(w=320.0, h=56.0)
size: Size(368.0, 56.0)
direction: horizontal
mainAxisAlignment: start
crossAxisAlignment: center
════════════════════════════════════════════════════════════════════════════════════════════════════Declared Conditions
Row containing an unconstrained child (e.g. wide Text or Container) placed inside a bounded parent (e.g. 320px viewport or simulated 1.5x text scale).
A Row measures its children with unbounded horizontal constraints (maxWidth = double.infinity). An unconstrained Text widget measures its full intrinsic width without wrapping. When the sum of child widths exceeds the Row's incoming maxWidth, RenderFlex triggers an overflow assertion.
Wrap expanding children in Expanded or Flexible to pass bounded constraints along the flex main axis, or switch to Wrap for multi-line flow.
Corrected: Bounded via Expanded
Wrapping the Text widget in Expanded gives it tight constraints bounded by the remaining row width, enabling automatic text wrapping or ellipsis.
- ✓Wrap Text in Expanded to enforce remaining-width constraint
- ✓Add overflow: TextOverflow.ellipsis and maxLines: 1 (or allow multi-line wrapping)
- ✓Icon remains fixed-width at 28px without displacement
import 'package:flutter/material.dart';
void main() => runApp(const FixedRowDemo());
class FixedRowDemo extends StatelessWidget {
const FixedRowDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Fixed: Bounded Row (${width}px)'),
backgroundColor: const Color(0xFF0D9488),
),
body: Center(
child: Container(
width: 320,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: const Color(0xFF2DD4BF),
width: 2,
),
),
child: Row(
children: const [
Icon(
Icons.check_circle_rounded,
color: Color(0xFF0D9488),
size: 28,
),
SizedBox(width: 8),
// FIX: Expanded bounds child to remaining Row main-axis width!
Expanded(
child: Text(
'This is an exceptionally long title text that cannot fit within 320px',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
],
),
),
),
),
);
}
}