How to Sync User Data Across Devices in FlutterFlow

FlutterFlow has three places to store data, each with different persistence and sync behavior. App State lives only in device memory — it is reset every time the app restarts and never synchronizes between devices. Page State is even more temporary — it is reset whenever the user navigates away from that page. Firestore is a cloud database — data persists permanently, syncs across all devices in real time, and survives app restarts. The decision rule is simple: if the data should exist tomorrow or on another device, it must go in Firestore. App State is only for temporary UI state that does not need to survive navigation (like whether a dropdown is open, or which tab is selected).

Identify all App State variables that represent user preferences or settings: dark mode toggle, notification preferences, language selection, accessibility settings, default filters, and saved layouts. For each one, add a corresponding field to your users Firestore collection schema in FlutterFlow. On app startup (main page On Load action), fetch the current user document and populate App State from the Firestore values. When the user changes a preference, update both the App State variable (for immediate UI response) and the Firestore user document (for persistence and cross-device sync). This two-write pattern gives instant UI updates while ensuring persistence.

1// Pattern: load user preferences from Firestore on app start
2// and save changes back to Firestore when updated
3import 'package:cloud_firestore/cloud_firestore.dart';
4import 'package:firebase_auth/firebase_auth.dart';
5
6// Load preferences on startup
7Future<Map<String, dynamic>> loadUserPreferences() async {
8  final uid = FirebaseAuth.instance.currentUser?.uid;
9  if (uid == null) return {};
10
11  final snap = await FirebaseFirestore.instance
12      .collection('users')
13      .doc(uid)
14      .get();
15
16  final data = snap.data() ?? {};
17  return {
18    'dark_mode': data['preferences']?['dark_mode'] ?? false,
19    'language': data['preferences']?['language'] ?? 'en',
20    'notifications_enabled': data['preferences']?['notifications_enabled'] ?? true,
21    'default_currency': data['preferences']?['default_currency'] ?? 'USD',
22  };
23}
24
25// Save a preference change
26Future<void> savePreference(String key, dynamic value) async {
27  final uid = FirebaseAuth.instance.currentUser?.uid;
28  if (uid == null) return;
29
30  await FirebaseFirestore.instance
31      .collection('users')
32      .doc(uid)
33      .update({'preferences.$key': value});
34}

Firestore offline persistence allows your app to read and write data even without an internet connection. Pending writes queue locally and sync automatically when connectivity returns. In FlutterFlow, enable offline persistence by adding a Custom Action that runs during app initialization. Set PersistenceSettings with the cacheSizeBytes configuration. With persistence enabled, your app's Firestore listeners serve data from the local cache when offline, so the UI never goes blank due to connectivity issues. Data written offline appears in the UI instantly from cache and then syncs to the server when back online.

1import 'package:cloud_firestore/cloud_firestore.dart';
2
3Future<void> enableFirestorePersistence() async {
4  try {
5    FirebaseFirestore.instance.settings = const Settings(
6      persistenceEnabled: true,
7      cacheSizeBytes: Settings.CACHE_SIZE_UNLIMITED,
8    );
9  } catch (e) {
10    // Persistence may already be enabled or not supported on this platform
11    // This is a non-fatal error
12    print('Firestore persistence setup: $e');
13  }
14}

In FlutterFlow, any widget bound to a Firestore document or collection automatically receives real-time updates via StreamBuilder. When the user's Firestore document changes on one device, the StreamBuilder on all other signed-in devices receives the update within milliseconds and rebuilds the relevant widgets. To wire this up, make sure your preference-displaying widgets (like a dark mode toggle or language selector) read from the Firestore document stream rather than only from App State. Use FlutterFlow's Document reference binding on the current user's document to automatically propagate changes across all devices.

When two devices edit the same user data while offline, they may produce conflicting writes that both need to sync when reconnecting. For most user preference data, last-write-wins (Firestore's default) is acceptable — the most recent change wins. But for data like read counts, bookmark lists, or shopping carts, use FieldValue.increment() and FieldValue.arrayUnion() so Firestore can merge the changes atomically rather than overwriting. For example, if the user adds items to a favorites list on two devices while offline, arrayUnion() merges both additions when they reconnect instead of one list overwriting the other.

1import 'package:cloud_firestore/cloud_firestore.dart';
2import 'package:firebase_auth/firebase_auth.dart';
3
4// Safe: add to favorites on two offline devices — both additions preserved
5Future<void> addToFavorites(String itemId) async {
6  final uid = FirebaseAuth.instance.currentUser?.uid;
7  if (uid == null) return;
8
9  await FirebaseFirestore.instance
10      .collection('users')
11      .doc(uid)
12      .update({
13        'favorites': FieldValue.arrayUnion([itemId]),
14        'favorites_count': FieldValue.increment(1),
15      });
16}
17
18// Safe: remove from favorites
19Future<void> removeFromFavorites(String itemId) async {
20  final uid = FirebaseAuth.instance.currentUser?.uid;
21  if (uid == null) return;
22
23  await FirebaseFirestore.instance
24      .collection('users')
25      .doc(uid)
26      .update({
27        'favorites': FieldValue.arrayRemove([itemId]),
28        'favorites_count': FieldValue.increment(-1),
29      });
30}