Question #247MediumFlutter Basics

How to use state synchronization in riverpod across multiple devices in flutter ?

#flutter#state#riverpod

Answer

Riverpod Multi-Device Sync

Synchronize state across devices using a backend service.


Firebase + Riverpod

dart
final userProvider = StreamProvider<User>((ref) {
  return FirebaseFirestore.instance
      .collection('users')
      .doc('currentId')
      .snapshots()
      .map((doc) => User.fromFirestore(doc));
});

final updateUserProvider = FutureProvider.family<void, User>((ref, user) async {
  await FirebaseFirestore.instance
      .collection('users')
      .doc('currentId')
      .update(user.toMap());
});

Usage

dart
class SyncedWidget extends ConsumerWidget {
  
  Widget build(BuildContext context, WidgetRef ref) {
    final user = ref.watch(userProvider);
    return user.when(
      data: (u) => Text(u.name),
      loading: () => CircularProgressIndicator(),
      error: (e, s) => Text('Error'),
    );
  }
}

Recommendation: Use Firebase Firestore for easy sync.