Flutter ListTile leading height

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