Limiting the visibility of the selection|ListView-CodePudding

I have a ListView inside a Column:

SizedBox(width: 100, height: 100, child: ListView.builder(
          shrinkWrap: true,
          itemCount: _listHours.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Center(child: Text(_listHours[index].toString())),
              selected: index == _selectedIndexHours,
              dense: true,
              selectedTileColor: Colors.indigo.withOpacity(0.6),
              onTap: () {
                setState(() {
                  _selectedIndexHours = _listHours[index];
                });
              },
            );
          }
      ),),

When an item is selected, the selection itself is visible by scrolling the entire length of the screen.

CodePudding user response：

You are having a problem similar to this one where the ListTile's decoration renders outside the ListView. There is no solution for this yet but you can implement some workarounds. In this section of code, I set on "null" the ListTile's "onTap" parameter and wrapped it with a GestureDetector widget. Like this:

SizedBox(width: 100, height: 100, child: ListView.builder(
      shrinkWrap: true,
      itemCount: _listHours.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            setState(() {
              _selectedIndexHours = _listHours[index];
            });
          }
          child: ListTile(
          title: Center(child: Text(_listHours[index].toString())),
          selected: index == _selectedIndexHours,
          dense: true,
          selectedTileColor: Colors.indigo.withOpacity(0.6),
          onTap: null
        )
      );
    }
  ),
),

I hope this works for you.