Метод флаттера 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

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

enter image description here

Вы не должны использовать 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),
    ),
  );
}