Flutter: GestureDetector behavior depends on internal Container property

Created on 23 Jan 2018  ·  3Comments  ·  Source: flutter/flutter

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

Most helpful comment

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

All 3 comments

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

Thanks!

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

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

peace2knowledge picture peace2knowledge  ·  286Comments

dedeswim picture dedeswim  ·  235Comments

sethladd picture sethladd  ·  133Comments

krisgiesing picture krisgiesing  ·  183Comments

FlutterIssues picture FlutterIssues  ·  170Comments