Как включить функцию onpress в списке gridview во флаттере?

Question

У меня есть представление списка gridmodel в моем приложении флаттера, я создал файл дротика для каждого элемента, присутствующего в gridview, но я не знаю, как включить функцию onpress в представлении списка gridmodel, чтобы он переместил меня на следующую страницу

 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),)
        ,),

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

когда я нажимаю на пункт "Мобильный" в списке, он должен перенаправить меня на созданную мною "Мобильную страницу", то же самое касается "рейсов" и "Фильмов".

Answer 1

Вы не можете сделать это напрямую. Для этого вам нужно будет использовать чернильницу или GestureDetector, иначе вы можете выбрать IconButtons. Оберните ваш код чернильницей или GestureDetector следующим образом:

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),)
    ,),

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

Надеюсь, это поможет! Удачного кодирования:)

Answer 2

Я думаю, что вы можете перенаправить, как показано ниже:

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