FlutterFlow supports infinite scrolling on ListViews via the 'Paginate Query' toggle in the Backend Query settings. Set a queryLimit (e.g., 20) and enable Paginate Query — FlutterFlow automatically loads the next page of Firestore documents when the user scrolls near the bottom. Without a queryLimit, Firestore loads ALL documents at once, which causes slow performance and high costs.
Infinite Scrolling with Firestore Pagination in FlutterFlow
Infinite scrolling is the pattern where a list loads a small batch of items initially and automatically fetches more as the user scrolls toward the bottom. Without it, a Firestore query on a collection with 10,000 documents loads all 10,000 at once — causing a 5-10 second load time, high memory usage, and a Firestore bill for 10,000 reads every page view. FlutterFlow has a built-in pagination system for ListViews that works with Firestore's cursor-based pagination (startAfterDocument). You configure it in the Backend Query settings with two settings: queryLimit (how many items to load per page) and the Paginate Query toggle (auto-load the next page on scroll). This guide shows the full setup plus a manual Load More button alternative.
Prerequisites
- FlutterFlow project with Firebase and Firestore connected
- A Firestore collection with multiple documents to paginate through
- A page with a ListView (or Repeating Group set to ListView type)
- Understanding of FlutterFlow Backend Queries on widgets
Step-by-step guide
Add a Backend Query to your ListView and set queryLimit
Add a Backend Query to your ListView and set queryLimit
Navigate to the page with your list and select the ListView (or Repeating Group) widget. In the properties panel on the right, find the 'Backend Query' section and tap 'Add Query'. Choose 'Firestore Collection', select your collection (e.g., 'posts'), and configure any filters you need (e.g., status equals 'published'). Before enabling pagination, you must set a queryLimit. Scroll down in the Backend Query settings and find the 'Limit' or 'Query Limit' field. Set it to a reasonable page size — 15 to 25 items is a good default. If you leave this field empty, Firestore loads the entire collection on every page view, regardless of whether pagination is enabled.
Expected result: The ListView Backend Query has a collection selected, any necessary filters applied, and a queryLimit set to 15-25.
Set the Firestore order for consistent pagination
Set the Firestore order for consistent pagination
Pagination requires a consistent ordering of results — without an order, Firestore may return different documents on different pages as documents are added or updated. In the Backend Query settings, add an 'Order By' clause. For a feed or news-style list, order by 'timestamp' descending (newest first). For alphabetical lists, order by 'name' ascending. The field you order by must have a Firestore index — Firestore automatically creates single-field indexes, but composite indexes (multiple fields) require manual creation in the Firebase Console. Check the Flutter DevTools console for a 'requires a composite index' error and follow the link in the error to create it automatically.
Expected result: The Backend Query has an Order By clause configured. Query results are returned in consistent order.
Enable the Paginate Query toggle
Enable the Paginate Query toggle
In the Backend Query settings for your ListView, find the 'Paginate Query' toggle (it may also be labeled 'Infinite Scroll' or 'Load More'). Switch it to ON. When enabled, FlutterFlow wraps the ListView in a paginated scroll controller that automatically detects when the user has scrolled within a threshold of the last loaded item (typically within 200-300px of the bottom). When triggered, it fires the next Firestore query starting after the last loaded document (using Firestore's startAfterDocument cursor). The new items are appended to the existing list — users see a seamless continuous scroll experience. A loading indicator appears at the bottom of the list while the next page loads.
Expected result: The Paginate Query toggle is ON. When you scroll to the bottom of the list in Test Mode, a loading indicator appears briefly and additional items are appended.
Customize the loading and empty state indicators
Customize the loading and empty state indicators
FlutterFlow shows a default circular progress indicator at the bottom of the list while loading the next page, and a standard 'no items' message when the collection is empty. You can customize both. Select the ListView widget and look for 'Empty List Widget' in the properties panel — tap 'Create Empty List Widget' to add a custom message with an icon or illustration. For the loading indicator, look for 'Loader Widget' or similar — replace the default spinner with a shimmer skeleton matching your item layout for a more polished experience. Also handle the 'end of list' state (all documents loaded) by checking if the last page returned fewer items than the queryLimit.
Expected result: The list shows a custom empty state when there are no documents, and the pagination loading indicator is styled appropriately.
Alternative: Add a manual Load More button
Alternative: Add a manual Load More button
Some UX patterns prefer a 'Load More' button at the bottom instead of automatic infinite scroll. For this pattern, disable the Paginate Query toggle and instead manually control pagination. Add a 'loadedCount' App State variable (integer) initialized to your queryLimit (e.g., 20). Add a 'Load More' button below the ListView. In the button's Action Flow, add an 'Update App State' action that sets loadedCount to loadedCount + pageSize (another App State variable set to 20). In the ListView's Backend Query, use loadedCount as the queryLimit value. Each time the user taps 'Load More', the limit increases by 20 and the query re-runs. Hide the button using Conditional Visibility when the result count equals the total document count.
Expected result: A 'Load More' button appears below the list. Tapping it increases the queryLimit in App State, causing the Backend Query to re-run with more results.
Complete working example
1// FlutterFlow infinite scroll is configured visually — this file documents2// the Firestore query equivalent and the custom startAfterDocument logic3// for reference or Custom Action use.45// ─── Equivalent Firestore query for page 1 ───────────────────────────────────6// This is what FlutterFlow generates under the hood for the first page:7//8// FirebaseFirestore.instance9// .collection('posts')10// .where('status', isEqualTo: 'published')11// .orderBy('timestamp', descending: true)12// .limit(20) // queryLimit13// .get();1415// ─── Equivalent Firestore query for page 2+ ──────────────────────────────────16// After scrolling, FlutterFlow uses the last document as a cursor:17//18// FirebaseFirestore.instance19// .collection('posts')20// .where('status', isEqualTo: 'published')21// .orderBy('timestamp', descending: true)22// .startAfterDocument(lastDocument) // cursor from previous page23// .limit(20)24// .get();2526// ─── Custom Action: loadMorePosts (manual pagination example) ─────────────────27// Use this if you implement a Load More button pattern instead of auto-scroll.28// Parameters:29// currentCount (int) — current number of loaded items30// pageSize (int) — items per page, e.g. 2031// Returns: void (updates App State externally)32//33// In FlutterFlow: wire to Load More button → Update App State → increase limit3435import 'package:cloud_firestore/cloud_firestore.dart';3637Future<List<DocumentSnapshot>> loadMorePosts(38 DocumentSnapshot? lastDocument,39 int pageSize,40) async {41 Query query = FirebaseFirestore.instance42 .collection('posts')43 .where('status', isEqualTo: 'published')44 .orderBy('timestamp', descending: true)45 .limit(pageSize);4647 if (lastDocument != null) {48 query = query.startAfterDocument(lastDocument);49 debugPrint('loadMorePosts: loading after doc ${lastDocument.id}');50 } else {51 debugPrint('loadMorePosts: loading first page');52 }5354 try {55 final snapshot = await query.get();56 debugPrint('loadMorePosts: got ${snapshot.docs.length} docs');57 return snapshot.docs;58 } catch (e) {59 debugPrint('loadMorePosts error: $e');60 return [];61 }62}6364// ─── FlutterFlow configuration checklist ─────────────────────────────────────65// 1. ListView Backend Query:66// - Collection: your collection name67// - Filters: any field filters needed68// - Order By: timestamp descending (or other consistent field)69// - Query Limit: 15-2570// - Paginate Query: ON71// 2. Test with queryLimit = 3 to verify pagination triggers quickly72// 3. Check DevTools console for composite index errors73// 4. Reset queryLimit to production value before publishingCommon mistakes
Why it's a problem: Not setting a queryLimit on a Firestore Backend Query in a ListView
How to avoid: Always set a queryLimit of 15-25 on every ListView Backend Query. Enable Paginate Query to load subsequent pages as the user scrolls. This is the single most important performance optimization for FlutterFlow apps with Firestore data.
Why it's a problem: Enabling Paginate Query without setting an Order By clause
How to avoid: Always pair Paginate Query with an Order By clause. Choose a field with consistent, unique-enough values (timestamp is ideal). If your data does not have a natural timestamp, add a 'createdAt' field set to FieldValue.serverTimestamp() on document creation.
Why it's a problem: Using the manual loadedCount App State approach for large collections without hiding the Load More button when all items are loaded
How to avoid: Track the total document count and hide the Load More button with Conditional Visibility when loadedCount is greater than or equal to the total count. Query the collection's count with a count() aggregation query or store the count in a metadata document.
Why it's a problem: Setting queryLimit too high (e.g., 500) thinking it improves performance
How to avoid: Set queryLimit to the number of items that fill 1.5-2 screens of height (typically 15-25). This ensures there is always content below the viewport while keeping the initial load fast and cheap.
Best practices
- Always set queryLimit on every ListView Backend Query — even if you think your collection will stay small, unbounded queries are a performance time bomb.
- Use FieldValue.serverTimestamp() for your Order By field rather than client-provided dates — this ensures consistent, manipulation-resistant ordering.
- Add a loading skeleton or shimmer effect while the next page loads instead of an abrupt empty gap at the bottom of the list.
- Show an 'End of list' indicator when all documents are loaded — users need to know they have reached the bottom of the content.
- Test pagination with a queryLimit of 3 during development to quickly verify that the next-page trigger fires correctly, then reset to the production limit.
- Monitor Firestore reads in the Firebase Console Usage tab — a spike in reads per page view often means a missing queryLimit somewhere in the app.
- For search results, consider debouncing the search input (wait 300ms after the last keystroke before querying) to avoid a Firestore read on every character typed.
- Pre-fetch the next page when the user is halfway through the current page (not at the very bottom) to eliminate the loading delay between pages.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I have a FlutterFlow app with a Firestore 'posts' collection. I want to implement infinite scrolling on a ListView that shows the posts ordered by timestamp (newest first) with 20 items per page. The posts have fields: title (String), body (String), authorName (String), timestamp (Timestamp), status (String). How do I configure the Backend Query in FlutterFlow — what settings should I use for Order By, Query Limit, and Paginate Query? Also explain what the Paginate Query toggle does under the hood.
I'm setting up a FlutterFlow ListView with Firestore pagination. My collection is 'products' with fields: name, price, imageUrl, timestamp. Walk me through exactly which settings to configure in the FlutterFlow Backend Query panel to get infinite scrolling working — the order of steps, which toggle to enable, what query limit to set, and how to test that pagination is working correctly. Use only FlutterFlow visual builder terms, not code.
Frequently asked questions
What is the Paginate Query toggle in FlutterFlow?
When enabled, the Paginate Query toggle makes FlutterFlow's ListView automatically detect when the user has scrolled near the bottom of the loaded items and fires a new Firestore query to load the next batch (using startAfterDocument cursor pagination). New items are appended to the existing list seamlessly. Without this toggle, the list shows only the first queryLimit items with no way to see more.
What queryLimit should I use?
For most apps, 15-25 items per page is the right range. Use fewer (10-15) for tall item layouts like product cards or full-width image posts. Use more (20-30) for compact list items like chat messages or notification rows. The goal is to fill 1.5-2 screens of content so users always have something to see while the next page loads.
Does infinite scrolling work with Supabase in FlutterFlow?
Yes. FlutterFlow supports Supabase pagination as well as Firestore. In the Supabase Backend Query settings, set the 'Limit' field and enable the equivalent pagination toggle. Supabase uses offset-based pagination (LIMIT x OFFSET y) rather than Firestore's cursor-based approach. The FlutterFlow UI for enabling it is similar to the Firestore approach.
Why do I see duplicate items when scrolling through a paginated list?
Duplicates happen when there is no consistent Order By clause. Without a stable order, Firestore's pagination cursor may land on a different position when a new document is inserted between page loads. Fix: add an Order By clause using a timestamp field that does not change after document creation. This anchors the pagination cursor reliably.
Can I combine filtering and pagination?
Yes. Add your filter conditions in the Backend Query (e.g., where status equals 'published') before setting queryLimit and enabling Paginate Query. Firestore applies the filter before the pagination limit, so each page of results is filtered correctly. Note that combining multiple field filters may require a composite index in Firestore — check the DevTools console for an error with a direct link to create the index.
How do I show a message when there are no more items to load?
FlutterFlow's Paginate Query does not have a built-in 'end of list' indicator. A simple approach: compare the number of loaded items to the total document count. If the last page returned fewer documents than queryLimit, you are at the end. Show a Text widget at the bottom of the list using Conditional Visibility that appears when this condition is true: lastPageCount less than queryLimit.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation