底部溢出 x 个像素

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'
                    )
                )
              )
          ],
        )

Answer 2

You can either increase the height in the BoxConstraints or use a SingleChildScrollView to enable scroll:

        constraints: BoxConstraints(
          maxWidth: width, 
          maxHeight:height,
        ),
        child: SingleChildScrollView(
          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)
            ],
          ),
        ),
       );