How can I use onTap in GridView?

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],
                  ),
                ],
              ),
            ],
          ),
        )
          ),
    );
  }
}

Solution

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

Comments

[a fantastic men]

And I would like to add Material touch ripples... flutter.dev/docs/cookbook/gestures/ripples Do you have any ideas? Thanks

[Yahya Parvar]

yes you can use SnackBar widget here is an example youtube.com/watch?v=bqA8anBgqQI

[Anton Duzenko]

What about cupertino style app?