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