Unbounded Width Constraints - Flutter

Issue

I am working on a Flutter app and am running into an Unbounded Width Constraints error. Here is the full Error message:

RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a
horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
children (using Flexible rather than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would otherwise be forced to take, and
then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.

  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(0.0<=w<=1298.0, 0.0<=h<=827.0)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down

This is the broken code:

Column(
  children: [
    Container(
      child: Row(
        children: [
          Column(children: formFieldGroupChildren),
        ],
      ),
    ),
  ],
);

And here is an example that does work:

Column(
  children: [
    Container(
      child: Column(children: formFieldGroupChildren),
    )
  ],
);

It looks like the Row widget is not constrained, though I'm not sure how to move past the error. Setting width and height constraints on the wrapping Container didn't seem to help either. I need to put another element to the right of Column(children: formFieldGroupChildren) which is why I need the Row element, but it seems like I'm missing something in my implementation. Any ideas as to what is causing this? Thanks in advacned!

Solution

Try to add IntrinsicHeight to fit the tallest in your formFieldGroupChildren.

Column(
      children: [
        Container(
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(child: Column(children: formFieldGroupChildren)),
              ],
            ),
          ),
        ),
      ],
    );

Answered By - mario francois