I have a ListView with Rows() as children.

Each Row() has two children:

• Row child 1: a horizontal fixed-width spacer ("blue boxes")
• Row child 2: the remaining row content

Problem: I want the child 1 fixed width spacer to grow vertically to fill the entire row (where row height will be determined by Child 2, minimum at least 40).

Here is the current Row declaration:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // The blue variable-width boxes
    Container(
      width: 50 * indent.toDouble(),
      height: 30,  // <-- the problem
      color: Colors.blue,
    ),
    widget.child,  // Everything next to blue boxes
  ],
);

This produces the result shown below where the first Row child, the blue boxes, are fixed-hight (30) and so do not grow to fill the Row vertically.

I so far cannot find any way to get the container to "grow vertically to the size of row-child-2".

Anyone have any suggestions?

Note: Rows are in a ListView, so doing things like height: double.infinity cause problems because ListView will let children grow. Only want the blue boxes to grow vertically to the Intrinsic Height of the second row child, then stop.

I have a ListView with Rows() as children.

Each Row() has two children:

• Row child 1: a horizontal fixed-width spacer ("blue boxes")
• Row child 2: the remaining row content

Problem: I want the child 1 fixed width spacer to grow vertically to fill the entire row (where row height will be determined by Child 2, minimum at least 40).

Here is the current Row declaration:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // The blue variable-width boxes
    Container(
      width: 50 * indent.toDouble(),
      height: 30,  // <-- the problem
      color: Colors.blue,
    ),
    widget.child,  // Everything next to blue boxes
  ],
);

This produces the result shown below where the first Row child, the blue boxes, are fixed-hight (30) and so do not grow to fill the Row vertically.

I so far cannot find any way to get the container to "grow vertically to the size of row-child-2".

Anyone have any suggestions?

Note: Rows are in a ListView, so doing things like height: double.infinity cause problems because ListView will let children grow. Only want the blue boxes to grow vertically to the Intrinsic Height of the second row child, then stop.

• flutter

• crossAxisAlignment: .stretch, which as we say nearly weekly on Humpday Q&A, should be the default. – Randal Schwartz Commented Jan 19 at 0:42
• @RandalSchwartz Nope, I've already tried that. As mentioned in the post, the context here is in a ListView that allows infinite vertical growth for list elements, so that kind of simple approach simply results in "FlutterError BoxConstraints forces an infinite height" type effects. – Bill Patterson Commented Jan 19 at 4:04
• The key here is that I want "grow to size of second Row child" not just simplistic "grow to take all available space" (which is effectively infinite given that row is not height-constrained by parent). – Bill Patterson Commented Jan 19 at 4:07
• Ahh, you probably want package:boxy then. Or a lot of handrolled code in a MultiChildLayoutWidget. – Randal Schwartz Commented Jan 19 at 4:10
• @RandalSchwartz Ok, don't know anything about Boxy, but I'll look into it. Thanks. Coming from other layout systems, I find Flutter infuriating that you can't just do things like "make content of two cells in a row the same height" as a simple layout constraint. – Bill Patterson Commented Jan 19 at 4:12

2 Answers 2

I know 2 solutions for this specific problem. Solution 1 ist simple and solution 2 is more efficient.

Solution 1: Use IntrinsicHeight for setting the height of all children to the height of the tallest child:

IntrinsicHeight(
   child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [...],
   ),
)

Solution 2: Use a Stack instead of a Row and use a Positioned(bottom: 0.0, top: 0.0) for filling the height.

Stack(
    children: [
      Padding(
        padding: EdgeInsetsDirectional.only(start: 50.0 * indent),
        child: SizedBox(width: double.infinity, child: child),
      ),
      PositionedDirectional(
        start: 0.0,
        top: 0.0,
        bottom: 0.0,
        width: 50.0 * indent,
        child: ColoredBox(color: Colors.blue),
      ),
    ],
)

try setting shrinkWrap : true in listView as below and delete the height of your container :

ListView.builder(
shrinkWrap : true
...
),