{"id":943,"date":"2021-07-02T17:03:13","date_gmt":"2021-07-02T15:03:13","guid":{"rendered":"https:\/\/fileidea.com\/?p=943"},"modified":"2021-07-03T19:39:52","modified_gmt":"2021-07-03T17:39:52","slug":"flutter-expandable-listview-with-data-from-subcollection","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/07\/02\/flutter-expandable-listview-with-data-from-subcollection\/","title":{"rendered":"Flutter Expandable ListView with data from Subcollection"},"content":{"rendered":"\n

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<\/a>\u00a0and Jobel <\/a>on Stackoverflow, and I’ve been updating it once more to adjust to the latest Fluter and Firestore versions. Let’s get to it.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

I am using flutter 2.2.2 with these relevant dependencies for firestore.<\/p>\n\n\n

\nfirebase_core: ^1.3.0\ncloud_firestore: ^2.2.2  \n<\/pre><\/div>\n\n\n
First of all, you would want a collection, let us name it projects<\/strong>, and in it a subcollection called items <\/strong>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.<\/p>\n\n\n\n
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:<\/p>\n\n\n
\nimport 'package:cloud_firestore\/cloud_firestore.dart';\nimport 'package:firebase_core\/firebase_core.dart';\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n  WidgetsFlutterBinding.ensureInitialized();\n  runApp(App());\n}\n\nclass App extends StatefulWidget {\n  \/\/ Create the initialization Future outside of `build`:\n  @override\n  _AppState createState() => _AppState();\n}\n\nclass _AppState extends State<App> {\n  \/\/\/ The future is part of the state of our widget. We should not call `initializeApp`\n  \/\/\/ directly inside [build].\n  final Future<FirebaseApp> _initialization = Firebase.initializeApp();\n\n  @override\n  Widget build(BuildContext context) {\n    return FutureBuilder(\n      \/\/ Initialize FlutterFire:\n      future: _initialization,\n      builder: (context, snapshot) {\n        \/\/ Check for errors\n        if (snapshot.hasError) {\n          print("err!");\n          return Container();\n        }\n\n        \/\/ Once complete, show your application\n        if (snapshot.connectionState == ConnectionState.done) {\n          return MyApp();\n        }\n\n        \/\/ Otherwise, show something whilst waiting for initialization to complete\n        return Container();\n      },\n    );\n  }\n}\n\nclass MyApp extends StatelessWidget {\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Expandable ListView',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(title: 'FileIdea Expandable ListView'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key? key, required this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  @override\n  void initState() {\n    super.initState();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n        appBar: AppBar(\n          \/\/ Here we take the value from the MyHomePage object that was created by\n          \/\/ the App.build method, and use it to set our appbar title.\n          title: Text(widget.title),\n        ),\n        body: Text("My widget place"));\n  }\n}\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Then we will add this highlighted code to our project\/app:<\/p>\n\n\n
\nimport 'package:cloud_firestore\/cloud_firestore.dart';\nimport 'package:firebase_core\/firebase_core.dart';\nimport 'package:flutter\/material.dart';\n\nvoid main() {\n  WidgetsFlutterBinding.ensureInitialized();\n  runApp(App());\n}\n\nclass App extends StatefulWidget {\n  \/\/ Create the initialization Future outside of `build`:\n  @override\n  _AppState createState() => _AppState();\n}\n\nclass _AppState extends State<App> {\n  \/\/\/ The future is part of the state of our widget. We should not call `initializeApp`\n  \/\/\/ directly inside [build].\n  final Future<FirebaseApp> _initialization = Firebase.initializeApp();\n\n  @override\n  Widget build(BuildContext context) {\n    return FutureBuilder(\n      \/\/ Initialize FlutterFire:\n      future: _initialization,\n      builder: (context, snapshot) {\n        \/\/ Check for errors\n        if (snapshot.hasError) {\n          print("err!");\n          return Container();\n        }\n\n        \/\/ Once complete, show your application\n        if (snapshot.connectionState == ConnectionState.done) {\n          return MyApp();\n        }\n\n        \/\/ Otherwise, show something whilst waiting for initialization to complete\n        return Container();\n      },\n    );\n  }\n}\n\nclass MyApp extends StatelessWidget {\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Expandable ListView',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(title: 'FileIdea Expandable ListView'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key? key, required this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  @override\n  void initState() {\n    super.initState();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        \/\/ Here we take the value from the MyHomePage object that was created by\n        \/\/ the App.build method, and use it to set our appbar title.\n        title: Text(widget.title),\n      ),\n      body: ProjectList(),\n    );\n  }\n}\n\nclass ExpansionTileList extends StatelessWidget {\n  final List<DocumentSnapshot> documents;\n  final FirebaseFirestore firestore = FirebaseFirestore.instance;\n\n  ExpansionTileList({required this.documents});\n\n  List<Widget> _getChildren() {\n    List<Widget> children = [];\n    documents.forEach((doc) {\n      children.add(\n        ProjectsExpansionTile(\n          name: doc['Title'],\n          projectKey: doc.id,\n          firestore: firestore,\n        ),\n      );\n    });\n    return children;\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return ListView(\n      children: _getChildren(),\n    );\n  }\n}\n\nclass ProjectList extends StatelessWidget {\n  ProjectList();\n\n  final FirebaseFirestore firestore = FirebaseFirestore.instance;\n\n  @override\n  Widget build(BuildContext context) {\n    return StreamBuilder<QuerySnapshot>(\n      stream: firestore.collection('projects').snapshots(),\n      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {\n        if (!snapshot.hasData) return const Text('Loading...');\n        \/\/final int projectsCount = snapshot.data.documents.length;\n        List<DocumentSnapshot> documents = snapshot.data!.docs;\n        return ExpansionTileList(\n          documents: documents,\n        );\n      },\n    );\n  }\n}\n\nclass ProjectsExpansionTile extends StatelessWidget {\n  ProjectsExpansionTile(\n      {required this.projectKey, required this.name, required this.firestore});\n\n  final String projectKey;\n  final String name;\n  final FirebaseFirestore firestore;\n\n  @override\n  Widget build(BuildContext context) {\n    PageStorageKey _projectKey = PageStorageKey('$projectKey');\n\n    return ExpansionTile(\n      key: _projectKey,\n      title: Text(\n        name,\n        style: TextStyle(fontSize: 28.0),\n      ),\n      children: <Widget>[\n        StreamBuilder(\n            stream: firestore\n                .collection('projects')\n                .doc(projectKey)\n                .collection('items')\n                .snapshots(),\n            builder:\n                (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {\n              if (!snapshot.hasData) return const Text('Loading...');\n              \/\/final int surveysCount = snapshot.data.documents.length;\n              List<DocumentSnapshot> documents = snapshot.data!.docs;\n\n              List<Widget> surveysList = [];\n              documents.forEach((doc) {\n                PageStorageKey _surveyKey = new PageStorageKey('${doc.id}');\n\n                surveysList.add(ListTile(\n                  key: _surveyKey,\n                  title: Text(doc['ItemName']),\n                ));\n              });\n              return Column(children: surveysList);\n            })\n      ],\n    );\n  }\n}\n\n<\/pre><\/div>\n\n\n
And there we go. We have a list showing documents from a collection called projects like this <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 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(). <\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
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\u00a0and Jobel on Stackoverflow, and I’ve been updating it once more to adjust to the latest Fluter and Firestore … <\/p>\n
Continue reading “Flutter Expandable ListView with data from Subcollection”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,10,19,7,48],"tags":[64,63],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/943"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=943"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/943\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}