Flutter : ReorderableListView changes item width, and ignores rounded borders

Question

I have a ReorderableListView , which contains Containers My problem is that, to be more pretty (in my opinion) , my containers have rounded corners, and they don't take full width (i put a padding in the list) .

The problem is that when i LongPress on an element to reorder it, it automatically gives it the width of my container, ignoring the padding , and puts a shadow around my container (which is pretty ugly in my case)

---

What i tried to do:

I tried to wrap the ReorderableListView in a container and putting a padding to this container instead of the ReorderableListView. But my container has a shadow, and doing this would result in cropping the shadow.

---

STEPS TO REPRODUCE:

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 {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ReorderableListView(
          padding: EdgeInsets.only(top: 100, left: 15, right: 15),
          onReorder: (oldIndex, newIndex) => {},
          children: <Widget>[
            Container(
              key: ValueKey("1"),
              height: 80,
              margin: EdgeInsets.only(bottom: 15.0),
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(16.0),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                    color: Colors.black12,
                    offset: Offset(1.0, 10.0),
                    blurRadius: 10.0
                  )
                ]
              )
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

When item from reorderable ListView is picked up it takes full space as normally ListView does. You need to limit width of the Container.

(i put a padding in the list).

I think you should put padding (or any other size limiter like Column, SizeBox etc.) in the Container, not on the parent list.

Also, you probably need to make ValueKey unique.

Edit:

Try this for rounded shadow:

    return Container(
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.black12,
              offset: Offset(1.0, 10.0),
              blurRadius: 10.0)
        ],
      ),
      child: Card( // important thing here?

Answer 2

To keep BoxDecorations when using ReorderableListView, you have to wrap it in another widget to remove the white background, which it selects the whole row with background, so do it something like this:

Theme(
            data: ThemeData(canvasColor: Colors.transparent),
            child: ReorderableListView.builder(
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return YourWidgetHere(
                  key: ValueKey(whithKey),
                );
              },
              onReorder: (oldIndex, newIndex) {},

)

this will remove the background and keep your decoration styles.