Flutter ListTile leading height - flutter

Question

I'd like to have a listtile where the leading widget is simply a half-transparent white container. Let me clarify it with an example
I managed to create the layout above (2 ListTile's). But as you can see, when the title property contains a large text as it is doing in the first (the green) tile, the height of the leading widget is not following as it should. The below code returns a ListTile given a Label which is a class of my own that simply contains text, textcolor and backgroundcolor.
ListTile(
contentPadding: EdgeInsets.zero,
dense: true,
minLeadingWidth: 15,
tileColor: label.bgColor,
textColor: label.textColor,
horizontalTitleGap: 0,
minVerticalPadding: 0,
trailing: getPopUpMenuButton(label),
leading: Container(
height: double.maxFinite,
width: 15,
color: Colors.white54,
),
title: Padding(
padding: EdgeInsets.all(4),
child: Text(
label.title,
),
),
)
So to summarize: how to make the leading height follow the height of the ListTile?

Answer 1

ListTile provide the UI with specific rules. As for leading this Size is defined within the source code as
final BoxConstraints maxIconHeightConstraint = BoxConstraints(
//...
maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,
);
final BoxConstraints looseConstraints = constraints.loosen();
final BoxConstraints iconConstraints = looseConstraints.enforce(maxIconHeightConstraint);
final double tileWidth = looseConstraints.maxWidth;
final Size leadingSize = _layoutBox(leading, iconConstraints);
final Size trailingSize = _layoutBox(trailing, iconConstraints);
The height is coming from
maxHeight: (isDense ? 48.0 : 56.0) + densityAdjustment.dy,
We can create the custom widget using rows and column,
body: Center(
child: ListView.builder(
itemCount: 33,
itemBuilder: (context, index) => Padding( //use separate builder to and remove the padding
padding: const EdgeInsets.all(8.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius.circular(defaultBorderRadiusCircular),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 20,
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.cyanAccent,
borderRadius: BorderRadius.only(
bottomRight:
Radius.circular(defaultBorderRadiusCircular),
topRight:
Radius.circular(defaultBorderRadiusCircular),
)),
child: Row(
children: [
Expanded(
child: Text(
"I managed to create the layout above (2 ListTile's). But as you can see, when the title property contains a large text as it is doing in the first (the green) tile, the height of the leading widget is not following as it should. The below code returns a ListTile given a Label which is a class of my own that simply contains text, textcolor and backgroundcolor.",
softWrap: true,
maxLines: 13,
style: TextStyle(),
),
),
Icon(Icons.menu),
],
),
),
),
],
),
),
),
),
),