Search code examples
layoutgestureflutter

Flutter Align widget rect does not detect the onTap gesture

I have a couple of image buttons laid out as follows :

enter image description here

The layout code is :

new Container(
  height: 48.0,
  child: new Row(
    children: <Widget>[
      new GestureDetector(
        onTap: cancelTurn,
        child: new Align(child: new Image.asset("assets/cancel_button.png"), widthFactor: 1.5),
      ),
      new Expanded(child: new Container()),
      new GestureDetector(
        onTap: confirmTurn,
        child: new Align(child: new Image.asset("assets/confirm_button.png"), widthFactor: 1.5),
      ),
    ],
  ),
)

I am using Align widget to hopefully increase the clickable area of the GestureDetector. However, my clicks only work when I click inside the Image widget rect. If you notice, the bounds/rects for Align and Image are different. Align is extended beyond the Image child by using the widthFactor property (set to 1.5)

Any ideas on why the Align widget might not be detecting the tap gesture in its bounds.

Solution

  • Try passing a hitTestBehavior of HitTestBehavior.opaque to the GestureDetector.

    Other tips:

    • Instead of Align, consider a Padding.
    • Consider using an IconButton with Icons.close and Icons.check instead of embedding a custom png. You could wrap it in a Material to draw the black circle and it will even clip the ink splash for you automatically.