Flutter：你如何使卡片可点击？

Question

I just have a simple Card like new Card(child: new Text('My cool card')) and I want to be able to click anywhere on it to run some function, except there's no onPressed method for a Card. I could add a button to the bottom, but that's not ideal for this situation.

Anyone know how to make the whole card clickable?

Answer 1

Flutter use composition over properties. Wrap the desired widget into a clickable one to achieve what you need.

Some clickable widgets : GestureDetector , InkWell ,InkResponse .

GestureDetector(
  onTap: () => ......,
  child: Card(...),
);

Answer 2

Flutter provides the InkWell Widget. by registering a callback you can decide what happens when user clicks on the card (called tap in flutter). InkWell also implements Material Design ripple effect

Card(
  child: new InkWell(
    onTap: () {
      print("tapped");
    },
    child: Container(
      width: 100.0,
      height: 100.0,
    ),
  ),
),

Answer 3

I think you can also use InkWell apart from GestureDetector just wrap the card inside InkWell() Widget

InkWell(
  onTap: (){ print("Card Clicked"); }
  child: new Card(),
);

Answer 4

You can use Inkwell and insert splashColor which, at the click of the user, creates the rebound effect with the chosen color, on the card .. This is mainly used in material design.

return Card(
  color: item.completed ? Colors.white70 : Colors.white,
  elevation: 8,
  child: InkWell(
      splashColor: "Insert color when user tap on card",
      onTap: () async {

      },
    ),
);

Answer 5

In Flutter, InkWell is a material widget that responds to touch action.

InkWell(
    child: Card(......),
    onTap: () { 
        print("Click event on Container"); 
    },
);

GestureDetector is a widget that detects the gestures.

GestureDetector(
    onTap: () { 
        print("Click event on Container"); 
    },
    child: Card(.......),
)

Difference

InkWell is a material widget and it can show you a Ripple Effect whenever a touch was received.

GestureDetector is more general-purpose, not only for touch but also for other gestures.

Answer 6

The most preferred way is to add ListTile as Card child. Not only does ListTile contain the method onTap it also helps you in making Card interesting.

Card(
  child: ListTile(
    title: Text('Title')
    leading: CircleAvatar(
      backgroundImage: AssetImage('assets/images/test.jpg'),
    ),
    onTap: () {
      print('Card Clicked');
    },
  ),
),

Answer 7

You also can insert a card into a TextButton:

TextButton clickableCard = TextButton(child: card, onPressed: onCardClick, style: [...]);

This brings the advantage, that you get some features for free. For example in Flutter Web, you get a mousover effect and the cursor changes to the hand so that ths user knows, he can click there. Other additional features can be customised using the style.

Answer 8

Do something on tap/click of 'child' in Flutter:-

Code:-your code looks like:

child: Card(------
------------
--------),

Step1 :- Put your mouse cursor on Card then, press- Alt+Enter (in windows) select wrap with widget .

Step2 :- Change your default widget into GestureDetector .

final code:-

child: GestureDetector(
onTap: YourOnClickCode(),
child: Card(------
------------
--------),
),

Answer 9

Wrap a card in GestureDetector Widget like a below:

 GestureDetector(
    onTap: () {
      // To do
    },
    child: Card(
     
    ),
  ),

Another way is as follows:

InkWell(
    onTap: () {
      // To do
    },
    child: Card(),
  ),

Answer 10

Most of the answers are brilliant but I just want to share mine for the one who wants to make/show a ripple effect on Tap of card or list tile.

Card(
  child: TextButton(
    onPressed: ()=> ...,
    child: ListTile(
           title: Text('title'),
  ),
  ),
);