CODEWITHSUNDEEP
flutterflutter-layout
chrallard
chrallard

Reputation: 147

How to add space between items in a ReorderableListView?

  return ReorderableListView(
      children: [
        for (int index = 0; index < _items.length; index++)
          ListTile(
            key: Key('$index'),
            title: Text('Item $index'),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {},
    );

Is there a way to add some spacing between each item?

Upvotes: 3

Views: 1342

Answers (2)

Reza Farjam
Reza Farjam

Reputation: 1150

Although Aashish Jha's workaround addresses the issue, it introduces another problem: when padding is added to each child, dragging one causes a shadow to appear around it, including the added padding, which is undesirable.

There is an open issue on the Flutter GitHub repository related to this behavior that you can follow for future updates. In the meantime, here are two alternative workarounds that complement the accepted solution:

  1. Using the Theme widget:
Theme(
  data: Theme.of(context).copyWith(
    canvasColor: Colors.transparent,
    shadowColor: Colors.transparent,
    dialogBackgroundColor: Colors.transparent,
  ),
  child: ReorderableListView(
    children: [
      for (int index = 0; index < _items.length; index++)
        Padding(
          padding: const EdgeInsets.all(8.0), // Customize as needed
          child: ListTile(
            key: Key('$index'),
            title: Text('Item $index'),
          ),
        ),
    ],
    onReorder: (int oldIndex, int newIndex) {
      // Add your logic here
    },
  ),
);
  1. Removing the decorator completely:
ReorderableListView(
  proxyDecorator: (child, index, animation) => Material(
    type: MaterialType.transparency,
    child: child,
  ),
  children: [
    for (int index = 0; index < _items.length; index++)
      Padding(
        padding: const EdgeInsets.all(8.0), // Customize as needed
        child: ListTile(
          key: Key('$index'),
          title: Text('Item $index'),
        ),
      ),
  ],
  onReorder: (int oldIndex, int newIndex) {
    // Add your logic here
  },
);

Upvotes: 1

Aashish Jha
Aashish Jha

Reputation: 269

Wrap ListTile with Padding like below,

      Padding(
        padding: const EdgeInsets.all(8.0) //your choice
        ListTile(
          key: Key('$index'),
          title: Text('Item $index'),
        ),
      )

Upvotes: 1

Related Questions