flutterflutter-layoutreorderable-list

How can I change the borders added to a list tile when it is being dragged in a reordable list?

Hello I have a widget like the following (after simplifing it to show my question).

import 'package:flutter/material.dart';

class ListItem extends StatelessWidget {
  const ListItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              blurRadius: 7,
              offset: const Offset(2, 3),
            )
          ],
        ),
        child: ListTile(
          tileColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
          ),
          title: const Text('Some name'),
          leading: const CircleAvatar(
            backgroundColor: Colors.yellow,
            child: Text(
              '1',
              style: TextStyle(color: Colors.white),
            ),
          ),
          subtitle: const Text('aaaaa - 22.2€'),
        ),
      ),
    );
  }
}

Example without dragging

That widget is wrapped with another widget which contains a ReorderableListView.builder. When I start dragging it, a squared border with its own shadow appears:

Example dragging

I'm not able to find any property in the Reorderable list view or in the list tile that can be overwritten to change that styling.

Where does that come from?

The other widget only contains almost default values:

ReorderableListView.builder(
      buildDefaultDragHandles: true,
      scrollDirection: Axis.vertical,
      itemCount: myItemList.length,
      itemBuilder: (BuildContext ctx, int index) {
        var listItem = myItemList[index];
        return ListItem
Solution

  • I was able to solve this with the property proxyDecorator of the ReoderableListView.builder:

        return ReorderableListView.builder(
      // This overwrites the default behavior when dragging and shows a small
      // shadow and adds a rounded border 
      proxyDecorator: (child, index, animation) => Material(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                blurRadius: 7,
                offset: const Offset(2, 3),
              )
            ],
          ),
          child: child,
        ),
      ),
      ...