Proper way to add GestureDector to Listview.builder card in Flutter?

Charles Jr picture Charles Jr · Sep 26, 2017 · Viewed 20.3k times · Source

I have an Expanded widget wrapped around a Listview.builder of Card. How can I make my card not only detect onTap but also pass variables to my new .dart file on Navigation. I'm currently getting a sizing error?

Updated With Code

Here is my code:

new Expanded(
                child: new ListView.builder(
                    itemCount: id == null ? 0 : id.length,
                    itemBuilder: (BuildContext context, int index) {
                      return new Card(
                        child: new Column(
                          children: <Widget>[
                            new Image.network(video[index]),
                            new Padding(padding: new EdgeInsets.all(3.0)),
                            new Text(title[index],
                            style: new TextStyle(fontWeight: FontWeight.bold,
                            color: Colors.black),
                            ),
                            new GestureDetector(onTap: (){
                              print(id[index]);
                            },)

                          ],
                        ),
                      );

                    }))

Here is the thrown exception:

The following assertion was thrown during performLayout():
RenderPointerListener object was given an infinite size during layout.
This probably means that it is a render object that tries to be as big as possible, but it was put
inside another render object that allows its children to pick their own size.

I would like to pass title[index] and video[index] similar to didSelectRowAtIndexPath in iOS Swift.

Answer

Shady Aziza picture Shady Aziza · Sep 26, 2017

You are adding the GestureDetector as one child of the Column, and Flutter does not understand what piece of UI this GestureDetector needs to be detecting different touch events on (you are not specifying where exactly do you need this GestureDetector to be performing its task)

If you need the whole Card to be interactive, you need to wrap your Card within a GestureDecetor as follows

var id = ["title 1", "title 2", "title 3", "title 4", "title 5",];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView.builder(
          itemCount: id == null ? 0 : id.length,
          itemBuilder: (BuildContext context, int index) {
            return new GestureDetector( //You need to make my child interactive
              onTap: () => print(id[index]),
              child: new Card( //I am the clickable child
                child: new Column(
                  children: <Widget>[
                    //new Image.network(video[index]),
                    new Padding(padding: new EdgeInsets.all(3.0)),
                    new Text(id[index],
                      style: new TextStyle(fontWeight: FontWeight.bold,
                          color: Colors.black),
                    ),


                  ],
                ),),
            );
          }),
    );
  }