ReorderableListView: Unexpected Gap During Drag if Specifying itemExtent or prototypeItem

38 Views Asked by At

When using a Flutter ReorderableListView widget and setting either of the itemExtent or prototypeItem parameters to control the size of list tiles, an unexpected behavior occurs while a drag is underway. Instead of inserting a gap of matching size at the position of the list tile being dragged, the gap size seems to be twice as large. Alternatively, it could also be possible that an additional gap appears underneath the position of the list tile being dragged.

Leaving both parameters as null produces expected behavior.

DartPad example

import 'dart:ui';

import 'package:flutter/material.dart';

/// Flutter code sample for [ReorderableListView].

void main() => runApp(const ReorderableApp());

class ReorderableApp extends StatelessWidget {
  const ReorderableApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ReorderableListView Sample')),
        body: const ReorderableExample(),
      ),
    );
  }
}

class ReorderableExample extends StatefulWidget {
  const ReorderableExample({super.key});

  @override
  State<ReorderableExample> createState() => _ReorderableExampleState();
}

class _ReorderableExampleState extends State<ReorderableExample> {
  final List<int> _items = List<int>.generate(8, (int index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.secondary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.secondary.withOpacity(0.15);

    return ReorderableListView(
      itemExtent: 48, // <------------ THIS GUY! --------------------------|
      children: <Widget>[
        for (int index = 0; index < _items.length; index += 1)
          ListTile(
            key: Key('$index'),
            tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
            title: Text('Item ${_items[index]}'),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

Large gap appears when dragging list tile

I have tried using other child widgets than ListTile, with identical results.

0

There are 0 best solutions below