How to give onTap functionality to a container which is wrapped in a Listview

Question

I have a list of containers wrapped in a listview, I need to give a onTap functionality like when the user taps on the container it should give me a value of that particular container, below is my code and I tried using Inkwell function but it throws an error saying vertical portview. Help me out and thanks in advance.

dynamic _allVehiclesDataView = new ListView(
  children: List.generate(this._allVehiclesData.length,
    (i) => new Container(
      decoration: new BoxDecoration(
        border:  Border(
          bottom:  BorderSide(width: 1.0, color: Colors.grey[300]),
        ),
      ),
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom:5.0),
                  child: Text(
                    this._allVehiclesData[i]["vehicle"]["registration"],
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                    ),
                  ),
                ),
                Text(
                  'Location :',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.grey,
                  ),
                ),
                Text(
                  (this._allVehiclesData[i]["address"] == null || 
                    this._allVehiclesData[i]["address"] == 'Not determined') ? 
                    "No data available" : ""+this._allVehiclesData[i]["address"]["LongLabel"],
                  style: TextStyle(
                    fontSize: 13.0,
                    fontWeight: FontWeight.bold,

                  ),
                ),
                Text(
                  'Last known update :',
                  style: TextStyle(
                    fontSize: 15.0,
                    color: Colors.grey[500],
                  ),
                ),
                Text(
                  (this._allVehiclesData[i]["deviceTime"]),
                  style: TextStyle(
                    fontSize: 13.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                this._allVehiclesData[i]["fuel"] != "null"?
                new Row(
                  children: <Widget>[ 
                    Text(
                      'Fuel Level :',
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.grey[500],
                      ),
                    ),
                    new Container(
                      decoration: new BoxDecoration(
                        shape : BoxShape.circle,
                        border: new Border.all(
                          color: Colors.blue[300],
                          width: 5.0,
                        )
                      ),
                    ),
                    Text(
                      (this._allVehiclesData[i]["fuel"].toString()),
                      style: TextStyle(
                        fontSize: 13.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ) : Text(''),
                this._allVehiclesData[i]["temperature"] != "null" ?
                new Row(
                  children: <Widget>[
                    Text(
                      'Temp :',
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.grey[500],
                      ),
                    ),
                    new Container(
                      decoration: new BoxDecoration(
                        shape : BoxShape.circle,
                        border: new Border.all(
                          color: Colors.red[300],
                          width: 5.0,
                        )
                      ),
                    ),
                    Text(
                      (' '+this._allVehiclesData[i]["temperature"].toString()+'  C'),
                      style: TextStyle(
                        fontSize: 13.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ):Text(""),
              ],
            ),
          ),
          status(i),
          // new InkWell(),
        ],
      ),
    ),
  ),
);

Answer 1

You can use the GestureDetector for the same

Wrap your Container in a GestureDetector with an onTap callback

GestureDetector(
  // When the child is tapped, do your work
  onTap: () {
    ...
    ...
  },
  // Container
  child: Container(
    ...
  ),
);