How to fix "`RenderFlex children have non-zero flex but incoming height constraints are unbounded." in Flutter? - flutter

Question

I'm very new to Flutter and frontend design in general. I've tried looking for the answer online and have tried some of the suggestions on other posts, but they don't match my situation exactly and I keep getting confused. If anyone could offer some guidance I would really appreciate it!
I'm trying to make a custom table widget composed of a title, ListView, and a row of IconButtons. I'm having trouble wrapping my head around how to limit to and fit to containers. I keep getting a error stating RenderFlex children have non-zero flex but incoming height constraints are unbounded. I know it has something to do with the boundaries and I need to use either Flexible or Expanded to fix it, but I've been at it for a while and am not getting anywhere.
#override
Widget build(BuildContext context) {
return Focus(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).colorScheme.tertiary)),
padding: const EdgeInsets.fromLTRB(0, 0, 0, 2),
margin: const EdgeInsets.fromLTRB(13, 2, 13, 2),
clipBehavior: Clip.antiAlias,
child: Column(children: [
Text(
widget.title,
style: Theme.of(context).textTheme.bodyLarge,
),
ListView(
shrinkWrap: true,
children: widget.children,
),
Flexible(
child: Row(
children: [
//PLUS BUTTON
Expanded(
child: IconButton(
onPressed: () {
setState(() {
// updating the state
widget.children.add(ReportInputTableRow(
rowIndex: widget.children.isNotEmpty
? widget.children.length - 1
: 0,
onFocus: (row, column) {
updateCurrent(row, column);
},
));
});
},
icon: Icon(
Icons.plus_one_sharp,
color: Theme.of(context).colorScheme.secondary,
),
splashRadius: 15.0,
),
)
//PLUS BUTTON
],
))
]),
));
}
EDIT:
As requested, here is the code for ReportTableInputRow
class _ReportInputTableRowState extends State<ReportInputTableRow> {
#override
Widget build(BuildContext context) {
return Focus(
child: Row(
children: [
Focus(
child: const Expanded(
child: TextInputField(
text: "Original",
size: 13,
padded: false,
),
),
onFocusChange: (hasFocus) {
if (hasFocus) widget.columnIndex = 0;
}),
Focus(
child: const Expanded(
child: TextInputField(
text: "Note",
size: 13,
padded: false,
)),
onFocusChange: (hasFocus) {
if (hasFocus) widget.columnIndex = 1;
}),
],
),
onFocusChange: (hasFocus) {
widget.onFocus != null
? widget.onFocus!(widget.rowIndex, widget.columnIndex)
: null;
},
);
}
}

Answer 1

EDIT:
The solution was to swap Expanded with Focus in ReportInputTableRowState.
Maybe this one can help you:
Put the ListView inside Expanded and remove the Flexible which wraps the Row beneath the ListView.
child: Column(children: [
Text(
widget.title,
style: Theme.of(context).textTheme.bodyLarge,
),
ListView(
shrinkWrap: true,
children: children,
),
Flexible(
child: Row(
children: [
//PLUS BUTTON
Expanded(
child: IconButton(
onPressed: () {
...
You should also avoid changing widget variables, because they are considered to be immutable. If you want to mutate variables, put them inside the state.
Instead of widget.children.add(...) you should call children.add(...) with children being a state variable.

Answer 2

Actually you may not need Expanded or Flex, since you icons should have a defined size, you can wrap it using a SizedBox with defined height.
SizedBox(
height: 32, // It can be the height you desire, no need to define width
child: Row(
children: [
... // The icons that are children of the row go here
],
),
),