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

Michael Cullen 0
Viewed 31

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;
      },
    );
  }
}
flutter-layout dart flutter
2 Answers

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
  ],
 ),
),
Thiago Fontes0

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.

TripleNine0
Related