How to Build a Personalized News Feed in FlutterFlow

On the onboarding page, add a ChoiceChips widget with options matching your article categories: Tech, Science, Business, Sports, Entertainment, Health, Politics. Set the ChoiceChips to allow multiple selection and bind the selected values to a Page State variable selectedInterests (list of strings). On the Continue button, update the current user's Firestore document to set the interests array field to selectedInterests. Also store this in App State so the feed can query it immediately without an extra Firestore read.

Create a FeedPage with a ListView bound to a Backend Query on the articles collection. Set the query to filter where category is in the current user's interests array, ordered by publishedAt descending. Each article card shows: an Image for the thumbnail, a Text for the category label (styled as a colored chip), the headline Text, a brief summary Text, and the author name with publish date. If the user has no interests set, show all articles sorted by publishedAt as a fallback.

Add ToggleButtons at the top of the feed page with two options: For You and Latest. Latest uses the basic chronological query from the previous step. For You requires a Cloud Function that pre-computes relevance scores. The function runs on a schedule or on article publish. It scores each article per user: interest match gets 10 points, recency within 24 hours gets 5 points, articles in categories the user has liked before get a bonus. Results are written to a users/{uid}/feed_ranked subcollection with articleId and score. The For You toggle queries this subcollection ordered by score descending.

1// Cloud Function: computeUserFeedRanking
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.computeUserFeedRanking = functions.pubsub
7  .schedule('every 1 hours').onRun(async () => {
8    const usersSnap = await admin.firestore()
9      .collection('users').get();
10    
11    for (const userDoc of usersSnap.docs) {
12      const interests = userDoc.data().interests || [];
13      const articlesSnap = await admin.firestore()
14        .collection('articles')
15        .where('category', 'in', interests.slice(0, 10))
16        .orderBy('publishedAt', 'desc')
17        .limit(50).get();
18      
19      const batch = admin.firestore().batch();
20      for (const article of articlesSnap.docs) {
21        const score = calculateScore(article.data(), userDoc.data());
22        const ref = userDoc.ref
23          .collection('feed_ranked')
24          .doc(article.id);
25        batch.set(ref, { articleId: article.id, score });
26      }
27      await batch.commit();
28    }
29  });

Create a Firestore collection user_engagements with fields: userId, articleId, eventType (view, like, share), category, timestamp. When a user taps an article to read it, create an engagement doc with eventType 'view'. Add a heart IconButton that toggles a like engagement. Add a share IconButton that logs a share event. The Cloud Function from the previous step reads these engagement docs to boost scores for categories the user interacts with most. For example, if a user reads 10 Tech articles but only 2 Sports articles, Tech articles get a higher relevance boost in future feed computations.

Add a settings section where users can mute specific topics. Create a Firestore field mutedTopics (array of strings) on the user document. On the feed page or in settings, show each category with a Mute/Unmute toggle (Switch widget). When a topic is muted, add it to the mutedTopics array. In the feed Backend Query, add a where clause excluding articles whose category is in mutedTopics. Alternatively, filter client-side if Firestore query limitations prevent combining whereIn with whereNotIn. This gives users control over their feed without changing their core interests.

Wrap the feed ListView in a RefreshIndicator widget. On refresh, re-run the Backend Query to fetch the latest articles from Firestore. Display a brief loading indicator while the query executes. This lets users manually check for new content without waiting for automatic updates. For the For You feed, the refresh triggers a re-read of the feed_ranked subcollection. For Latest, it re-runs the chronological query with the latest publishedAt results.