Flutter: how to set clickable systems in each index at GridView.builder with Navigator.push in Flutter

Question

i want to set clickable system for navigator push in index of GridView builder. but i am not finding the way how to do it because i am new in flutter. please help me. here all source code.

 class category_route extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

return MaterialApp(
  home: Scaffold(
    
    body: Container(

      child: GridView.builder(

        itemCount: categoryTitleArray.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
          crossAxisSpacing: 5,
          mainAxisSpacing: 5,
          childAspectRatio: (itemWidth / itemHeight),
        ),

        itemBuilder: (BuildContext context, int index) {

          return new Card(
            elevation: 0,
            color: Colors.transparent,
            child: new Column(

              children: [

                Expanded(

                  child: Container(
                    
                    child: Image.asset(
                      categoryImageArray[index],
                      fit: BoxFit.contain,

                    ), ), ),
                
                Text(
                  "${categoryTitleArray[index]}",
                 
                )
         ],), );}, ),  ), ),); } }

Answer 1

Wrap your Card with gesture detector and use its onTap property

       class category_route extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: GridView.builder(
            itemCount: categoryTitleArray.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
              crossAxisSpacing: 5,
              mainAxisSpacing: 5,
              childAspectRatio: (itemWidth / itemHeight),
            ),
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: (){//navigator push here}
                child: new Card(
                elevation: 0,
                color: Colors.transparent,
                child: new Column(
                  children: [
                    Expanded(
                      child: Container(
                        child: Image.asset(
                          categoryImageArray[index],
                          fit: BoxFit.contain,
                        ),
                      ),
                    ),
                    Text(
                      "${categoryTitleArray[index]}",
                    )
                  ],
                ),
              );
              )
            },
          ),
        ),
      ),
    );
  }
}

You can also use InkWell instead of gestureDetector which is same but with ripple effect.