CODEWITHSUNDEEP
user-interfacebuttondartflutter
Alexi Coard
Alexi Coard

Reputation: 7742

Flutter onTap method for Containers

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],
              ),
            ),
          ]
        )
      ],
    ),

Upvotes: 97

Views: 171917

Answers (4)

Collin Jackson
Collin Jackson

Reputation: 116728

You can wrap your Container in an InkWell or GestureDetector.

InkWell: For a tappable area with a ripple effect (Material Design touch indicator). GestureDetector: For general taps without a visual cue.

Upvotes: 182

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20231

You could wrap container inside an Inkwell() or in GestureDetector() as below

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

Using the Gesture Detector

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

The only difference between the two is InkWell provides a ripple effect when the pointer is in contact with the screen while this is no such visual feedback with GestureDetector.

Upvotes: 102

CopsOnRoad
CopsOnRoad

Reputation: 267554

Screenshot:

enter image description here

You can use both GestureDetector and InkWell but I'll suggest you to go for InkWell as it can show ripple effects which a GestureDetector can't.

Differences between GestureDetector and InkWell:

  1. Both share many features in common like onTap, onLongPress etc. The main difference is that GestureDetector has more controls like dragging and so on. On the other hand, InkWell provides some nice ripple effects.

  2. You can use either of them according to your needs. If you want ripple effect choose InkWell, and if you need more controls then go with GestureDetector or even combine both of them.

    Material(
  color: Colors.blue, // Background color
  child: InkWell(
    splashColor: Colors.grey, // Splash color
    onTap: () => print("Container pressed"), // Handle your onTap here.
    child: Container(height: 200, width: 200),
  ),
)

Upvotes: 25

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 6

Related Questions