How to Build a Personalized User Interface Based on Behavior in FlutterFlow

Create a user_events collection with fields: userId (String), eventType (String, values like 'feature_tap', 'page_view', 'action_complete'), featureName (String, e.g. 'calendar', 'chat', 'analytics'), timestamp (Timestamp), sessionId (String). Also add a user_preferences document under each user with fields: featureScores (Map of featureName to integer), uiMode (String: 'simplified' or 'advanced'), totalSessions (Integer), lastAnalyzed (Timestamp). The events collection captures raw behavior while preferences stores the computed results.

On every major feature tap, page navigation, and completed action, add a Custom Action that creates a document in user_events. For example, when a user taps the Calendar tab, log eventType: 'feature_tap', featureName: 'calendar'. When they complete a task, log 'action_complete' with the feature name. Use Action Triggers on buttons, tab changes, and page loads. Keep event names consistent across the app. This builds the raw dataset that the scoring function analyzes.

Create a Cloud Function triggered on schedule (daily) or on-demand. It queries user_events for a given userId from the last 30 days, counts interactions per featureName, and produces a featureScores map (e.g. {calendar: 85, chat: 42, analytics: 12}). Set uiMode to 'advanced' if totalSessions > 20, otherwise 'simplified'. Write results to user_preferences. The function also determines widget display order by sorting features by score descending.

1// Cloud Function: analyzeUserBehavior
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.analyzeUserBehavior = functions.pubsub
6  .schedule('every 24 hours').onRun(async () => {
7    const usersSnap = await admin.firestore()
8      .collection('users').get();
9    for (const userDoc of usersSnap.docs) {
10      const uid = userDoc.id;
11      const since = new Date();
12      since.setDate(since.getDate() - 30);
13      const events = await admin.firestore()
14        .collection('user_events')
15        .where('userId', '==', uid)
16        .where('timestamp', '>=', since)
17        .get();
18      const scores = {};
19      events.forEach(e => {
20        const f = e.data().featureName;
21        scores[f] = (scores[f] || 0) + 1;
22      });
23      const totalSessions = events.size;
24      await admin.firestore()
25        .doc(`user_preferences/${uid}`)
26        .set({
27          featureScores: scores,
28          uiMode: totalSessions > 20
29            ? 'advanced' : 'simplified',
30          totalSessions,
31          lastAnalyzed: admin.firestore
32            .FieldValue.serverTimestamp()
33        }, { merge: true });
34    }
35  });

In your app's initial page or splash screen, add an Action Flow on Page Load: query the user_preferences document for the current user. Store the featureScores map and uiMode string into App State variables (featureScores as JSON, uiMode as String). Also compute a featureOrder list by sorting feature names by their score descending and store that as a String List in App State. If no preferences exist yet (new user with fewer than 5 interactions), set default values with popular features first and uiMode as 'simplified'.

On your home page, structure feature sections as individual Containers inside a Column. For each Container, set its Order property using the index from the featureOrder App State list. The feature with the highest score appears at the top. For features the user has never interacted with, place them at the bottom with a subtle 'Discover' label. This way the home page automatically rearranges to put the user's most-used features front and center without any manual configuration.

For advanced features like analytics dashboards, bulk actions, or developer settings, set Conditional Visibility: show only when App State uiMode equals 'advanced'. For the simplified mode, show helper tooltips and onboarding hints by setting visibility to uiMode equals 'simplified'. This creates two distinct experiences from the same page. Users naturally graduate from simplified to advanced as their session count crosses the threshold. Add a manual toggle switch in Settings so power users can override the automatic mode.