Flutter onTap method for Containers

Question

Been developing a flutter app and dynamicly building some containers from some Firebase data. I wanted to know if there is a way to get a onTap method for containers (or any widget which is not a button ?

Here is a code sample :

  child: new Container(

    //INSERT ONTAP OR ONPRESSED METHOD HERE

    margin: const EdgeInsets.symmetric(vertical: 10.0),
    child: new Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Container(
          margin: const EdgeInsets.only(right: 16.0),
          child: new GoogleUserCircleAvatar(snapshot.value['images'][0]),
        ),
        new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children : [
            new Container(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: new Text("${snapshot.value['name']}",
                style: new TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
             ),
            new Text("${snapshot.value['description']}",
              style: new TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ]
        )
      ],
    ),

Answer 1

Apart from what others have said in answers, if you use Card inside InkWell, then InkWell will hide away the ripply effect on Android—you can see it happening in the background but not on the card itself.

Solution to that is to create an InkWell inside the Card.

return Card(
  child: InkWell(
    child: Row(
      // Row content
    ),
    onTap: () => {
      print("Card tapped.");
    },
  ),
  elevation: 2,
);

This will help you gain the ripple effect and perform the tap captures on Android too.

Answer 2

You can wrap your Container in an InkWell or GestureDetector. The difference is that InkWell is a material widget that shows a visual indication that the touch was received, whereas GestureDetector is a more general purpose widget that shows no visual indicator.

Answer 3

wrapping the container inside an Inkwell() Widget could solve the problem or even GestureDetector() as

  InkWell(                        
        child: Container(...),                        
        onTap: () {                          
        print("tapped on container");
        },                      
     );

Using the Gesture Detector

GestureDetector(
  onTap: () { print("Container was tapped"); },
  child: Container(...),
)

Answer 4

Screenshot:

---

You shouldn't use GestureDetector because it won't show you any ripple effect (which is core part of a Material design app), so you can use InkWell, here is the basic example.

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(height: 200, width: 200),
    ),
  );
}