Community Content
Yd
Yori de Wit

Use the new Reorderable List widget with Firestore!

Hi all,

With the most recent update we finally got reorderable lists!

In my app all my lists are firestore queries, sorted by an integer called "order". Simple enough, but adjusting this order was tedious for users without a reorderable list.

At this time of writing there isn't a guide yet on how to make the Reorderable Listview widget actually make the Firestore document changes, so I made my own custom code to achieve this. You can follow along to get the idea or change it to your own needs immediately.

This expects you to know the basics or reading, writing updating, displaying basic Firestore lists in FF.

Here's a very basic example:

  • Make a Firestore collection called "TestLocations", which will hold documents with 2 fields:

    • order (integer)

    • name (String

  • Make sure you firestore security rules are open on this collection

  • Add the same information to Flutterflow Datebase settings so you can query it

  • Make a simple ListView that displays the order and name of each document

  • Either add a couple of documents manually in Firestore dasboard, or add some widgets to do it live in the app preview:

  • Now make a custom action with the following code:

Future<void> reorderAndUpdateFirestoreLocations(
    List<TestLocationsRecord> displayedList, int oldIndex, int newIndex) async {

  // If the item is moved downwards in the list, adjust the newIndex
  if (oldIndex < newIndex) {
    newIndex -= 1;
  }

  // Remove the item from its original position
  final TestLocationsRecord item = displayedList.removeAt(oldIndex);
  // Insert the item into its new position
  displayedList.insert(newIndex, item);

  // Iterate through the list and update each document's 'order' field in Firestore
  for (int i = 0; i < displayedList.length; i++) {
    TestLocationsRecord doc = displayedList[i];

    await FirebaseFirestore.instance
        .collection('TestLocations')  // <-- Replace 'TestLocations' with your Firestore collection name
        .doc(doc.reference.id)
        .update({'order': i});
  }
}

  • Add the arguments to Flutterflow as well:

  • The displayedList argument will take a list of documents from the "TestLocations" collection:

  • Now go the Actions page of your ListView, and select the "OnReorder" tab. Then as your first action select our newly created custom action.

  • For your parameters, select as follow:

    • Same goes for the newIndex of course. Flutterflow lets you select these easily.

  • Now you're all set! The end result:

Good luck!

10
7 replies