Flutter: How to make items within a staggered grid view clickable

Issue

I am using the staggered grid view package. How do I make the images within my staggered grid view clickable? I have tried adding in the GestureDetector function but I do not know where exactly I should input it into the code.

here is my code

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class ExploreGridView extends StatelessWidget {
  const ExploreGridView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => StaggeredGridView.countBuilder(
        staggeredTileBuilder: (index) => StaggeredTile.fit(2),
        crossAxisCount: 4,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        itemCount: 12,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (context, index) => buildImageCard(index),
      );

  Widget buildImageCard(int index) => Card(
        margin: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey[850],
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12),
                topRight: Radius.circular(12),
                bottomLeft: Radius.circular(12),
                bottomRight: Radius.circular(12)),
            boxShadow: [
              BoxShadow(
                  color: Colors.black,
                  offset: Offset(5.0, 5.0),
                  blurRadius: 15.0,
                  spreadRadius: 1.0),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(12),
            child: Image.network(_NFTImgurls[index]),
          ),
        ),
      );
}

List<String> _NFTImgurls = [
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1607376477/beepleopenedition/BEEPLE_2020COLLECTION_INTO-THE-ETHER_wv3eyt.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1613576449/A/MadDogJones/MDJ_-_Escalation_C2_iskzf4.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1610827318/A/Billelis/%CE%9A%CE%91%CE%98%CE%91%CE%A1%CE%A3%CE%99%CE%A3_udzhmj.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1610463118/A/DeadmauMadDog/MDJxDeadmau5_Dead_ramen_md6abq.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1614741616/Ashley/AndreasWannerstedt3/the_smooth_saint_-_Andreas_Wannerstedt_jetmhb.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1614650252/A/SteveAoki/character_X_-_Carly_Bernstein_rgtnih.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1605799567/MadDogJones/MDJ_-_Ideas_r_the_currency_e1o1r2.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1629082199/Andrea/NessGraphics/NessGraphics_L0G1ST1CS_Final_cg81g5.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1607532674/beepleopenedition/BEEPLE_2020COLLECTION_BULL-RUN_bqjzfj.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1614741607/Ashley/AndreasWannerstedt3/the_open_hand_-_Andreas_Wannerstedt_au1bjs.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1613507277/A/MadDogJones/Why_would_I_care__I_m_just_a_cat_1_tvtdr3.png',
  'https://res.cloudinary.com/nifty-gateway/video/upload/v1618196543/Pak/ACube.png',
];

Solution

You can wrapper your Card with a GestureDetector and set onTap callback propety to do what you want.
See: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html?msclkid=35f66352a95311eca644621b0a8beb24

Answered By – Arlle Brasil

Answer Checked By – Senaida (FlutterFixes Volunteer)