If a RenderFlex object overflows, it means that its children are not able to fit within the constraints provided by its parent. This can happen if the parent widget has a small size, or if the children have a large size and are not able to shrink to fit within the available space.
How to fix Row RenderFlex overflowed by … pixels in Flutter
//Error code
Row(
children: const [
Text(
'flutterassets.com',
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
fontSize: 50,
color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
),
),
],
),The following assertion was thrown during layout:
A RenderFlex overflowed by 15 pixels on the right.You can read more about the Text widget in this post:
Flutter Basics – What is and how to use Text widget in Flutter
To fix this error simply wrap Text into Flexible or Expended. Both the Flexible and Expanded widgets allow the child widget to take up available space within its parent widget. Wrapping the Text widget in either of these widgets can help fix the error.
Row(
children: const [
Flexible(
child: Text(
'flutterassets.com',
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
fontSize: 50,
color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
),
),
),
],
), Expanded(
child: Text(
'flutterassets.com',
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
fontSize: 50,
color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
),
),
),
Another example with Row, Text, and Icons.
You can read more about Icons in this post:
Flutter Basics – How to use Icons in Flutter
Row(
children: [
Container(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.favorite, color: Colors.red, size: 40,)
),
const Expanded(
child: Text(
'flutterassets.com',
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(
fontSize: 40,
color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
),
),
),
Container(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.favorite, color: Colors.red, size: 40,)
),
],
),
