Proper way to add GestureDector to Listview.builder card in Flutter?
Similar to aziza's suggestion you could have a look at InkWell which basically is a GestureDetector but has the material design splash.
You also asked about how to pass variables to another class. You can do that by just handing them over in your instantiation as constructor variables. Have a look at the onTap method in the code example.
Code could look like this:
@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 InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) {
return new OtherClass(id[index], video[index]);
},
),
);
},
child: new Card(
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
),
),
],
),
),
);
}),
);
}
*Code not tested
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),
),
],
),),
);
}),
);
}