apiflutter

State not changing in flutter for progress indicator


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()),
        );
     }
    }

Solution

  • 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;
      }