How to avoid CircularProgressIndicator when visiting screen next time?

Question

I am creating a simple demo fetching json data.

I've used a Tab bar in my Homepage screen with 3 tabs: one for users, one for todos.

Everything is working well but when I want a little change...on tapping tab it's showing a CircularProgressbar each and everything because I am fetching data with Future function and a FutureBuilder.

What I would like to achieve is: it should show the CircularProgressbar only the first time, then data should be copied into a local array so that the next time this local data will be shown to avoid loading with the CircularProgressIndicator.

Here is my code:

 Future<List<User>> getuserlist() async
  {
    List<User> userlist=[];
    final response=await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
    final jsondata=json.decode(response.body);
    userlist.clear();
    for(var data in jsondata)
      {
        userlist.add(User.fromJson(data));

      }
    return userlist;
  }

here is screen's body code

FutureBuilder(
        future: getuserlist(),
        builder: (context,AsyncSnapshot snapshot){
          if(snapshot.connectionState==ConnectionState.waiting)
            {
              return Center(child: CircularProgressIndicator());
            }
          else
            {
              if(snapshot.connectionState==ConnectionState.active || snapshot.connectionState==ConnectionState.done)
                {
                  if(snapshot.hasData) {
                    return ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (context,index){
                          User user=snapshot.data[index];
                          return ListTile(
                            title: Text(user.name.toString()),
                            subtitle: Text(user.email.toString()),
                            leading: CircleAvatar(child: Text(user.id.toString()),),

                          );
                        });
                  }
                  else
                    {
                      if(snapshot.hasError)
                        {
                          return Text('Error found');
                        }
                      else
                        {

                          return Text('No error no data...');
                        }
                    }

                }
              else
                {
                  return Text('Something wrong');
                }


            }
        },
      ),

kindly see this [solution](https://stackoverflow.com/a/64057210/14143890) . It will solve your problem — Gagan Kumar, Sep 06 '22 at 13:42

eamirho3ein · Accepted Answer · 2022-09-06T13:46:13.080

1

If you want cache data when user close and reopen the app, You can use shared_preferences, to cache the data like this:

Future<List<User>> getuserlist() async
  {
    List<User> userlist=[];
    List jsondata=[];
    final prefs = await SharedPreferences.getInstance();
    await prefs.reload();
    String responsePrefs = prefs.getString(key);

    if(responsePrefs != null){
      jsondata = json.decode(responsePrefs);
    }else {
      final response=await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
      final prefs = await SharedPreferences.getInstance();
      await prefs.reload();
      prefs.setString('response', response.body);
   
      jsondata = json.decode(response.body);

    }
    
    userlist.clear();
    for(var data in jsondata)
      {
        userlist.add(User.fromJson(data));

      }
    return userlist;
  }

But if you want cache data just for switching between pages, you can do this:

first create singleton class like this:

class GlobalVariable extends ChangeNotifier {
  static GlobalVariable? _instance;
  factory GlobalVariable() => _instance ??= new GlobalVariable._();
  GlobalVariable._();

  List<User> _users = [];

  setUsers(List<User> user) {
    _users = user;
  }

  List<User> getUsers() {
    return _users;
  }
}

then change your getuserlist() to this:

Future<List<User>> getuserlist() async
  {
    List<User> userlist=[];
    if(GlobalVariable().getUsers().isEmpty){
      final response=await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
      final jsondata=json.decode(response.body);
      userlist.clear();
      for(var data in jsondata)
        {
          userlist.add(User.fromJson(data));

        }
      return userlist;
    }else{
      return GlobalVariable().getUsers();
    }
    
  }

edited Sep 06 '22 at 13:46

answered Sep 06 '22 at 13:26

eamirho3ein

16,619
2
12
23

any other option as I don't want to store data in device... – Irfan Ganatra Sep 06 '22 at 13:31
Unfortunately the only option for not calling api again is cache the api in device. – eamirho3ein Sep 06 '22 at 13:34
I think there should be a way,,, as feeling it as simple query..like to fetch all api data into an array and than use this array wherever needed – Irfan Ganatra Sep 06 '22 at 13:36
what do you mean by not call again? not call when user close and reopen app ? or not call when switching between pages? – eamirho3ein Sep 06 '22 at 13:37
not call when switching between pages.. – Irfan Ganatra Sep 06 '22 at 13:40
You can use a Riverpod FutureProvider. Once the future is complete, the result is cached in the provider. – Randal Schwartz Sep 06 '22 at 16:01
@IrfanGanatra I updated my answer. check it out. – eamirho3ein Sep 07 '22 at 11:27
and is provider a better solution....I tried with provider and worked as its just showing once a circularprogressindicator – Irfan Ganatra Sep 07 '22 at 12:42
but confused, as not getting exact point why provider solved this... – Irfan Ganatra Sep 07 '22 at 12:42
provider is state manager tool, so you pass data to it and it save that data and when you try to get data you check if provider have it or not, but the down side of provider is that you can pass this value just to its child, but with my solution you can use that list when ever you want. – eamirho3ein Sep 07 '22 at 12:49

How to avoid CircularProgressIndicator when visiting screen next time?

1 Answers1