Skip to content

ListTile selected background inside ReorderableListView. Background doesn't move correctly when the selected Tile is not the drag target #84989

@kenthinson

Description

@kenthinson

Steps to Reproduce

  1. Create a ReorderableListView.
  2. Place a ListTile inside the ReorderableListView.
  3. Have one of the ListTiles selected (background color changes)
  4. Drag the tiles around.

Expected results:
Dragging any Tile should moves it's background with it. Even if it is not the Tile directly chosen.
If the dragged Tile is the selected Tile everything works correctly.

Actual results:
However if we drag any other tile, the background color is locked in place until the drag operation is completed. The background color doesn't move with the selected tile.
The background color should move with its associated Tile. Regardless of if it's the target of the drag or just moving as a consequence of a drag operation.

Logs
No errors were reported in the debugger related to this.
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-arm, locale en-US)
    • Flutter version 2.2.2 at /Users/kent/Developer/flutter
    • Framework revision d79295af24 (10 days ago), 2021-06-11 08:56:01 -0700
    • Engine revision 91c9fc8fe0
    • Dart version 2.13.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/kent/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 11.4 20F71 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.106

• No issues found!

Example Screen to reproduce issue:

import 'package:flutter/material.dart';

class PresManager extends StatefulWidget {
  const PresManager() : super();

  @override
  _PresManagerState createState() => _PresManagerState();
}

class _PresManagerState extends State<PresManager> {
  List<SlideData> test = [
    SlideData(slideTitle: "One"),
    SlideData(slideTitle: "Two"),
    SlideData(slideTitle: "Three"),
  ];
  SlideData? selectedSlide;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Flexible(
            child: Row(
              children: [
                Container(
                  width: 200,
                  child: Column(
                    children: [
                      Flexible(
                        child: ReorderableListView(
                          onReorder: (int oldIndex, int newIndex) {
                            test.insert(newIndex, test[oldIndex]);
                            if (oldIndex < newIndex) {
                              test.removeAt(oldIndex);
                            } else {
                              test.removeAt(oldIndex + 1);
                            }
                            setState(() {});
                          },
                          children: test.asMap().entries.map((e) {
                            return ListTile(
                              selectedTileColor:
                                  Theme.of(context).highlightColor,
                              selected: e.value == selectedSlide,
                              key: Key(e.key.toString() + e.value.slideTitle),
                              onTap: () {
                                setState(() {
                                  selectedSlide = e.value;
                                });
                              },
                              title: Padding(
                                padding: const EdgeInsets.only(right: 16.0),
                                child: AspectRatio(
                                  aspectRatio: 16 / 9,
                                  child: Card(
                                    child:
                                        Center(child: Text(e.value.slideTitle)),
                                    elevation: 2,
                                  ),
                                ),
                              ),
                            );
                          }).toList(),
                        ),
                      ),
                      Container(
                        color: Colors.grey,
                        height: 1,
                      ),
                      Container(
                        child: Center(
                          child: ElevatedButton.icon(
                            icon: Icon(Icons.add),
                            label: Padding(
                              padding: const EdgeInsets.only(
                                  top: 10.0, bottom: 10.0),
                              child: Text('Add Slide'),
                            ),
                            onPressed: () {
                              setState(() {
                                test.insert(1, SlideData(slideTitle: 'test'));
                              });
                            },
                          ),
                        ),
                        height: 60,
                      )
                    ],
                  ),
                ),
                Container(
                  width: 1,
                  color: Colors.grey,
                ),
                Container()
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SlideData {
  String slideTitle;
  SlideData({required this.slideTitle});
}

Movies first shows dragging the selected Tile around. Background moves as expected with that selected Tile.
Then it shows the bug. Dragging a different Tile from the selected Tile the background color doesn't move until the mouse is released and the drag operation is completed.

Screen.Recording.2021-06-21.at.11.04.51.AM.mov

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.found in release: 2.2Found to occur in 2.2found in release: 2.3Found to occur in 2.3frameworkflutter/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 version

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions