How to use providers to load data before consuming

Question

In my application I use provider in the following manner;

I create the schedule view like this;

await Navigator.of(context, rootNavigator: true).push(
                    MaterialPageRoute(
                      builder: (BuildContext context) =>
                          ScheduleView.create(context, experience),
                    ),
                  );

The create function;

    static Widget create(BuildContext context, ExperienceDetailed experience) {
final db = Provider.of<Database>(context, listen: false);
// to get initial data i need to call function
// db.getSchedules();
// can i just do it here ?
return ChangeNotifierProvider<ScheduleViewModel>(
  create: (context) => ScheduleViewModel(db, experience),
  child: Consumer<ScheduleViewModel>(
    builder: (context, model, _) => ScheduleView(
      experience: experience,
      model: model,
    ),
  ),
);

} Before loading ScheduleView I also want to load the initial set of data that is displayed in the ScheduleView.

The loading function is inside the model called "getSchedule()"

At the moment I use initState in the "ScheduleView " to call this function and load the initial data.

Is there a way to load the data before calling the builder. I have seen option called MultiProvider and ChangeNotifierProxyProvider.

Can they be used here ?

Do you mean `using data inside ScheduleView when rebuilding ScheduleView` ? I think your question is a little confusing. — yellowgray, Oct 23 '20 at 09:54
Yes, I need initial set of data to show inside ScheduleView when it loads for the first time. I only need it for the first build. Subsequent build user can load it as he likes. — Janaka, Oct 23 '20 at 10:20
I still don't understand how ScheduleView contains data before it built (for the first time) ? Can you describe more detail on your problem? (Maybe in code?) — yellowgray, Oct 23 '20 at 10:30
I pass db, a provider that can get data into ScheduleViewModel constructor. Then I can call methods inside ScheduleViewModel to get the data. Here you can see I construct ScheduleViewModel object and pass it to ScheduleView constructor. But i still have to call a method to load the necessary data in initState at ScheduleView. What I want to do is pass the initial data also into ScheduleView as a parameter. Same way I pass ScheduleViewModel. Or call a method inside ScheduleViewModel and get the data before passing it to ScheduleView as a parameter. — Janaka, Oct 23 '20 at 13:49

yellowgray · Answer 1 · 2020-10-24T15:26:10.220

0

I make a quick guess: Is ChangeNotifierProvider.value works for you? You can create ScheduleViewModel as a Object first, pass into provider as a value and use it below.

I think you might want a futureBuilder which can choose to show other widget when asynchronous data is not ready yet.

return FutureBuilder(
  future: db.getSchedules(), // it should be a async future function
    builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
      if(snapshot.connectionState == ConnectionState.done && snapshot.hasData){
        return ... // when data is done you can get the data by snapshot.data
      }else{
        return CircularProgressIndicator(); // waiting widget
      }
    };

);

You can see more detail here FutureBuilder

edited Oct 24 '20 at 15:26

answered Oct 23 '20 at 16:16

yellowgray

4,006
6
28

Yes it does. But how do I load the initial data to ScheduleViewModel before passing it to ScheduleView? – Janaka Oct 23 '20 at 16:34
Can you describe what is `initial data` and how it come from? Can't you just pass the initial data into ScheduleViewModel's Constructor? like you do to db, experience? – yellowgray Oct 24 '20 at 03:04
I have updated my code so you get a better idea what I am doing. As i mentioned in the code I can call db.getSchedules(); to get the initial data. That will fetch the data from the server. since it take some time I have to show some kind waiting message. What I want to know is how to do this properly here – Janaka Oct 24 '20 at 03:21
Before ScheduleView( experience: experience, model: model, ) getting called, the data should be available so it can be passed as a parameter or data should be inside ScheduleViewModel – Janaka Oct 24 '20 at 03:24
I think your problem is need to wait data from server but not related to Provider? I update the answer. – yellowgray Oct 24 '20 at 15:27

How to use providers to load data before consuming

1 Answers1