CODEWITHSUNDEEP
dartflutter
heyr
heyr

Reputation: 5774

GestureDetector onTap Card

new Expanded(

        child: _searchResult.length != 0 || controller.text.isNotEmpty
            ? new ListView.builder(
                itemCount: _searchResult.length,
                itemBuilder: (context, int i) {

                  return new Card(

                      child: new Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                        new Row(children: <Widget>[
                          //new GestureDetector(),

                          new Container(

                              width: 45.0,
                              height: 45.0,
                              decoration: new BoxDecoration(
                                  shape: BoxShape.circle,
                                  image: new DecorationImage(
                                      fit: BoxFit.fill,
                                      image: new NetworkImage(
                                          "https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg")))),
                          new Text(
                              " " +
                                  userDetails[returnTicketDetails[i]
                                      ["user_id"]]["first_name"] +
                                  " " +
                                  (userDetails[returnTicketDetails[i]
                                      ["user_id"]]["last_name"]),
                              style: const TextStyle(
                                  fontFamily: 'Poppins', fontSize: 20.0)),
                        ]),
                        new Column(
                          children: <Widget>[
                            new Align(
                                alignment: FractionalOffset.topRight,
                                child: new FloatingActionButton(
                                  onPressed: () {

                                    groupId = returnTicketDetails[i]["id"];

                                    print(returnTicketDetails[i]["id"]);
                                    print(widget.id);

                                    Navigator.push(
                                        context,
                                        new MaterialPageRoute(
                                            builder: (context) => new Tickets(groupId,widget.id)));

                                  },
                                  heroTag: null,
                                  backgroundColor: Color(0xFF53DD6C),
                                  child: new Icon(Icons.arrow_forward),
                                )),
                            new Padding(padding: new EdgeInsets.all(3.0)),
                          ],
                        )
                      ]));
                },
              )
            : new ListView.builder(
                itemCount: _searchResult.length,
                itemBuilder: (context, int i) {
                  return new Card(
                    child: new ListTile(
                        //title: new Text(userDetails[returnTicketDetails[i]["user_id"]]["first_name"]),
                        ),
                    margin: const EdgeInsets.all(0.0),
                  );
                },
              ),
      ),

Hi everyone! As I am building dynamically a Card in a ListView, I was thinking rather than keep the FloatingActionButton in each of them as I already do, to implement a onTap method in each card and trigger something. In other words, I would like to keep the card as simple as possible without many widget around. Thank you in advance!

Upvotes: 16

Views: 32851

Answers (4)

Jagadish Nallappa
Jagadish Nallappa

Reputation: 832

I might be late by many moons. But here is what you need to do in order to get inkwell splash correctly within card bounds.

Add the following line to your card widget and use inkwell like you would as its child.

clipBehavior: Clip.hardEdge,

I hope this still helps someone. Thank you very much. Cheerio!

Upvotes: 0

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126574

As Card is "a sheet of Material", you probably want to use InkWell, which includes Material highlight and splash effects, based on the closest Material ancestor.

return Card(
  child: InkWell(
    onTap: () {
        // Function is executed on tap.
    },
    child: ..,
  ),
);

Upvotes: 53

Phuah Yee Keat
Phuah Yee Keat

Reputation: 1630

You should really be wrapping the child in InkWell instead of the Card:

return Card(
    child: InkWell(onTap: () {}, 
                   child: Text("hello")));

This will make the splash animation appear correctly inside the card rather than outside of it.

Upvotes: 8

Vinoth Kumar
Vinoth Kumar

Reputation: 13431

Just wrap the Card with GestureDetector as below,

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemBuilder: (context, i) {
        new GestureDetector(
          child: new Card(
          ....    
          ),
          onTap: onCardTapped(i),
        );
      },
    );
  }

  onCardTapped(int position) {
    print('Card $position tapped');
  }
}

Upvotes: 7

Related Questions