I’m trying to create a card which can have 2 columns which are in a 3:1 width ratio. The catch is that this card has to have dynamic height according to its contents.
Something like this:
card that i’m trying to create
This what I have right now:
what I have right now
The white space on the top and bottom of the red column needs to also be red.
This is my code:
Card(
elevation: 2,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
margin: const EdgeInsets.only(top: 10, bottom: 0, left: 10, right: 10),
child: Row(
children: [
Flexible(
flex: 3,
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TimelineTile(
alignment: TimelineAlign.start,
isFirst: true,
afterLineStyle: const LineStyle(color: TruckerAppTheme.grey, thickness: 2),
indicatorStyle:
IndicatorStyle(color: Colors.white, padding: const EdgeInsets.all(0), iconStyle: IconStyle(fontSize: 28, iconData: Icons.location_on_rounded, color: TruckerAppTheme.grey)),
endChild: Container(
padding: const EdgeInsets.fromLTRB(8.0, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
// width: MediaQuery.of(context).size.width * 0.65,
child: Text(widget.load.pickupCity != null ? "${widget.load.pickupCity}, ${widget.load.pickupState}" : "${widget.load.pickupState}",
overflow: TextOverflow.visible, style: TruckerAppTheme.locationText)),
SizedBox(
// width: MediaQuery.of(context).size.width * 0.6,
child: Text(DateFormat('dd-MMM-yy').format(DateFormat('yyyy-MM-dd').parse(widget.load.pickupTimeStamp!)).toString(),
overflow: TextOverflow.ellipsis, style: TruckerAppTheme.bodyNormalSmall)),
],
),
),
),
TimelineTile(
alignment: TimelineAlign.start,
isLast: true,
beforeLineStyle: const LineStyle(color: TruckerAppTheme.grey, thickness: 2),
indicatorStyle:
IndicatorStyle(color: Colors.white, padding: const EdgeInsets.all(0), iconStyle: IconStyle(fontSize: 28, iconData: Icons.flag_rounded, color: TruckerAppTheme.grey)),
endChild: Container(
padding: EdgeInsets.fromLTRB(8.0, 8, 0, (widget.load.dropTimeStamp != null) ? 0 : 7),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
// width: MediaQuery.of(context).size.width * 0.6,
child: Text(widget.load.dropCity != null ? "${widget.load.dropCity}, ${widget.load.dropState}" : "${widget.load.dropState}",
overflow: TextOverflow.visible, style: TruckerAppTheme.locationText)),
(widget.load.dropTimeStamp != null)
? Text(DateFormat('dd-MMM-yy').format(DateFormat('yyyy-MM-dd').parse(widget.load.dropTimeStamp!)).toString(),
overflow: TextOverflow.ellipsis, style: TruckerAppTheme.bodyNormalSmall)
: Container(),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
widget.load.materialType == ""
? Flexible(
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"${widget.load.loadWeight} ${widget.load.loadUnits.toString()[0] + widget.load.loadUnits.toString().substring(1).toLowerCase()} • ${VehicleTypeMapping().vehicleTypeMapping[widget.load.vehicleType!]!.value}",
style: TruckerAppTheme.quantityText,
),
))
: Flexible(
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"${widget.load.loadWeight} ${widget.load.loadUnits.toString()[0] + widget.load.loadUnits.toString().substring(1).toLowerCase()} • ${widget.load.materialType} • ${VehicleTypeMapping().vehicleTypeMapping[widget.load.vehicleType!]!.value}",
style: TruckerAppTheme.quantityText,
),
)),
// const Icon(Icons.arrow_forward, color: Colors.grey)
],
)
],
),
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
padding: const EdgeInsets.only(bottom: 8, top: 8, right: 8, left: 8),
margin: EdgeInsets.only(right: 0, top: 0, bottom: 0, left: 1),
decoration: BoxDecoration(color: TruckerAppTheme.primaryColor.withOpacity(0.5), borderRadius: BorderRadius.circular(0)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Price",
style: TruckerAppTheme.quantityText,
),
widget.load.perTonneAmount == null
? Text(
"Pending",
style: TruckerAppTheme.pricePendingText,
)
: Text(
"₹ ${widget.load.perTonneAmount} Per Tonne",
style: TruckerAppTheme.pricePendingText,
),
const SizedBox(
height: 40,
),
Text(
"Bid Now",
style: TextStyle(fontSize: 14),
),
],
),
),
)
],
),
)
I have tried using Intrinsic Height, Expanded, etc. but to no avail.
3
Answers
way 1. try to sizedbox widget
I tried this and its working as expected. Make sure you have zero margin for the
Container.You can achieve this with a custom clipper as below code
}
// custom clipper class
}
@override
bool shouldReclip(covariant CustomClipper oldClipper) {
return false;
}
}