title: Using GestureDetector to catch gestures of MaterialButton child
body: <p>I want to have a <code>MaterialButton</code> to detect <code>onTapDown</code>, <code>onTapUp</code> and <code>onTapCancel</code>.</p>
  <p>Unfortunately <code>MaterialButtons</code> only detect <code>onPressed</code>. So I wrapped it with a <code>GestureDetector</code> but for <code>MaterialButtons</code>, <code>onPressed</code> is <code>@required</code> so I set it to <code>() {}</code>.
  The problem is that, even if I set the <code>GestureDetector</code> behavior to be translucent, if I tap on the button, only the <code>onPressed</code> callback of the <code>Button</code> will be triggered and I lose the <code>onTapDown</code> and <code>onTapUp</code> callbacks of <code>GestureDetector</code>. I only get the <code>onTapDown</code> to trigger if I long press the button, and when I release it, <code>onTapCancel</code> is triggered. I can never get the <code>onTapUp</code> to be triggered this way.</p>
  <p>I still want the <code>MaterialButton</code> for its haptic/sound/visual feedback capabilities.</p>
  <p>I tried not to set the <code>onPressed</code> on the <code>MaterialButton</code> at all, and (oddly) it still worked but the button was disabled and didn't give any feedback at all.</p>
  <pre class="lang-dart prettyprint-override"><code>GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTapDown: (_) {
              th.handleTap(i, 0);
            },
            onTapUp: (_) {
              th.handleTap(i, 1);
            },
            onTapCancel: () {
              th.handleTap(i, 2);
            },
            child: MaterialButton(
              onPressed: () {},
              child: Container(
                margin: EdgeInsets.all(5),
                child: Icon(icon),
              ),
            )
          )
  </code></pre>
  <p>Edit:
  Thank you, Hugo Passos, for some reason I assumed <code>MaterialButtons</code> would never pass gestures to their children. I'm getting near but I'm still not there:
  the only way I found to match the size of the Gesture is to &quot;sandwich&quot; it between two <code>Containers</code>, which doesn't look like a very elegant solution to me. By the way, even in this case, I run into two problems:</p>
  <p>1: If I (quite easily) tap on the border of the button I still have the <code>onPressed</code> of the <code>MaterialButton</code> triggered instead of the <code>GestureDetector</code>'s callbacks. I thought it had zero size and so it couldn't never tapped. This problem doesn't show if I set the <code>GestureDetector</code> behavior to <code>opaque</code> (still strange to me).</p>
  <p>2: <strong>Most important</strong>: I still can't get the native <code>MaterialButton</code> feedback capabilities unless I accidentally trigger its <code>onPressed</code>.</p>
  <pre class="lang-dart prettyprint-override"><code>Container(
  margin: EdgeInsets.all(2),
          width: buttonSize,
          height: buttonSize,
          child: RaisedButton(
            padding: EdgeInsets.zero,
            onPressed: () {print(&quot;onTap&quot;);},
            child: Container(
              margin: EdgeInsets.zero,
              width: buttonSize,
              height: buttonSize,
              child: GestureDetector(
                onTapDown: (_) {
                  th.handleTap(i, 0);
                },
                onTapUp: (_) {
                  th.handleTap(i, 1);
                },
                onTapCancel: () {
                  th.handleTap(i, 2);
                },
                child: Icon(icon)
              ),
            ),
          ),
        );
  </code></pre>