Reorderable ListView visual order not updating after drag/drop

[1Elko1]

Can we access your project?

• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

Hi,
I'm dealing with a tricky Reorderable ListView issue that seems tied to nested data in App State.

Quick summary of the problem:

Reordering works perfectly (immediate visual update after drag/drop) when the Reorderable ListView is bound directly to a top-level/main App State variable (e.g., a simple List in App State).

But when I try the exact same setup for a nested list (a list field inside another struct/dataset, e.g., project.subTasks or group.items where the parent is in App State), the visual order doesn't update on screen after dropping the item — it looks like the componant doesnt update the refrence or somethigng.

The underlying data does update correctly (verified in debugger or by printing the nested list after reorder).

The correct reordered order only appears if I navigate away from the page and come back, or trigger a full page reload/rebuild.

Expected Behavior

After onReorder completes and the nested list in App State is updated, the ReorderableListView should rebuild automatically.

The visual order of items should update instantly without requiring:

Navigating away and back

A full page reload

Manually forcing rebuilds (dummy state toggles, rebuild actions, etc.)

Steps to Reproduce

1. Create an App State variable containing a struct with a nested list

Example:

• currentProject (ProjectStruct)
• currentProject.subTasks (List)

2. Add a ReorderableListView to a page and bind its data source to the nested list
   (FFAppState().currentProject.subTasks).

3. Implement the onReorder callback to:

• Remove the item at oldIndex
• Insert it at newIndex (adjusting index if oldIndex < newIndex)
• Update the nested list back into App State (currentProject.subTasks).

4. Run the app and drag an item in the ReorderableListView to a new position.

5. Observe that the nested list in App State updates correctly (confirmed via logs/debugger), but the visual order of the list does not update after dropping the item.

6. Navigate away from the page and return, or trigger a full page rebuild.

7. Observe that the reordered list now displays correctly.

8. Repeat the same setup using a top-level App State list instead of a nested list and note that the UI updates immediately after reorder.

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

Builder( builder: (context) { final subTasksList = FFAppState() .Tasks .elementAtOrNull(widget!.taskIndex!) ?.subTaskReal ?.toList() ?? []; return ReorderableListView.builder( padding: EdgeInsets.zero, proxyDecorator: (Widget child, int index, Animation animation) => Material(color: Colors.transparent, child: child), shrinkWrap: true, scrollDirection: Axis.vertical, itemCount: subTasksList.length, itemBuilder: (context, subTasksListIndex) { final subTasksListItem = subTasksList[subTasksListIndex]; return Container( key: ValueKey( "ListView_0r635opr" + '' + subTasksListIndex.toString()), child: Container( decoration: BoxDecoration(), child: SubTasksEntryBlackWidget( key: Key( 'Keyhl9${subTasksListIndex}of${subTasksList.length}'), text: subTasksListItem.text, complete: subTasksListItem.complete, taskInteger: widget!.taskIndex!, subTaskInteger: subTasksListIndex, entryDoc: widget!.entryDoc!, ), ), ); }, onReorder: (int reorderableOldIndex, int reorderableNewIndex) async { _model.newSubTasksList = await actions.reorderSubTasks( FFAppState() .Tasks .elementAtOrNull(widget!.taskIndex!)! .subTaskReal .toList(), reorderableOldIndex, reorderableNewIndex, ); FFAppState().updateTasksAtIndex( widget!.taskIndex!, (e) => e..subTaskReal = _model.newSubTasksList!.toList(), ); safeSetState(() {}); safeSetState(() {}); }, ); }, )

Visual documentation

Environment

- FlutterFlow version: Latest
- Platform:Desktop or windows app
- Browser name and version: Chrome
- Operating system and version affected: Windows 10 Pro

Additional Information

No response

[Juansarmi]

Hi! I’m sorry you’re experiencing this issue.
I haven’t been able to reproduce the error using a ListView with the reorderable option enabled. Please note that enabling reorderable only allows you to access oldIndex and newIndex within your actions.
For further assistance with your custom code, I recommend reaching out to Support via the in-app chat or by email at support@flutterflow.io .
Best regards

[1Elko1]

@Juansarmi, Hi, hope you are well.

Please read my query a bit more carefully, I tried to give as much detail as possible to avoid confusion.

In simple terms:

• I have a top-level App State list called tasks. Reordering works perfectly and updates the UI immediately.

• Each task contains a nested list of subTasks. Reordering these does update the data correctly, but the UI does not reflect the change until I navigate away from the page and come back.

So this is not about accessing oldIndex / newIndex, that part works fine. It’s specifically a nested list inside App State not triggering a rebuild after reorder.

1. List within a list (nested data)
2. Data updates correctly
3. UI only refreshes after page navigation

[Juansarmi]

Hi there!

Could you let me know which platform and operating system you’re using with FlutterFlow, as well as the version you’re currently on?

If you’re able to recreate the issue in a new blank project, that would really help speed things up on our side.

Please also send me the bug report code from that new project so I can take a closer look.

Thanks in advance!

[1Elko1]

@Juansarmi ,

No problem, let me do that quickly.

It will have the same issue on any version, even web.

[1Elko1]

@Juansarmi, Hi,

The issue exists when you have the text in a textfield. The textfield seems to be the issue causer.

[1Elko1]

@Juansarmi, Here are the bug report codes for both test pages I created.

ITFTls/l7c92rsMA+KX5K/kxljw4GUMfWOdEket+EA0hNZysE5ktPePOT1VLYteHf1ZiPVGakj8f09LphvPDEMAEIRacGoRT1K5XQTqVbGqiMrWaPrWwWERQL+xPfxWF07uznx1CVdJoR0YW3GCIPfCrG3qCf9qOYwx5e6fDbOY=

ITFTls/l7c92rsMA+KX5K/kxljw4GUMfWOdEket+EA0hfJDzEJYuYePSYlpLYteFY1BhfU2khngf0N2OheDhGMArBxGcGb5x+IRXQTqVbGqiMrWaPrWwWERQL+xPfxWF07uznx1CVdJoR0YW3GCIPfCrG3qCf9qOYwx5e6fDbOY=

[1Elko1]

When I move a list view item, say from position 2 to position 3, it appears the reorder has not worked. On investigation the reordering does work but the values of the text field are not being updated, therefore visually staying in the old order. If I refresh the page the field then update.

[Juansarmi]

Hello again!

After reviewing your project, we were able to determine that this is not a bug, but rather a small issue related to how the application is being built.

When working with TextFields, updating the initial value will not be reflected until a full page rebuild occurs. In your case, this happens when you leave the page and then return to it. This is expected behavior.

To resolve this, you can use a Form and apply the “set form field” action to assign the value you need dynamically.

I hope this helps.
Best regards

[1Elko1]

Hi,

Thanks for the explanation. I understand the Form + “Set Form Field” approach, but in a ReorderableListView the TextField must be placed inside its own component to work. How would one call an action on the Form inside a list item component after a reorder?

Is there an officially supported way to reliably reset TextField state in this setup?