Margin/padding moves with drag on children Card items in ReorderableListView

[widavies]

Steps to Reproduce

1. When dragging a Card that is nested inside a ReorderableListView, the margin/padding seems to move with it. This should likely be transparent, or at least configurable, as it doesn't look very good.
2. The following code will reproduce the bug, I have exaggerated the margins. It should be noted, this is not a critical bug, it does not crash or cause any problems aside from a slight visual inconsistency. Thanks for the help!

class FormEditor extends StatefulWidget {
  final List<String> items = ['a', 'b', 'c', 'd', 'e'];

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

class _FormEditorState extends State<FormEditor> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReorderableListView(
        scrollDirection: Axis.vertical,
        children: [
          for (final item in widget.items)
            Card(
              margin: EdgeInsets.all(16),
              key: ValueKey(item),
              child: ListTile(
                title: Text("$item")
              )
            )
        ],
        onReorder: (oldIndex, newIndex) {
          if(oldIndex < newIndex) {
            newIndex -= 1;
          }

          setState(() {
            var element = widget.items.removeAt(oldIndex);
            widget.items.insert(newIndex, element);
          });

        },
      )
    );
  }
}

Flutter Doctor

PS C:\Users\wdavi> flutter doctor -v
[✓] Flutter (Channel stable, 1.20.1, on Microsoft Windows [Version 10.0.19041.388], locale en-US)
    • Flutter version 1.20.1 at C:\dev_sdks\flutter
    • Framework revision 2ae34518b8 (6 days ago), 2020-08-05 19:53:19 -0700
    • Engine revision c8e3b94853
    • Dart version 2.9.0

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Android\SDK
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit
      https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.

[✓] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 48.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[!] IntelliJ IDEA Community Edition (version 2019.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.4
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • For information about installing plugins, see
      https://flutter.dev/intellij-setup/#installing-the-plugins

[!] VS Code (version 1.47.3)
    • VS Code at C:\Users\wdavi\AppData\Local\Programs\Microsoft VS Code
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (1 available)
    • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

! Doctor found issues in 3 categories.

[darshankawar]

Hi @wdavies973,
A Card widget has default padding, so even if you remove margin from your code, you'll see a fine padding that'll move along.
You may cross-verify this by adding margin: EdgeInsets.zero and reorder them to see that this time the card moves properly.

[widavies]

@darshankawar When I set to margin to EdgeInsets.zero, it removes all visual spacing between Cards and they press up against each other like so:

I would still like to have bit of spacing between the cards.
Wrapping the card with a Padding widget introduces the same problem with the padding background area overlapping other items.

[darshankawar]

This is replicable on latest Stable 1.20.1, but not sure if it's a bug or intended behavior. The padding or margin encircling Card widget moves along with the card while reordering.
I am keeping this issue open for further analysis.
Thanks.

[vartikamangal]

 Theme(
     data: ThemeData(
       canvasColor: Colors.transparent,
       shadowColor: Colors.transparent,
       backgroundColor: Colors.transparent,
       dialogBackgroundColor: Colors.transparent,
    ),
   child: ReorderableListView()
)

this will definately remove the margin and padding I have tried this.

[TheNavigateur]

@darshankawar why not add a "gap" property like in CSS for reorderable list view, columns, rows etc.? It would solve a very common use case without adding the same space at the bottom (or right in the case of rows) of the layout, and seems to me a lot easier for the end developer to achieve the desired outcome.