How to give onpress function on gridview list in flutter?

Question

i have a gridmodel list view in my flutter app,i have created dart file for each of the item present in the gridview but i dont know how to give onpress function on the gridmodel list view so that it will navigate me to next page

 class GridItem extends StatelessWidget {
GridModel gridModel;

  GridItem(this.gridModel);

   @override
    Widget build(BuildContext context) {
    return Padding(
  padding: const EdgeInsets.all(1 / 2),
  child: Container(
   color: Colors.white,
      child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Image.asset(
        gridModel.imagePath,
        width: 30,
        height: 30,
        color: gridModel.color,),
      Padding(
        padding: const EdgeInsets.only(top: 5),
        child: Text(gridModel.title, textAlign: TextAlign.center,
          style: TextStyle(fontSize: 12),)
        ,),

    ],
  ),
   ),
 ),
);
}
}

when i will click on "Mobile" item in list,it should redirect me to "Mobile page" which i have created,same goes for "flights" and "Movies"

hie @MyNamels,i tried to upload the image but a message pop up saying "You should have 10 perks to upload a image" — akshay dhone, Aug 15 '19 at 09:37
@akshaydhone Please don't edit [other's people answers](https://stackoverflow.com/review/suggested-edits/23829084) with your own code, instead please [edit your own question](https://stackoverflow.com/posts/57507551/edit). Alternatively if you're providing a self-answer, please post it as a new answer. — Michael Dodd, Aug 19 '19 at 12:43

score 0 · Answer 1 · answered Aug 15 '19 at 11:14

I think you can redirect like below code:-

  Widget _buildProductItem(BuildContext context, int index) {
    return InkWell(
      child: Card(
          child: Text(list[index].name,
              style: TextStyle(color: Colors.deepPurple))),
      onTap: () {
        GridModel gridModel = list[index];
        //"name" replace to your gridModel Variable.
        if(gridModel.name.toString().toLowerCase() == 'mobile'){
          //here you can redirect mobile page
        } else if(gridModel.name.toString().toLowerCase() == 'flights'){
          //here you can redirect flights page
        } else if(gridModel.name.toString().toLowerCase() == 'movie'){
          //here you can redirect movie page
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: _buildProductItem,
      itemCount: list.length,
    );
  }

score 0 · Answer 2 · answered Jul 26 '20 at 06:44

You cannot do it directly. To do it, you will have to use either inkwell or GestureDetector, else you can chose IconButtons. Wrap you code with inkwell or GestureDetector like this :

InkWell(
onTap: (){ print("Card Clicked"); }
child: Padding(
 padding: const EdgeInsets.all(1 / 2),
 child: Container(
  color: Colors.white,
   child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
     Image.asset(
     gridModel.imagePath,
     width: 30,
     height: 30,
     color: gridModel.color,),
    Padding(
     padding: const EdgeInsets.only(top: 5),
     child: Text(gridModel.title, textAlign: TextAlign.center,
       style: TextStyle(fontSize: 12),)
    ,),

 ],
),
),
),
);
);

Hope it helps! Happy coding:)

How to give onpress function on gridview list in flutter?

2 Answers2