ListView Builder not building properly

Question

I am trying to implement a infinite scroll pagnation in Flutter using provider for state management.

I have two page, HomePage() and TestingPage().On start up, the code is able to successfully load data from the api endpoint but the retrieved data was not displayed by the listview builder.The data is only displayed if i switch to the TestingPage() and back to HomePage().

The code will load more data if i reach the end of the scroll view, but the same problem is happening again, list view builder will not display the newly loaded data. It will only display it if i switch to TestingPage() and back to HomePage().

Reposting this because i made a mistake of posting the wrong code.

// UserInfo.dart

class UserInfo {
  int userId;
  int id;
  String title;
  String body;

  UserInfo(this.userId, this.id, this.title, this.body);

  factory UserInfo.fromJson(Map<String, dynamic> json) {
    final userId = json['userId'];
    final id = json['id'];
    final title = json['title'];
    final body = json['body'];

    return UserInfo(userId, id, title, body);
  }

  @override
  String toString() {
    return "id: $id";
  }
}

// user_info_response.dart

import 'package:end_point/models/UserInfo.dart';

class ListOfUserInfoResponse {
  int? code;
  List<UserInfo> listOfUserInfo;

  ListOfUserInfoResponse({this.code, required this.listOfUserInfo});

  factory ListOfUserInfoResponse.fromJson(int statusCode, List<dynamic> json) {
    List<dynamic> list = json;

    return ListOfUserInfoResponse(
        code: statusCode,
        listOfUserInfo: list.map((i) => UserInfo.fromJson(i)).toList());
  }
}

// user_info_api.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:end_point/models/API/user_info_response.dart';

Future<ListOfUserInfoResponse> getListOfUserInfo(page) async {
  final response = await http.get(Uri.parse(
      "https://jsonplaceholder.typicode.com/posts?_limit=15&_page=$page"));

  if (response.statusCode == 200) {
    return ListOfUserInfoResponse.fromJson(
        response.statusCode, jsonDecode(response.body));
  } else {
    throw Exception("Failed to load data");
  }
}

// user_info_provider.dart

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:end_point/models/UserInfo.dart';
import 'package:end_point/api/user_info_api.dart' as UserInfoAPI;
import 'package:end_point/models/API/user_info_response.dart';

class UserInfoProvider with ChangeNotifier {
  int _page = 1;
  int get page => _page;

  bool _isLoading = false;
  bool get isLoading => _isLoading;

  List<UserInfo> _listOfUserData = [];
  List<UserInfo> get listOfUserData => _listOfUserData;
  set listOfUserData(List<UserInfo> listOfUserData) {
    _listOfUserData = listOfUserData;
    notifyListeners();
  }

  bool _hasMore = true;
  bool get hasMore => _hasMore;

  Future<void> loadMoreData() async {
    if (_isLoading) return;

    _isLoading = true;

    ListOfUserInfoResponse response =
        await UserInfoAPI.getListOfUserInfo(_page);
    _listOfUserData.addAll(response.listOfUserInfo);
    _page++;
    _isLoading = false;
    if (response.listOfUserInfo.length < 20) {
      _hasMore = false;
    }
    notifyListeners();
  }

  void refreshData() async {
    _isLoading = false;
    _hasMore = true;
    _page = 1;
    listOfUserData.clear();
    notifyListeners();
  }
}

// home.dart

import 'package:end_point/providers/user_info_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'dart:developer';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _scrollController = ScrollController();
  late UserInfoProvider userInfoProvider;

  @override
  void initState() {
    super.initState();
    userInfoProvider = Provider.of<UserInfoProvider>(context, listen: false);
    userInfoProvider.loadMoreData();
    _scrollController.addListener(_onScroll);
  }

  Future<void> _onScroll() async {
    if (_scrollController.position.maxScrollExtent ==
        _scrollController.offset) {
      await userInfoProvider.loadMoreData();
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  Future refresh() async {
    userInfoProvider.refreshData();
    await userInfoProvider.loadMoreData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("END POINT LEGGO")),
        body: RefreshIndicator(
          key: UniqueKey(),
          onRefresh: refresh,
          child: ListView.builder(
              key: const PageStorageKey<String>('HP'),
              itemCount: userInfoProvider.listOfUserData.length,
              controller: _scrollController,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                final id = userInfoProvider.listOfUserData[index].id;
                if (index < userInfoProvider.listOfUserData.length) {
                  return Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: Container(
                        height: 50,
                        width: 200,
                        decoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                            color: Colors.red),
                        child: ListTile(title: Text('$id'))),
                  );
                } else {
                  return Padding(
                      padding: const EdgeInsets.symmetric(vertical: 32),
                      child: Center(
                        child: userInfoProvider.hasMore
                            ? const CircularProgressIndicator()
                            : const Text('No more data to load'),
                      ));
                }
              }),
        ));
  }

Answer 1

I found the fix to this problem, @home.dart instead of using the UserInfoProvider instance that was declared in the initState().

Simply declare a new userInfoProvider instance inside the Widget build(). E.g. final data = Provider.of(context);

From what I understood, this is because the instance of the UserInfoProvider that was declared in the initState() has listen: false. false value will mean that any value changes, will not trigger a rebuild of the widget.