CODEWITHSUNDEEP
flutterdartmobileflutter-listviewflutter-state
dianesis
dianesis

Reputation: 332

How to update a list in initState() flutter after the api call?

So I have a Stateful Widget which has a List variable I want to update from the API call. My issue is that the List is empty even after I do the fetchItems() in the initState().

How can I then update the itemsList with the content of the fetchItems function? Isnt the function suppose to update itemsList if I use setState().

class _ItemsWidgetState extends State<ItemsWidget> {
        
  List<ItemsModel> itemsList = [];
  void initState(){
    fetchItems();
  }
    
  fetchItems() async {
    final response = await http.get(url);
    
    if (response.statusCode == 200) {
        final fetchedItems = json.decode(response.body);
        for (var item in fetchedItems) {
            ItemsModel item = ItemsModel.fromJson(item);
            setState(() {
                itemsList.add(item);
            });
      }
    } else {
         throw Exception('Failed to load items');
    }
}

Upvotes: 0

Views: 2351

Answers (2)

Alex
Alex

Reputation: 2364

  • Avoid calling setState inside loops, call it after your task has done.
  • Always call super.initState and mark initState as overrided
class _ItemsWidgetState extends State<ItemsWidget> {
        
  List<ItemsModel> itemsList = [];

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

    fetchItems();
  }
    
  fetchItems() async {
    final response = await http.get(url);
    
    if (response.statusCode == 200) {
      final fetchedItems = json.decode(response.body);
 
      for (var item in fetchedItems) {
          ItemsModel item = ItemsModel.fromJson(item);

          /// Remove from setState
          itemsList.add(item);
      }
      
      /// Tells to Flutter that now something has changed
      setState(() {});
    } else {
         throw Exception('Failed to load items');
    }
}

Upvotes: 3

Monu
Monu

Reputation: 714

First check fetchedItems is a list type.

   class _ItemsWidgetState extends State<ItemsWidget> {
            
      List<ItemsModel> itemsList = [];
      void initState(){
        fetchItems();
      }
        
      fetchItems() async {
        final response = await http.get(Uri.parse(url));
        
        if (response.statusCode == 200) {
            final fetchedItems = jsonDecode(response.body);
            for (var item in fetchedItems) {
                ItemsModel item = ItemsModel.fromJson(item);
                setState(() {
                    itemsList.add(item);
                });
          }
        } else {
             throw Exception('Failed to load items');
        }
    }

Upvotes: 0

Related Questions