Repository: flutter
Issue: Can't apply TapRegion to a dropdown
Labels: c: new feature,framework,f: material design,f: gestures,c: proposal,P2,team-design,triaged-design

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Use case

The [`TapRegion` widget](https://api.flutter.dev/flutter/widgets/TapRegion-class.html) is great for detecting taps that occur either inside or outside a region. These regions are defined such that tapping on child widgets is considered to be inside the region of interest.

A child widget such as `DropDownButton` is only inside the region when tapped to activate. Once the dropdown is displayed any tap to either select or dismiss is considered as outside the region. Yes, the implementation of the dropdown is a popup with a barrier that are not rendered as children. Conceptually though, the dropdown is contained within the region and the entire behavior should be treated as inside.

Here is the DartPad "Counter Example" build method extended with a `TapRegion` and `DropDownButton`. Activating the dropdown is considered inside the region as can be seen in the console log. Tapping on the activated dropdown to select or dismiss is outside.
<details><summary>Code sample</summary>

```dart
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      // Any "taps" in any widget in the column is considered "inside" the region
      child: TapRegion(
        onTapInside: (_) => print("Tapped inside"),
        onTapOutside: (_) => print("Tapped OUTSIDE"),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            // This button is "inside"
            IconButton(icon: const Icon(Icons.add), onPressed: _incrementCounter),
            // Activating the dropdown is "inside"
            // However all taps on the dropdown menu/barrier are "outside"
            DropdownButton(
                items: [1,2,3].map((n) => DropdownMenuItem(
                    value: n, child: Text("Item $n"))).toList(),
                onChanged: (c) => print("Dropdown pick $c")
            ),
          ],
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}
```

</details>

`TapRegion` has a `groupId` parameter that allows various regions to be conceptually combined. However, `DropDownButton` provides no ability to access or augment the popup and barrier.



### Proposal

Ideally, Flutter would recognize when widgets such as dropdowns and popups are contained in a `TapRegion` and extend that region to the resulting implementation that is not rendered as a child.

Alternatively, these widgets could expose some mechanism to allow the developer to augment the popup and barrier with a region `groupId`.

This request doesn't appear unprecedented. Flutter already includes a `TextFieldTapRegion` widget that extends the tap region for text editing.