Bottom overflowed by x pixels

Question

I have one column widget in which basically I want to show 2 children widgets first is some dynamic text and another is some container whose height should clip automatically or should automatically takes the remaining height of ConstrainedBox.

I have tried below approach but bottom overflowed by x pixels error is coming.

Please suggest some approach.

ConstrainedBox(
        constraints: BoxConstraints(
            maxWidth: width, maxHeight:height),
        child: Column(
          children: [
            SizedBox(
              child: Text(
                name,
                maxLines: 2,
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: fontSize,
                    fontWeight: FontWeight.bold),
              ),
            ),
              Container(
                  width: Constants.lineThickness,
                  height: 20, // **should automatically takes the remaining height of ConstrainedBox**
                  color: color)
          ],
        )
       );

Answer 1

Use Expanded Widget.

Sample Code:

       Column(
          children: [
            SizedBox(
              child: Text(
                name,
                maxLines: 2,
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: fontSize,
                    fontWeight: FontWeight.bold),
              ),
            ),
              Expanded(
                child: Center(
                    child: Text(
                        'It will take the availabe space in column'
                    )
                )
              )
          ],
        )