Skip to content

SliverReorderableList adds extra unwanted space when dragging an item, only when prototypeItem is provided #142708

@mateusfccp

Description

@mateusfccp

Steps to reproduce

  1. Create a SliverReorderableList in which the prototypeItem is exactly the same as (and has the exact dimensions of) the item built in itemBuilder
  2. Start dragging any item of the list

Expected results

The item being dragged should be kept in place and the space that is "behind" it should be kept unchanged.

Actual results

The space "behind" the item being dragged increases.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final items = [for (int i = 0; i < 10; i++) 'Item $i'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SliverReorderableList Example'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverReorderableList(
            itemBuilder: (context, index) {
              return ReorderableDragStartListener(
                key: ValueKey(items[index]),
                index: index,
                child: _Tile(
                  Text(items[index]),
                ),
              );
            },
            itemCount: items.length,
            onReorder: (oldIndex, newIndex) {
              setState(() {
                if (newIndex > oldIndex) {
                  newIndex -= 1;
                }
                final item = items.removeAt(oldIndex);
                items.insert(newIndex, item);
              });
            },
            // Comment `prototypeItem` to fix the issue
            prototypeItem: const _Tile(
              Text('Item 0'),
            ),
          ),
        ],
      ),
    );
  }
}

final class _Tile extends StatelessWidget {
  const _Tile(this.title);

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListTile(
        title: title,
        trailing: const Icon(Icons.drag_handle),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Actual results

Screen.Recording.2024-02-01.at.11.46.09.mov

Expected results
The expected results were achieved by removing the prototypeItem parameter

Screen.Recording.2024-02-01.at.11.47.37.mov

Logs

No response

Flutter Doctor output

The sample code was made and ran in DartPad stable channel (Flutter 3.16.9 Dart SDK 3.2.6).

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: scrollingViewports, list views, slivers, etc.found in release: 3.16Found to occur in 3.16found in release: 3.19Found to occur in 3.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework teamwaiting for PR to land (fixed)A fix is in flight

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions