How can I use onTap in GridView? - flutter

Question

I want to use onTap() with GridView and searched in google.
But I did not apply this code.
Therefore could you suggest any solutions?
Recently I started use Flutter and programming.
I think that my question is abstract, so If you have any questions regarding this.
Please feel free to ask me.
Thanks
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title,
style: TextStyle(fontFamily: 'OpenSans'),
),
centerTitle: true,
),
body: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget> [
GridView.count(
primary: true,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
shrinkWrap: true,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
],
),
],
),
)
),
);
}
}

Answer 1

you can use inkwell to make anything clickable
InkWell(
onTap: () {
print('1 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
here is all of you need
import 'package:flutter/material.dart';
import 'package:testflow/clickaletexsheet.dart';
import 'package:testflow/paint.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(fontFamily: 'OpenSans'),
),
centerTitle: true,
),
body: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
GridView.count(
primary: true,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
shrinkWrap: true,
children: <Widget>[
Material(
color: Colors.teal[100],
child: InkWell(
onTap: () {
print('1 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
),
),
),
Material(
color: Colors.teal[200],
child: InkWell(
onTap: () {
print('2 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
),
),
),
Material(
color: Colors.teal[300],
child: InkWell(
onTap: () {
print('3 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
),
),
),
],
),
],
),
)),
);
}
}
i also defined the inkwell as child of a material widget and passed the colorof container to material instead of container itself because in that way when you click on one of those, the splash will work if you don't do that user won't find out when clicked on it
read more about inkwell hereinkwell