CODEWITHSUNDEEP
firebaseflutterriverpod
valley
valley

Reputation: 177

How can I use several providers for re-rendering a widget?

I'm building a Flutter app with Firebase and Riverpod. Until the main page is displayed a user has to perform several steps to get there (e.g. sign in, validate email, get activated by admin, upload documents). For each of these steps i show a specific page or widget which is determined in AppRouterWidget (see below). The problem i have is that i need at least 2 different providers to cover all possible states, since some aspects belong to the Firebase user in Authentication area and the others to the user account in Firebase's database (collection 'account'), which is of course only available if the user has logged in. I can cover the authentication part, but i have no clue how i can add the user account part, which should be accessible by watching accountStreamProvider. This is what i currently have working:

final accountStreamProvider = StreamProvider((ref) {
  final database = ref.watch(databaseProvider)!;
  return database.accountStream();
});

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authStateChanges = ref.watch(authStateChangesProvider);
    return authStateChanges.when (
      data: (user) => _data(context, user, ref),
      loading: () => const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
      error: (_, __) => const Scaffold(
        body: Center(
          child: Text('Error'),
        ),
      ),
    );
  }

  Widget _data(BuildContext context, User? user, WidgetRef ref) {
    // user is the auth user
    if (user == null) {
      // either login or signup
      return const AuthPage();
    } else {
      // logged in. now check which step we have to show
      if (!user.emailVerified) {
        return const VerifyEmailPage();
      } else {
        // these are the account specific data
        //final accountAsyncValue = ref.watch(accountStreamProvider);
        //if (accountAsyncValue.hasValue || !accountAsyncValue.value!.isActiv) {
        //  return const WeCallYouWidget();
        //}
      }
      return Container();
    }
  }
}

I guess that i need 2 listeners in build() and both would call _data when triggered, but i don't know exactly how to do this.

Thanks a lot for some insights.

Upvotes: 0

Views: 98

Answers (2)

valley
valley

Reputation: 177

As a result i took bizz84 advice and moved all logic into a separate class which now holds all needed listeners. Whenever a new event happens it can react to that notification and determine the new page state which will be used to show the correct page.

Upvotes: 0

bizz84
bizz84

Reputation: 2282

I'd be tempted to move all the logic for deciding which page to show outside your widget.

One way to do this would be to create a StateNotifier<PageState> subclass (PageState could be a Freezed class or an enumeration) that takes all the repositories/data sources you need as arguments, subscribes to all the streams as needed, and computes the output state that the widget can watch as:

final pageState = ref.watch(pageStateProvider);
return pageState.when(
  auth: () => ....
  verifyEmail: () => ...
  uploadDocuments: () => ...
  // and so on
);

Upvotes: 1

Related Questions