How to Implement Custom User Timelines in FlutterFlow

Create a top-level Firestore collection named timeline_events. Each document should contain: authorId (String), authorName (String), authorAvatarUrl (String), eventType (String — e.g. 'post', 'like', 'follow', 'comment'), contentText (String), contentImageUrl (String, optional), targetId (String — the ID of the post or user the event is about), createdAt (Timestamp). Using a top-level collection rather than subcollections makes cross-user queries possible without collection group indexes. In FlutterFlow's Firestore panel, add this collection and all fields with the correct types. Create a composite index on authorId + createdAt descending for efficient per-user queries.

Fan-out-on-read means you fetch events from multiple authors at read time rather than pre-writing them to each follower's feed. In FlutterFlow, this requires a Custom Action. The action fetches the list of userIds the current user follows (from their following subcollection), then queries timeline_events where authorId is in that list, ordered by createdAt descending, limited to 20 items. Firestore's whereIn operator supports up to 30 values per query — if a user follows more than 30 accounts, you will need to batch the queries and merge the results in Dart code. Store the returned list in a Page State variable of type List of Firestore Documents.

1// Custom Action: fetchTimeline
2// Returns List of timeline_events documents for the current user's feed
3import 'package:cloud_firestore/cloud_firestore.dart';
4import 'package:firebase_auth/firebase_auth.dart';
5
6Future<List<Map<String, dynamic>>> fetchTimeline() async {
7  final uid = FirebaseAuth.instance.currentUser?.uid;
8  if (uid == null) return [];
9
10  // Step 1: get list of followed userIds
11  final followingSnap = await FirebaseFirestore.instance
12      .collection('users')
13      .doc(uid)
14      .collection('following')
15      .get();
16  final followingIds = followingSnap.docs.map((d) => d.id).toList();
17  if (followingIds.isEmpty) return [];
18
19  // Firestore whereIn limit: 30. Batch if needed.
20  final batch = followingIds.take(30).toList();
21
22  // Step 2: query timeline_events
23  final eventsSnap = await FirebaseFirestore.instance
24      .collection('timeline_events')
25      .where('authorId', whereIn: batch)
26      .orderBy('createdAt', descending: true)
27      .limit(20)
28      .get();
29
30  return eventsSnap.docs.map((d) => {'id': d.id, ...d.data()}).toList();
31}

Create a page named Timeline. Add a ListView widget with Infinite Scroll enabled. Set the ListView's data source to the Page State variable populated by your fetchTimeline action. Inside each list item, build a Row with an avatar CircleImage on the left and a Column on the right containing: authorName (Bold text), a relative timestamp (use a Custom Function to convert createdAt to '2 hours ago' style), and contentText. For images, add a conditional Image widget that only appears when contentImageUrl is not empty. Set the ListView's On Last Item Visible action to call your fetchTimeline action again with an offset to append the next 20 items.

In FlutterFlow, wrap your ListView in a RefreshIndicator widget (found under Layout widgets). Set the On Refresh action to: (1) clear the Page State list variable, (2) call fetchTimeline again to reload from the beginning. This resets the pagination and replaces the list with fresh data. The RefreshIndicator shows a standard pull-down spinner that users expect from native social apps. Make sure your fetchTimeline action sets the Page State variable rather than appending to it when called from the refresh path — use a Boolean Page State flag isRefreshing to distinguish between the two call sites.

Whenever a user creates a post, likes, follows, or comments, write a document to timeline_events. Do this in the same Action Flow that handles the primary write. For example, when a user submits a new post: first create the post document in your posts collection, then add a second Firestore Create Document action that writes to timeline_events with eventType 'post' and the post content. This is the fan-out-on-write step for the author's own events. Because you are only writing one document (not one per follower), it scales indefinitely regardless of follower count.