where to add gesture detector on gridview displaying images

Question

I have successfully displaying images in a gridView() but now, I want each image clickable/tappable, I have tried putting gesture detector inside children but it does not seems to work, pls help.

        import 'package:flutter/foundation.dart';
        import 'package:flutter/material.dart';
        import 'package:flutter/material.dart';
        import 'package:cached_network_image/cached_network_image.dart';

        class SearchTiles extends StatefulWidget {
          final String Image1 ="https://www.image1.png";
          final String Image2 ="https://www.image2.png";
          final String Image3 = "https://www.image3.png";
          final String Image3 = "https://www.image4.png";


          @override
          _SearchTilesState createState() => _SearchTilesState();
        }

        class _SearchTilesState extends State<SearchTiles> {
          @override
          Widget build(BuildContext context) {
            final title = 'Pick a Store';

            return MaterialApp(
              title: title,
              home: Scaffold(
                appBar: AppBar(
                  title: Text(title),
                ),
                body: GridView.count(
                    crossAxisCount: 2,
                    children: <String>[
                      widget.image1,
                      widget.image2,
                      widget.image3,
                      widget.image4
                    ].map((String url) {
                      return GridTile(
                        child: Image.network(
                          url,
                        ),
                      );
                    }).toList()),
              ),
            );
          }
        }

Answer 1

Try this, It's work for me :-)

return GridTile(
  child: InkWell(
    onTap: () {
      //here get image tap callback
    },
    child: Image.network(
      url,
    ),
  ),
);