Question 422152 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Row( <child>, <child>), fill vertically

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.

enter image description here

Tags:

2

Answers


  1. 0

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

    ListView.builder(
shrinkWrap : true
...
),
    Login or Signup to reply.
  2. 0

    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(...),
)

    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),
      ),
    ],
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search