how to make current user data provider using Riverpod that can handle latest update from Server?

Viewed 421

I am new in Riverpod state management, I am sorry if my question is very basic.

so I am confused how to make a current user data provider. say for example I have this User model

class User {
  final String uid;
  final String fullname;

  UserKM({
    required this.uid,
    required this.fullname,
  });

}

and let say I have two pages, HomePage and ProfilePage. the ProfilePage will be like the code below. just to show the user fullname using text by watching current user data provider

class ProfilePage extends ConsumerWidget {
  @override
  Widget build(context, watch) {

    final currentUser = watch(currentUserDataProvider);

    return Scaffold(
      body: Text(currentUser.fullname),
    );
  }
}

and now imagine the home page has pull to refresh feature to get latest user data from server.

class HomePage extends ConsumerWidget {
  @override
  Widget build(context, watch) {

    final homePageController = watch(homePageControllerNotifier);

    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () async => homePageController.getLatestDataFromServer(), // perform pull to refresh
        child: ,
    );
  }
}

and I have a HomePageController which is basically a change notifier like this

final homePageControllerNotifier = ChangeNotifierProvider<HomePageController>((ref) {
  return HomePageController();
});

class HomePageController with ChangeNotifier {


  Future<void> getLatestDataFromServer() async {

    // perform asynchronous operation using DB service .......
    // then successfully get user data from server

    final Map<String, dynamic> userData = dataFromServer;

    // then what should I do to this latest `userData` ???
    // to make latest update also displayed in ProfilePage that listen to current user Data Provider

  }
}

I am confused how to make currentUserDataProvider ( the provider that that will be watched / listened by ProfilePage ) , because I don't know how to put that latest userData from server to the currentUserDataProvider .

so if I change the fullname from server, then the user refresh the data by pull to refresh, I want to make the latest fullname will be displayed in ProfilePage

1 Answers

If you are using a ChangeNotifierProvider, then you should use store the userData inside a var and update it with notifyListeners();

class HomePageController with ChangeNotifier {

  Map<String, dynamic> userData?;

  Future<void> getLatestDataFromServer() async {

    // perform asynchronous operation using DB service .......
    // then successfully get user data from server

    userData = dataFromServer;

    // then what should I do to this latest `userData` ???
    // to make latest update also displayed in ProfilePage that listen to current user Data Provider
    notifyListeners();
  }
}

Then you can define your currentUserDataProvider like this:

final currentUserDataProvider = Provider<Map<String, dynamic>?>((ref) {
  final homePageController = ref.watch(homePageControllerNotifier);
  return homePageController.userData;
}

But whereas this works, I would recommend to use StateNotifier with a custom state class, which avoids to use notifyListeners(); each time there is an update.

Related