Removing the shadow that appears when dragging an item from a ReorderableListView (Flutter)

Question

In my TODO app, I created draggable and droppable ListaItem elements using a ReorderableListView. The problem is that my ListaItem has rounded borders and a rectangular (and ugly) shadow appears when I try to drag them.

My aim is to remove this annoying shadow.

My ListaItem should appear so:

Here the ListaItem code :

 @override
 Widget build(BuildContext context) {
   return 
       Container(
         margin: EdgeInsets.only(left:10.0, right: 10.0, top: 7,bottom: 7),
         decoration: BoxDecoration(
           boxShadow: [BoxShadow(
               color: Color.fromRGBO(50, 50, 50, 0.21),
               offset: Offset(2, 2),
               blurRadius: 10.0
             )],
             borderRadius: BorderRadius.all(Radius.circular(100.0))
         ),
         child: ElevatedButton(
           onPressed: () {
             setState(() {
               widget.checkValue = !widget.checkValue;
             });
           }, 
           style: ElevatedButton.styleFrom(
             primary: Colors.white,
             onPrimary: Color.fromARGB(0, 59, 59, 59),
             shape: StadiumBorder(),             
           ),
           child: AnimatedContainer(
             duration: Duration(milliseconds: 100),
             height: 55,
             padding: EdgeInsets.only(left: 10, right: 2),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Text(
                   widget.product,
                   style: TextStyle(
                     color: widget.checkValue ? Color.fromARGB(120, 37, 37, 37) : Color.fromARGB(200, 37, 37, 37),
                     fontSize: 20,
                     fontWeight: FontWeight.w300,
                     decoration: widget.checkValue ? TextDecoration.lineThrough : TextDecoration.none
                     ),
                   ),
                 newCheck(value: widget.checkValue)//it's a styled checkbox
               ],
             ),
           )
         ),
       );
     
 }
}

But, as I said before, dragging an Item causes an ugly shadow, like this:

Here the ReorderableListView code :

  @override
  Widget build(BuildContext context) {
    var Items = new List<Item>.generate(10, (i) => Item(i, i.toString()));
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          color: Colors.transparent,
          child: 
            Expanded(
              child: ReorderableListView(
              padding: EdgeInsets.only(top:20),
              onReorder: ((oldIndex, newIndex) {
                
              }),
              children: [
                for(int i = 0; i < Items.length; i++)
                  ListaItem(checkValue: Items[i].state, product: Items[i].title,key: Key(i.toString()),)
              ],
            )
          )
        ),
      ),
       // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Thanks in advance!!

Laynelayney

Answer 1

You have to use the proxyDecorator property of the ReorderableListView to overwrite the design of the element, that has be selected by a longPress.

class _TestState extends State<Test> {
 
  Widget proxyDecorator(Widget child, int index, Animation<double> animation) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget? child) {
        return Material(
          elevation: 0,
          color: Colors.transparent,
          child: child,
        );
      },
      child: child,
    );
  }

  List<String> vars = [];

  @override
  Widget build(BuildContext context) {
    return ReorderableListView.builder(
       proxyDecorator: proxyDecorator,
       itemCount: vars.length,
       onReorder: (oldIndex, newIndex) {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          vars.insert(newIndex, vars.removeAt(oldIndex));
       },
       itemBuilder: (context, index) {
          return Padding(
             key: Key(const Uuid().v1()),
             padding: const EdgeInsets.only(bottom: minPadding),
             child: CustomListItemWidget(someVar: vars[index]),
           );
       }
  }

Phototherapy

Your answer words great, but is there a sorter way of doing it? – Lumen

Unfortunately am not aware of a shorter option. But I am happy to learn a new way :) – Phototherapy

If I understand OPs problem correctly, it should be solved by this feature that is currently in Priority 4 and may be implemented at some point in the future: github.com/flutter/flutter/issues/63527 – Gans

Answer 2

Try returning as:

proxyDecorator: (child, index, animation) => child

Hurter

Answer 3

Use this simple creation of a ReorderableListView.builder

return ReorderableListView.builder(
      padding: EdgeInsets.zero,
      scrollDirection: Axis.horizontal,
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: 3,
      proxyDecorator: (child, index, animation) {
        // This builder is a drag item and place any design and only show the drag item
        return Material(
          key: ValueKey(index),
          elevation: 10, // not required
          color: Colors.transparent, // When disabling colors.transparent use color the background color will change to any color
          child: Container(), // place your ui
        );
      },
      itemBuilder: (BuildContext context, int index) {
        // This builder is a List item
        return Container(); // place your ui
      },
      onReorder: (int oldIndex, int newIndex) {
        // void rearrage section
        setState(() {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          var item = data.removeAt(oldIndex);
          data.insert(newIndex, item);
        });
      },
    );

Antenatal