Child not receiving pointer event when wrapped in Align with width factor

[Nash0x7E2]

The Problem

Items wrapped with an Align using either a height or width factor sometimes do not receive pointer events.

For example, when used in a row with a width factor of 0.5, click the foreground widget on the side of an overlap causes the background widget to receive the pointer-events. The expected behavior would be for the foreground widget to receive and respond to pointer events since it was the widget tapped.

Example:

Gif shows a user interacting with widgets left to right, clicking the center-right of the widget where there is no overlap. On the move from right to left, the overlap area is clicked and the background widget receives the onTap event instead of the foreground widget.

Example Code

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: DemoBug(),
  ));
}

class DemoBug extends StatelessWidget {
  Widget item(Color color, final String name) {
    return Material(
      type: MaterialType.circle,
      clipBehavior: Clip.antiAlias,
      color: color,
      child: InkWell(
        onTap: () {
          print(name);
        },
        customBorder: CircleBorder(),
        child: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Align(
            widthFactor: 0.5,
            child: item(Colors.red, "Item One"),
          ),
          Align(
            widthFactor: 0.5,
            child: item(Colors.blue, "Item Two"),
          ),
          Align(
            widthFactor: 0.5,
            child: item(Colors.orange, "Item Three"),
          ),
        ],
      ),
    );
  }
}

Steps to reproduce

1. Create a list of items wrapped with an align containing a width factor of 0.5.
2. Add a gesture detector to the widget and configure the appropriate callback method.
3. Tap/interact with widget on the side where the widget overlaps with the previous.
4. Note the method and widget triggered.

Flutter Doctor

[✓] Flutter (Channel dev, 1.20.0-3.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-TT)
    • Flutter version 1.20.0-3.0.pre at
      /usr/local/Caskroom/flutter/latest/flutter
    • Framework revision 0af027f805 (7 hours ago), 2020-07-04 12:19:20 -0700
    • Engine revision a751393804
    • Dart version 2.9.0 (build 2.9.0-20.0.dev 22da8934ac)


[✓] Android toolchain - develop for Android devices (Android SDK version
    29.0.2)
    • Android SDK at /Users/$user/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /Users/$user/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.46.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.1

[✓] Connected device (3 available)
    • macOS (desktop)  • macos      • darwin-x64     • Mac OS X 10.15.5
      19F101
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

[Nash0x7E2]

Please see #60845

[VladyslavBondarenko]

I see the widget's parts out of new width set by widthFactor will not receive gesture events.
This way tap on the areas will not be recognised

Tried with current master 1.20.0-3.0.pre.130

[goderbauer]

This behavior is by design. For performance reasons, a render object does not receive hits outside of the bounds of the parent. To have overlapping elements that do receive hit tests, you can use a Stack.

[slightfoot]

@goderbauer I understand this is by design, but perhaps the design should change. I have experienced it in several places in the framework and it really hurts and over-complicates layouts to "workaround" the issue. When the Flutter team removed the default clipping then perhaps this should have been addressed then. But I feel it should definitely be addressed now.

No developer expects to see their widgets displayed yet parts of them not be "interactable". By its very meaning by seeing a button I expect it touchable. But by an undocumented "optimisation" it is not.

I wonder what impact changing the hit test bounds check has on performance. Perhaps this should be the canvas bounds and as such be the layer the widget is being painted to? This then obey's the basic principle of "if I can see it" it is "interactable".

I can tell you no developer expects to see their widget and yet only have parts of it allow taps. One of flutters major powers is to allow the widgets to paint outside their bounds. I feel this optimisation really hurts the framework.

I'd like to start a discussion around this issue. Perhaps this ticket is not the right place as it is a more generalised issue?

[goderbauer]

It may be worthwhile to discuss this on a separate issue. Performance is also very important for the framework and I am not aware of a performant way to do hit testing differently (we actually just switched mouse hit testing from the layer to the render tree because it turned out to improve hit testing performance for mice a lot). I am open to ideas, though.

Doing hit testing on the layer tree has the disadvantage that we'd need to introduce a lot more layers (one for each thing you want to hit), which hurts performance pretty badly on some platforms (e.g. the web).

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.