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.
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)
],
)
);```
CodePudding user response:
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'
)
)
)
],
)
CodePudding user response:
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)
],
),
),
);