Prevent multiple refresh - State Notifier Provider

[huzzi]

The screen is refreshed twice when I use this state notifier provider, how can I prevent it?

final profileAsyncController =
    StateNotifierProvider<ProfileAsyncNotifier, AsyncValue<ProfileUser?>>(
        (ref) => ProfileAsyncNotifier(ref));

class ProfileAsyncNotifier extends StateNotifier<AsyncValue<ProfileUser?>> {
  ProfileAsyncNotifier(this.ref) : super(AsyncLoading()) {
    _init();
  }

  final Ref ref;

  void _init() async {
    var profile = await ref.read(apiServiceProvider)!.getProfile();
   // if (!mounted) return;
    state = AsyncData(profile);

   final firestoreUser = ref.watch(firestoreUserChangeProvider);
    final firestoreDb = ref.read(firestoreDatabaseProvider);
    firestoreUser.whenData((value) {
      if (value!.syncRequired!) {
        firestoreDb!.stopSync();
      }
    });
  }

  void updateProfile(ProfileUser? profile) async {
    state = AsyncLoading();
   state = AsyncData(profile);
  }
}

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Consumer(builder: (context, watch, child) {
        var profile = ref.watch(profileAsyncController);
        return profile.when(
          loading: () => Container(child: Scaffold(body: Center(child: const CircularProgressIndicator()))),
          error: (err, stack) => Text('Error $err'),
          data: (profile) => profileWidget(user: profile),
        );
      }),
    );
  }

[rrousselGit]

Could you share a minimalist, reproducible example?

[huzzi]

Hi @rrousselGit

Sorry, my code depends on Firebase so this is the best I could so apologies for not providing minimalist and reproducible example as requested.

This is what I'm trying to achieve:

1. When a user is authenticated (firebase auth), I need retrieve a Firestore document (FirestoreUser) as a stream (document matched on auth uid).
2. Make an api call (not firestore) to retrieve ProfileUser model by passing uid as parameter which will be used throughout the app.
3. Firestore document has a field called sync_required, if this value is set to true then make api call and update state and refresh the UI and also set the sync_required to false. The purpose of this firestore document is to keep the Api data in sync inside the app.
4. If the ProfileUser model is updated within the app, rest of the UI should reflect the changes and also call another api endpoint to update the source data.

I don't know where the best place to write code to update the StateNotifer when the FirestoreUser.syncRequired=true, once the state is updated I need to set FirestoreUser.syncRequired=false again but without updating the state again.

I've added inside the _init() and it seems working but it's also refreshing the ui when I'm setting FirestoreUser.syncRequired=false

Is there a way to temporarily unwatch a provider while the update is taking place?

Thanks again and sorry if I'm not explaining myself properly.

import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Consumer(builder: (context, watch, child) {
        var profile = ref.watch(profileAsyncController);
        return profile.when(
          loading: () =>
              const Scaffold(body: Center(child: CircularProgressIndicator())),
          error: (err, stack) => Text('Error $err'),
          data: (profile) =>
              Scaffold(body: Center(child: Text(profile!.name!))),
        );
      }),
    );
  }
}

class ProfileUser {
  ProfileUser({this.name});
  String? name;
}

class FirestoreUser {
  FirestoreUser({this.syncRequired});
  bool? syncRequired;
}

class ApiService {
  Future<ProfileUser?> getProfile() async {
    return Future.value(ProfileUser(name: "Riverpod"));
  }
}

class FirestoreDatabase {
  Stream<FirestoreUser> getFirestoreUser() {
    return Stream.value(FirestoreUser(syncRequired: true));
  }

  void stopSync() {
    //code to set FirestoreUser.syncRequired: false;
  }
}

final firestoreDatabaseProvider = Provider<FirestoreDatabase?>((ref) {
  return FirestoreDatabase();
});

final firestoreUserChangeProvider = StreamProvider<FirestoreUser>((ref) {
  return ref.read(firestoreDatabaseProvider)!.getFirestoreUser();
});

final apiServiceProvider = Provider<ApiService>((ref) {
  return ApiService();
});

final profileAsyncController =
    StateNotifierProvider<ProfileAsyncNotifier, AsyncValue<ProfileUser?>>(
        (ref) => ProfileAsyncNotifier(ref));

class ProfileAsyncNotifier extends StateNotifier<AsyncValue<ProfileUser?>> {
  ProfileAsyncNotifier(this.ref) : super(const AsyncLoading()) {
    _init();
  }

  final Ref ref;

  void _init() async {
    var profile = await ref.read(apiServiceProvider).getProfile();
    state = AsyncData(profile);
    final firestoreUser = ref.watch(firestoreUserChangeProvider);
    final firestoreDb = ref.read(firestoreDatabaseProvider);
    firestoreUser.whenData((firestoreUser) {
      if (firestoreUser.syncRequired!) {
        firestoreDb!.stopSync();
        //
      }
    });
  }
}

[huzzi]

Basically is there way to watch on specific field and value? Thanks