neowenshun
neowenshun

Reputation: 960

Currently reordering item not rebuilt in ReorderableListView

I have a list of widgets wrapped in a ReorderableList that are pretty huge, and so I wish to achieve the effect of "collapsing" certain parts of the widget while the reordering is happening.

Here's what I have achieved so far:

return ReorderableListView(
        onReorderEnd: (index) {
           setState(() {
                      shouldCollapse = true;
                    });
        },
        onReorderStart: (index) {
           setState(() {
                      shouldCollapse = true;
                    });
        },
        onReorder: (int oldIndex, int newIndex) async {
           // Some code for reodering
        },
        children: [
          BigWidget(shouldCollapse:shouldCollapse);
        ],
      );

However, this does not fully achieve the intended effect.

=> The item that's being reordered does not collapse

Questions:

  1. May I ask why is this side effect happening?
  2. May I ask if there are any foreseeable consequences of modifying the "parameters" passed to the reorderable items while reordering is happening?
  3. May I ask if there's a better way to modify the list (rebuilding it) whilst the reordering is happening?

EDIT: Here is the current effect:

demo

Code for BigWidget

class BigWidget extends ConsumerWidget {
  final bool shouldCollapse;

  BigWidget({
    Key? key,
    required this.shouldCollapse,
  }) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Card(
      elevation: 0,
      child: 
         if (shouldCollapse == false)
             // Display logic for the hidden items
         //Rest of widget
    );
  }
}

Update 2:

Here!

Dartpad example: (fixed link)

demo

Upvotes: 1

Views: 230

Answers (1)

Sanketh B. K
Sanketh B. K

Reputation: 837

I went through the source code of ReorderableList turns out the re-ordering widget is not rebuilt by default during the process of re-ordering.

If you want it to be rebuilt or animationed, use the proxyDecorator callback.

ReorderableList(
    ...
    proxyDecorator: (child, index, animation) {
      return BigWidget(shouldCollapse: true);

},)

Let me know if this works

Upvotes: 1

Related Questions