I found a really cool and smart solution for showing a ListView that is expandable with its data coming from its subcollection in Firestore. Very dynamic and works very well! This is all thanks to Rainer Wittmann and Jobel on Stackoverflow, and I’ve been updating it once more to adjust to the latest Fluter and Firestore versions. Let’s get to it.
Before starting I just wanna tell the dependencies and what versions I am running since they are updating this stuff constantly and changing everything so you have to modify it so much keep up with all the versions.
I am using flutter 2.2.2 with these relevant dependencies for firestore.
firebase_core: ^1.3.0
cloud_firestore: ^2.2.2
First of all, you would want a collection, let us name it projects, and in it a subcollection called items using Firestore. We are going to use the field we name Title for projects and inside the Items subcollection we are going to have a field called ItemName. We will then declare a class called ProjectList with returns a Widget which displays the data in a ListView with the help of StreamBuilder.
So first of, let’s say you have an application like this with Firebase Initialized with nothing in it other than a Text inside the MyHomePage:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(App());
}
class App extends StatefulWidget {
// Create the initialization Future outside of `build`:
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
/// The future is part of the state of our widget. We should not call `initializeApp`
/// directly inside [build].
final Future<FirebaseApp> _initialization = Firebase.initializeApp();
@override
Widget build(BuildContext context) {
return FutureBuilder(
// Initialize FlutterFire:
future: _initialization,
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
print("err!");
return Container();
}
// Once complete, show your application
if (snapshot.connectionState == ConnectionState.done) {
return MyApp();
}
// Otherwise, show something whilst waiting for initialization to complete
return Container();
},
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FileIdea Expandable ListView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'FileIdea Expandable ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Text("My widget place"));
}
}
Then we will add this highlighted code to our project/app:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(App());
}
class App extends StatefulWidget {
// Create the initialization Future outside of `build`:
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
/// The future is part of the state of our widget. We should not call `initializeApp`
/// directly inside [build].
final Future<FirebaseApp> _initialization = Firebase.initializeApp();
@override
Widget build(BuildContext context) {
return FutureBuilder(
// Initialize FlutterFire:
future: _initialization,
builder: (context, snapshot) {
// Check for errors
if (snapshot.hasError) {
print("err!");
return Container();
}
// Once complete, show your application
if (snapshot.connectionState == ConnectionState.done) {
return MyApp();
}
// Otherwise, show something whilst waiting for initialization to complete
return Container();
},
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FileIdea Expandable ListView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'FileIdea Expandable ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: ProjectList(),
);
}
}
class ExpansionTileList extends StatelessWidget {
final List<DocumentSnapshot> documents;
final FirebaseFirestore firestore = FirebaseFirestore.instance;
ExpansionTileList({required this.documents});
List<Widget> _getChildren() {
List<Widget> children = [];
documents.forEach((doc) {
children.add(
ProjectsExpansionTile(
name: doc['Title'],
projectKey: doc.id,
firestore: firestore,
),
);
});
return children;
}
@override
Widget build(BuildContext context) {
return ListView(
children: _getChildren(),
);
}
}
class ProjectList extends StatelessWidget {
ProjectList();
final FirebaseFirestore firestore = FirebaseFirestore.instance;
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: firestore.collection('projects').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
//final int projectsCount = snapshot.data.documents.length;
List<DocumentSnapshot> documents = snapshot.data!.docs;
return ExpansionTileList(
documents: documents,
);
},
);
}
}
class ProjectsExpansionTile extends StatelessWidget {
ProjectsExpansionTile(
{required this.projectKey, required this.name, required this.firestore});
final String projectKey;
final String name;
final FirebaseFirestore firestore;
@override
Widget build(BuildContext context) {
PageStorageKey _projectKey = PageStorageKey('$projectKey');
return ExpansionTile(
key: _projectKey,
title: Text(
name,
style: TextStyle(fontSize: 28.0),
),
children: <Widget>[
StreamBuilder(
stream: firestore
.collection('projects')
.doc(projectKey)
.collection('items')
.snapshots(),
builder:
(BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
//final int surveysCount = snapshot.data.documents.length;
List<DocumentSnapshot> documents = snapshot.data!.docs;
List<Widget> surveysList = [];
documents.forEach((doc) {
PageStorageKey _surveyKey = new PageStorageKey('${doc.id}');
surveysList.add(ListTile(
key: _surveyKey,
title: Text(doc['ItemName']),
));
});
return Column(children: surveysList);
})
],
);
}
}
And there we go. We have a list showing documents from a collection called projects like this
It is expandable, so we can click on the arrow to the right and it will add new documents from the subcollection called Items in real-time since we are using snapshots().
