Illustrations
-------------

I have the following problem:

[![ListTile](https://i.stack.imgur.com/EtCr8.png)](https://i.stack.imgur.com/EtCr8.png)

The `title` and `subtitle` components of [`ListTile`](https://api.flutter.dev/flutter/material/ListTile-class.html) expand fully even when there only is text in some smaller area.  

Usually, this is not a problem as you could just color the background of the `title` the same as the `ListTie`.

However, I have a problem when trying to get an `onTap` event working on a **`Row`** in `title` or `subtitle`:

[![ListTile onTap](https://i.stack.imgur.com/vJQCF.gif)](https://i.stack.imgur.com/vJQCF.gif)

As you can see, I have a `Row` in the `title` component with an `Icon` and a `Text`. That works fine, however, trying to add an `onTap` to this `title` will produce unwanted behavior.  

I **only** want the `onTap` to trigger when I **actually tap the text or icon** and not when I tap *somewhere else to the right*. I am clueless how I would constrain the width of the `title` to the width of the text plus icon. It seems like nothing works. What is going on here?

Code
----

I [created a Gist](https://gist.github.com/creativecreatorormaybenot/cf45daddb43280cf4038f9a5774016b8) with the source code (minimal reproducible example) for *both illustrations*. This should help to give you an idea of the setup.

How do I only trigger `onTap` when the actual children of the `Row` are tapped and not the whole `title` area that apparently expands no matter what I do?

Notes
-----

I could probably just add an `InkWell` to both the `Text` and the `Icon` individually, however, that is not at all what I want because I want a splash (`InkWell`'s splash) to cover the title and icon together and they should not be visually seperated.