Skip to content

Transforms transformHitTests description is not clear enough #78120

@ltOgt

Description

@ltOgt

Use case

As seen in e.g. issue #27587, many developers are confused about hit testing not working as expected when using Transform.

Take for example the following:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
            child: Transform.translate(
              offset: Offset(50, 50),
              transformHitTests: true,
              child: GestureDetector(
                onTap: () => print("hit"),
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.blue.withAlpha(125),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2021031319:10:21_screenshot_sel

Hitting the overlapping area will work as expected, but hitting the overhanging area of the blue square will not result in a hit.
This happens since the parent can not register a hit outside its bounds and therefore does not inform its children.

transformHitTests description reads a little confusing in that regard:

/// Whether to apply the transformation when performing hit tests.

Which seems to suggest that the hit area will be transformed along with the widget.

The actual role of transformHitTests is to transform the coordinates of hits that the parent does register to the coordinate system of the child.
(See #32192)

Proposal

Changing the description might clear up some confusion and hint to the reason why hits outside the parent can not be registered.
It might also be a good place to hint to the prefered usage of Overlay as mentioned here

Possible alternative description:

/// Whether to transform registered hits into the childs resulting coordinate system.
/// Hits can only be registered if they are within the bounds of the parent.
///
/// Consider increasing the bounds of the parent to fit the childs new position.
/// Alternatively consider placing the child using `Overlay` instead.

Or something along those lines.
Potentially reference RenderBox hitTestChildren as well?

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: proposalA detailed proposal for a change to Flutterd: api docsIssues with https://api.flutter.dev/f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.good first issueRelatively approachable for first-time contributorsteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions