Skip to content

Padding changes while dragging ReorderableListView on web and desktop #147419

@arturoszulc

Description

@arturoszulc

Steps to reproduce

Start dragging any list element
(Tested on Chrome Browser)

Expected results

Padding stays intact

Actual results

Padding changes (the whole tile shifts down)
To fix this I have to either resign from ListTile or Align widget. But I need both to keep hoverColor and prevent Card from stretching.

Code sample

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

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: ReorderableListView(
        onReorder: (oldIndex, newIndex) {},
        children: const [
          ListRow(key: ValueKey('0'), text: '000000'),
          ListRow(key: ValueKey('1'), text: '111111'),
          ListRow(key: ValueKey('2'), text: '222222'),
        ],
      )),
    );
  }
}

class ListRow extends StatelessWidget {
  const ListRow({super.key, required this.text});

  final String text;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: ListTile(
        hoverColor: Colors.blue,
        onTap: () {},
        title: Row(
          children: [
            const Expanded(
              flex: 2,
              child: Text('HelloWorld'),
            ),
            Expanded(
                flex: 4,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Card(
                    margin: EdgeInsets.zero,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(text),
                    ),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

Flutter Doctor output

Doctor output
[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale pl-PL)
    • Flutter version 3.19.6 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (9 days ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\Artur\AppData\Local\Android\sdk
    • Platform android-34, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.4.33205.214
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2022.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 17.0.6+0-b2043.56-9586694)

[√] VS Code (version 1.88.1)
    • VS Code at C:\Users\Artur\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.86.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.4291]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 124.0.6367.78
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 122.0.2365.92

[√] Network resources
    • All expected network resources are available.

• No issues found!

Metadata

Metadata

Assignees

Labels

a: desktopRunning on desktopf: material designflutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions