State not changing in flutter for progress indicator

Question

I am trying to parse an api in flutter. the asynchronous request delays the response which is shown by the progress indicator. but the progress indicator does not fade away after the response is fetched. it remains still on the screen.

how to change the state of the progress loader to listview.builder when the response is fetched?

this is my code.

    import 'dart:convert';

    import 'package:flutter/material.dart';

    import 'users.dart';
    import 'package:http/http.dart' as http;

    class HomePage extends StatefulWidget {
     @override
     _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {

    bool isLoading = false;

    List<Users> _users;
    Future<List<Users>> getUsers() async {
    var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    _users = usersFromJson(response.body);
    isLoading = true;

  }
  @override
  void initState() {
      setState(() {
        getUsers();
      });
  }


    @override
    Widget build(BuildContext context) {
     return Scaffold(
      appBar: AppBar(
       title: Text(isLoading ? "Parsed Json" : "Loading..."),
       backgroundColor: Colors.deepPurple,
      ),
       body: isLoading ? ListView.builder(
             itemCount: _users.length,
             itemBuilder: (BuildContext context,int index){
            return ListTile(
              leading: Image.network('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'),
              title:  Text(_users[index].name),
             );
         }) : Center(child: CircularProgressIndicator()),
        );
     }
    }

your bool is always false, you set it to false always```isLoading = false;``` — Raine Dale Holgado, Oct 06 '20 at 05:31
@Reign now its giving me error: The getter 'length' was called on null. — Arpit Todewale, Oct 06 '20 at 05:33
set it to empty [] ```List _users = []```, and create another condition if length == 0 do this, if not show List widgets — Raine Dale Holgado, Oct 06 '20 at 05:38

score 1 · Answer 1 · answered Oct 06 '20 at 05:59

Working code, try this

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = false;

  List<Users> _userList = [];

  Future<void> getUsers() async {
    isLoading = true;
    var response = await http
        .get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    var jsonResponse = jsonDecode(response.body);
    // print(jsonResponse);
    jsonResponse.forEach((data) {
      Users user = Users.fromMap(data);
      print(user);
      _userList.add(user);
    });
    isLoading = false;
  }

  @override
  void initState() {
    getUsers().then((value) => setState(() {}));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(isLoading ? "Loading..." : "Parsed Json"),
          backgroundColor: Colors.deepPurple,
        ),
        body: isLoading
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: _userList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    title: Text(_userList[index].name),
                  );
                }));
  }
}

class Users {
  int id;
  String name;
  String username;
  Users({
    this.id,
    this.name,
    this.username,
  });
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'username': username,
    };
  }

  factory Users.fromMap(Map<String, dynamic> map) {
    if (map == null) return null;

    return Users(
      id: map['id'],
      name: map['name'],
      username: map['username'],
    );
  }

  String toJson() => json.encode(toMap());

  factory Users.fromJson(String source) => Users.fromMap(json.decode(source));

  @override
  String toString() => 'Users(id: $id, name: $name, username: $username)';
}

score 1 · Answer 2 · edited Feb 27 '23 at 11:54

1

Check your _user != null instead of bool then show list otherwise indicator

edited Feb 27 '23 at 11:54

Ravindra S. Patil

11,757
3
13
40

answered Oct 06 '20 at 06:40

Mr vd

878
1
10
19

score 0 · Accepted Answer · answered Oct 06 '20 at 05:55

void initState () method Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates. so there is no need for setState in initState() method.

try set setState after the response, so

 @override
  void initState() {
    super.initState();
      getUsers();

  }



 Future<List<Users>> getUsers() async {
    isLoading = false;
    var response = await http.get(Uri.encodeFull('http://jsonplaceholder.typicode.com/users'));
    _users = usersFromJson(response.body);
    print(_users);
    setState(() {
      isLoading = true;
    });

    return _users;
  }

this one actually worked. thanks – Arpit Todewale Oct 06 '20 at 08:13 — Arpit Todewale, Oct 06 '20 at 08:13

State not changing in flutter for progress indicator

3 Answers3