flutterflutter-reorderable-listview

ReorderableListView background overflows outside of container


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.

gif showing ReorderabbleListView overflow

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:

  1. Wrapping the ReorderableListView with a ConstrainedBox
  2. Wrapping the ReorderableListView with a SingleChildScrollView
  3. Adding the shrinkWrap: true and clipBehavior: Clip.hardEdge to my ReorderableListView

Solution

  • 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.