Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic Reorderable list from Firestore Documents using only inbuilt Widgets. 13th March 2019
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);
});
}
}
@siliconsorcery

This comment has been minimized.

Copy link

@siliconsorcery siliconsorcery commented Mar 30, 2019

Example needs access to a Google Firebase - Cloud Firestore

The data collection looks something like:

collection: "items" [
    "uid0001": [
      title: String: "Hello World",
      pos: Number: 0
   ],
    "uid0002": [
      title: String: "Mars Attacks",
      pos: Number: 1
   ],
    "uid0003": [
      title: String: "Mercury Rising",
      pos: Number: 2
   ],
 ]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.