Flutter: GestureDetector behavior depends on internal Container property

[najeira]

Steps to Reproduce

There are two GestureDetectors include a Container with padding,
the only difference is whether the internal Container has color property or not.

Tap space around icons, that is, tap the area of padding:

• Container has color: onTap is called
• Container has not color : onTap is not called

import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';

void main() {
  final GlobalKey<ScaffoldState> _key = new GlobalKey<ScaffoldState>();
  runApp(new MaterialApp(
    title: 'GestureDetector Test',
    home: new Builder(builder: (BuildContext context) {
      return new Scaffold(
        key: _key,
        appBar: new AppBar(title: new Text("GestureDetector Test")),
        body: new Column(
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  _key.currentState.showSnackBar(new SnackBar(content: new Text("Foo!")));
                },
                child: new Container(
                  color: Colors.blue,
                  padding: const EdgeInsets.all(16.0),
                  child: const Icon(Icons.star, size: 32.0),
                ),
              )
            ),
            new Container(
              child: new GestureDetector(
                onTap: () {
                  _key.currentState.showSnackBar(new SnackBar(content: new Text("Bar!")));
                },
                child: new Container(
                  //color: Colors.blue, // no color
                  padding: const EdgeInsets.all(16.0),
                  child: const Icon(Icons.star, size: 32.0),
                ),
              )
            ),
          ],
        ),
      );
    }),
  ));
}

Tap the icon itself, both onTap will be call.

Flutter Doctor

alpha 0.0.20

[✓] Flutter (on Mac OS X 10.12.6 16G1114, locale ja-JP, channel alpha)
    • Flutter at /Applications/flutter
    • Framework revision 8f65fec5f5 (6 weeks ago), 2017-12-12 09:50:14 -0800
    • Engine revision edaecdc8b8
    • Tools Dart version 1.25.0-dev.11.0
    • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at /Users/najeira/Library/Android/sdk
    • Android NDK at /Users/najeira/Library/Android/sdk/ndk-bundle
    • Platform android-27, build-tools 27.0.3
    • ANDROID_HOME = /Users/najeira/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_152-release-915-b08)

[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    • ios-deploy 1.9.2
    • CocoaPods version 1.2.1

[✓] Android Studio (version 3.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b08)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.3.1)
    • Flutter plugin version 20.0.3
    • Dart plugin version 173.3942.31

[Hixie]

This is intentional. You can toggle the behaviour using the behavior argument to GestureDetector.
See https://docs.flutter.io/flutter/rendering/HitTestBehavior-class.html

[najeira]

Thanks!

I understand that this is an intended behavior, so I close this.

[lennartschoch]

Hi again,
just wondering: is there any specific reason why gestures on padding don't trigger GestureDetector methods when behaviour is "deferToChild"? While it totally makes sense to have different behaviors, "deferToChild" should definitely include definitely also include the padding of the GestureDetectors child, from my point of view.