Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tap on entire row in ListView Flutter layout

So I have a settings screen which is a ListView and I want the user to be able to tap on the entire list row to change that setting. However, I can't seem to find a non-insane way of expanding the child of the GestureDetector to fill up the entire horizontal space.

My listview:

ListView(
    children: [
      GestureDetector(
        onTap: () {
          print('tapped the row');
        },
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Totals expressed in', style: TextStyle(fontSize: 16.0)),
              Text('Percentages', style: TextStyle(color: Colors.black54, fontSize: 15.0)),
            ],
          ),
        ),
      ),
      Divider(height: 1.0),
      // followed by other elements in the list view

This will detect the tap but only the space the text elements take up horizontally (a fraction of the width of the screen). I know about the Expanded widget, but wherever I try to put it I get an error that it either must be a descendant of the Row or Column or the exception:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

like image 374
TimSim Avatar asked Jan 27 '23 17:01

TimSim


1 Answers

Try InkWell. InkWell allows the clickable space to stretch for the whole row.

like image 83
pytong Avatar answered Feb 01 '23 19:02

pytong