Метод флаттера onTap для контейнеров

Разработал приложение флаттера и динамично создавал некоторые контейнеры из некоторых данных Firebase. Я хотел знать, есть ли способ получить метод onTap для контейнеров (или любой виджет, который не является кнопкой?

Вот пример кода:

  child: new Container(

    //INSERT ONTAP OR ONPRESSED METHOD HERE

    margin: const EdgeInsets.symmetric(vertical: 10.0),
    child: new Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Container(
          margin: const EdgeInsets.only(right: 16.0),
          child: new GoogleUserCircleAvatar(snapshot.value['images'][0]),
        ),
        new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children : [
            new Container(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: new Text("${snapshot.value['name']}",
                style: new TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
             ),
            new Text("${snapshot.value['description']}",
              style: new TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ]
        )
      ],
    ),

Ответ 1

Вы можете обернуть свой Container в InkWell или GestureDetector. Разница в том, что InkWell - это материальный виджет, который показывает визуальную индикацию того, что прикосновение получено, тогда как GestureDetector - это более общий виджет, который не показывает визуальный индикатор.

Ответ 2

обертывание контейнера внутри виджета Inkwell() может решить проблему или даже GestureDetector() как

  InkWell(                        
        child: Container(...),                        
        onTap: () {                          
        print("tapped on container");
        },                      
     );

Использование детектора жестов

GestureDetector(
  onTap: () { print("Container was tapped"); },
  child: Container(...),
)

Ответ 3

Помимо того, что другие сказали в ответах, если вы используете Card внутри InkWell, то InkWell будет скрывать эффект ряби на Android - вы можете видеть, что это происходит в фоновом режиме, но не на самой карте.

Решением этой проблемы является создание InkWell внутри Card.

return Card(
  child: InkWell(
    child: Row(
      // Row content
    ),
    onTap: () => {
      print("Card tapped.");
    },
  ),
  elevation: 2,
);

Это поможет вам получить эффект ряби и выполнять захват касаний на Android.

Ответ 4

Снимок экрана:

Вы не должны использовать GestureDetector, потому что он не покажет вам никакого волнового эффекта (который является основной частью приложения разработки материалов), поэтому вы можете использовать InkWell, вот основной пример.

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(height: 200, width: 200),
    ),
  );
}