FlutterFire UI for Firestore
This page is archived and might not reflect the latest version of the FlutterFire plugins. You can find the latest information on GitHub:
FlutterFire UI for Firestore enables you to easily integrate your application UI with your Cloud Firestore database.
To get started with Firebase UI for Firestore, you first need to ensure the
cloud_firestore plugin is
installed on your project.
If you haven't already done so, install the
flutterfire_ui package by running the following command in your terminal:
If you haven't already done so, you'll need to initialize Firebase before using FlutterFire UI. You can learn more about this in the FlutterFire Overview documentation, for example:
Next, import the FlutterFire UI for Firestore package:
Infinite scrolling is the concept of continuously loading more data from a database as the user scrolls through your application. This is useful when you have a large datasets, as it enables the application to render faster as well as reduces network overhead for data the user might never see.
FlutterFire UI for Firestore provides a convenient way to implement infinite scrolling
using the Firestore database with the
At a minimum the widget accepts a Firestore query and an item builder. As the user scrolls down (or across) your list, more data will be automatically fetched from the database (whilst respecting query conditions such as ordering).
To get started, create a query and provide an item builder. For this example, we'll display
a list of users from the
FirestoreListView widget is built on-top of Flutter's own
widget, and accepts the same parameters which we can optionally provide. For example, to change the scroll-direction to horizontal:
#Controlling page size
By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a
In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) of an individual item is large, it is recommended to lower the page size.
#Using typed responses
cloud_firestore plugin allows us to type the responses we receive from the database using the
withConverter API. For more information,
see the documentation.
FirestoreListView works with this out of the box. Simply provide a converted query to the widget, for example:
#Loading and error handling
By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown
(such as permission denied). You can override this behavior by providing a
errorBuilder parameters to the widget:
In many cases, the
FirestoreListView widget is enough to render simple lists of collection data.
However, you may have specific requirements which require more control over the widget's behavior
(such as using a
FirestoreQueryBuilder provides the building blocks for advanced configuration at the expense of
requiring more boilerplate code. The widget does not provide any underlying list implementation, instead
you are expected to provide this yourself.
Much like the
FirestoreListView widget, provide a query and builder:
The main difference to note here is that the
builder property returns a
than an individual document. The builder returns the current state of the entire query, such as whether
data is loading, an error has occurred and the documents.
This requires us to implement our own list based implementation. Firstly, let's handle the loading and error states:
Next, we now need to return a list-view based implementation for our application to display the data. For example,
to display a grid of users, we can use the
With more power comes more responsibility:
- Within the
GridView, we have to manually ensure that we call the
fetchMore()method on the snapshot when more data is required.
FirestoreQueryBuilderdoes not provide a list-view based handler, instead you must provide your own implementation.