I have a ReorderableListView
inside a container with a fixed width and height. When the number of ListTile
widgets exceeds the container's height, the background of the ReorderableListView
overflows outside the container, but the foreground (text) of the ListTile
widgets is clipped, as expected.
I have attached a gif as a visual aid, in which we can notice that the text and icon of each ListTile
gets clipped, but not the background. We can also notice how the AppBar
of my Scaffold
widgget changes color when the list moves all the way up.
Here is my code:
Container(
width: 250,
height: 300,
child: ReorderableListView(
clipBehavior: Clip.hardEdge,
shrinkWrap: true,
onReorder: (int oldIndex, int newIndex) { /* Some code here */ },
children: <Widget>[
for (int index = 0; index < _selectedDataLabelSet.labels.length; index++)
ListTile(
selected: _selectedDataLabelIndex == index,
selectedTileColor: colorScheme.primary,
selectedColor: Colors.white,
key: Key('$index'),
tileColor: index.isOdd ? oddItemColor : evenItemColor,
title: Text(_selectedDataLabelSet.labels[index]),
onTap: () { /* Do something here */ },
),
]),
),
I tried:
ReorderableListView
with a ConstrainedBox
ReorderableListView
with a SingleChildScrollView
shrinkWrap: true
and clipBehavior: Clip.hardEdge
to my ReorderableListView
As Reza mentioned, this is a similar question: List Tiles out of container when scrolling. This behavior is not caused by the ReorderableListView
, but by the ListTiles
. Wrapping them with a Card
widget fixed the issue.