overflowing RenderFlex flutter - button

Question

I am trying to make a seemingly easy page with flutter.
It contains of totally five rows where row 1 & 2, 3 & 4 belongs together, and the last row is its own.
Row 1: Centered text
Row 2: 8 icon buttons
Row 3: Centered text
Row 4: 5 checkboxes
Row 5: Text with a following icon button
The problem I get is the size:
I/flutter (22610):◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢
A RenderFlex overflowed by 248 pixels on the right.
I have tried to make the code in different classes, according to their belonging, but then I get this error.
When I tried to put the code in containers, the iconButtons and checkBoxes quit working. I have read a lot of questions about similar problems here on Stackoverflow and googled around about it, but I'm still stuck.
class MyIcon extends StatefulWidget {
#override
_MyIconState createState() => _MyIconState();
}
class _MyIconState extends State<MyIcon> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
// body: Container(
// height: 180.0,
// color: Colors.lightBlueAccent,
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50.0),
),
Text(
'FIRST TEXT',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// Padding(padding: EdgeInsets.only(left: 3.0, right: 10.0)),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
_IconButtons(
headImageAssetPath: 'assets/ico.png',
onPressed: () {},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"SECOND TEXT'",
style: TextStyle(fontSize: 25.0, color: Colors.white),
),
],
),
MyCheckBox(),
],
),
// ),
);
}
}
class _IconButtons extends StatelessWidget {
final iconSize = 60.0;
final String headImageAssetPath;
final onPressed;
_IconButtons({this.headImageAssetPath, this.onPressed});
#override
Widget build(BuildContext context) {
return IconButton(
iconSize: iconSize,
icon: Image.asset(headImageAssetPath),
onPressed: () {});
}
}
class MyCheckBox extends StatefulWidget {
#override
_MyCheckBoxState createState() => _MyCheckBoxState();
}
class _MyCheckBoxState extends State<MyCheckBox> {
#override
Widget build(BuildContext context) {
return Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Text(
"ANOTHER TEXT",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 25.0,
color: Colors.blueGrey,
),
),
],
),
),
],
),
);
}
}
This is one of many tries. If you want I can send the code for the checkboxes too. (I'm new to flutter so I'm sorry if my code is bad).
Any help is appreciated. Thank you.

Answer 1

In the row 2, every button icon width valued 60, then the Row container will width valued 60 * 8 = 480 at least, so the error occurs.
I have two solutions for you:
If you want to keep the button size width valued 60, you can replace Row with Wrap, the button will start a new row when it meet the edge of the screen.
If you want the 8 buttons placed in one single row, you can wrap the IconButton with Expanded
return Expanded(child:IconButton(
iconSize: iconSize,
icon: Image.asset(headImageAssetPath),
onPressed: () {}
));