Basic Reorderable list from Firestore Documents using only inbuilt Widgets. 13th March 2019

reorder_list.dart

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.indigo,
        accentColor: Colors.pinkAccent,
      ),
      home: ExampleScreen(),
    ),
  );
}

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: ReorderableFirebaseList(
          collection: Firestore.instance.collection('items'),
          indexKey: 'pos',
          itemBuilder: (BuildContext context, int index, DocumentSnapshot doc) {
            return ListTile(
              key: Key(doc.documentID),
              title: Text(doc.data['title']),
            );
          },
        ),
      ),
    );
  }
}

typedef ReorderableWidgetBuilder = Widget Function(BuildContext context, int index, DocumentSnapshot doc);

class ReorderableFirebaseList extends StatefulWidget {
  const ReorderableFirebaseList({
    Key key,
    @required this.collection,
    @required this.indexKey,
    @required this.itemBuilder,
    this.descending = false,
  }) : super(key: key);

  final CollectionReference collection;
  final String indexKey;
  final bool descending;
  final ReorderableWidgetBuilder itemBuilder;

  @override
  _ReorderableFirebaseListState createState() => _ReorderableFirebaseListState();
}

class _ReorderableFirebaseListState extends State<ReorderableFirebaseList> {
  List<DocumentSnapshot> _docs;
  Future _saving;

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _saving,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.none || snapshot.connectionState == ConnectionState.done) {
          return StreamBuilder<QuerySnapshot>(
            stream: widget.collection.orderBy(widget.indexKey, descending: widget.descending).snapshots(),
            builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasData) {
                _docs = snapshot.data.documents;
                return ReorderableListView(
                  onReorder: _onReorder,
                  children: List.generate(_docs.length, (int index) {
                    return widget.itemBuilder(context, index, _docs[index]);
                  }),
                );
              } else {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  void _onReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) newIndex -= 1;
    _docs.insert(newIndex, _docs.removeAt(oldIndex));
    final futures = <Future>[];
    for (int pos = 0; pos < _docs.length; pos++) {
      futures.add(_docs[pos].reference.updateData({widget.indexKey: pos}));
    }
    setState(() {
      _saving = Future.wait(futures);
    });
  }
}

Thanks for this gist. I was thinking, to avoid the reloading after re-arranging the tiles, we can batch the updates rather than awaiting for it. It would look something like this:

void _onReorder(int oldIndex, int newIndex) {
  if (oldIndex < newIndex) newIndex -= 1;
  _docs.insert(newIndex, _docs.removeAt(oldIndex));
  final batch = Firestore.instance.batch();
  for (int pos = 0; pos < _docs.length; pos++) {
    batch.updateData(_docs[pos].reference, {widget.indexKey: pos});
  }
  batch.commit();
}

I understand the need to having the futures to complete to avoid any mismatch of the local docs with firestore docs. What do you think?

This was super useful, thanks guys 👍

Does this require giving the docs special ids to make them work as index keys or is autoID sufficient?

I need to use the ".where" to filter data. However, when I change CollectionReference to Query it does not reorder anymore. Is there a solution?

Would just like to add that with null safety and @HappyHarris's batched _onReorder() function, the FutureBuilder above the StreamBuilder becomes deprecated.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

typedef ReorderableWidgetBuilder = Widget Function(
    BuildContext context, int index, DocumentSnapshot doc);

class ReorderableFirebaseList extends StatefulWidget {
  const ReorderableFirebaseList({
    Key? key,
    required this.collection,
    required this.indexKey,
    required this.itemBuilder,
    this.descending = false,
    this.emptyWidget,
  }) : super(key: key);

  final CollectionReference collection;
  final String indexKey;
  final bool descending;
  final ReorderableWidgetBuilder itemBuilder;
  final Widget? emptyWidget;

  @override
  _ReorderableFirebaseListState createState() =>
      _ReorderableFirebaseListState();
}

class _ReorderableFirebaseListState extends State<ReorderableFirebaseList> {
  late List<DocumentSnapshot> _docs;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: widget.collection
          .orderBy(widget.indexKey, descending: widget.descending)
          .snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          _docs = snapshot.data!.docs;
          if (_docs.isNotEmpty) {
            return ReorderableListView(
              onReorder: _onReorder,
              children: List.generate(_docs.length, (int index) {
                return widget.itemBuilder(context, index, _docs[index]);
              }),
            );
          } else {
            return widget.emptyWidget ?? Container();
          }
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  void _onReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) newIndex -= 1;
    _docs.insert(newIndex, _docs.removeAt(oldIndex));
    final batch = FirebaseFirestore.instance.batch();
    for (int pos = 0; pos < _docs.length; pos++) {
      batch.update(_docs[pos].reference, {widget.indexKey: pos});
    }
    batch.commit();
  }
}

Does this require giving the docs special ids to make them work as index keys or is autoID sufficient?

I have same doubt so can you please help if you have solved?

Guys thanks a lot for this code, really helpful.

Thanks a lot