Flutter unable to apply lazyLoad

Question

I'm new in flutter trying to apply lazyLoad in my products page. Here I'm using provide package.

My API data looks like

{
    "products": [
        {
            "id": 1,
            "title": "Amazon Gift Card",
         }
    ]
 }

My API's URL looks like

products?page=1
products?page=2
-------
-------

My Provider looks like

class ProductsProvider with ChangeNotifier {
  List<Product> _products = [];

  //flutter getter
  List<Product> get products {
    return [..._products];
  }

  Future<void> fetchAndSetProductsByCatId({required int catId, int page = 1}) async {
    String url = Constants.apiUrl + '/products/cat/$catId.json?page=$page';
    var urlParse = Uri.parse(url);
    try {
      final response = await http.get(urlParse);
      final Map<String, dynamic> extractedData = json.decode(response.body);
      final List<dynamic> products = extractedData["products"];
      final List<Product> loadedProducts = [];

      for (var productData in products) {
        loadedProducts.add(Product(
            id: productData['id'],
            title: productData['title'],
         )
        );
      }
      _products = loadedProducts;
      notifyListeners();
    } catch (error) {
      rethrow;
    }
  }
}

Now I'm trying to create a list with lazyload data

class _CategoryProductsPageState extends State<CategoryProductsPage> {
  List categoryProducts = [];
  var _isLoading = true;
  int _page = 1;
  late int listLength;

  final ScrollController _scroolController = ScrollController();

  @override
  void initState() {
    Provider.of<ProductsProvider>(context, listen: false)
        .fetchAndSetProductsByCatId(catId: widget.catId['id'], page: _page);

    _scroolController.addListener(() {
      if (_scroolController.position.pixels ==
          _scroolController.position.maxScrollExtent) {
        if (listLength != 0) {
          setState(() {
            _page++;
          });
          Provider.of<ProductsProvider>(context, listen: false)
              .fetchAndSetProductsByCatId(
                  catId: widget.catId['id'], page: _page
            );
        }
        // print(_page);
      }
    });
    super.initState();
  }

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

  @override
  void didChangeDependencies() {
    WidgetsBinding.instance!.addPostFrameCallback((_) => {_isLoading = false});
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<ProductsProvider>(context);

    setState(() {
      listLength = categoryProducts.length;
      categoryProducts.add(productsData.products);
    });

    return Scaffold(
       body : ListView.separated(
        controller: _scroolController,
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 0),
        itemCount: categoryProducts.length,
        itemBuilder: (ctx, i) => ProductListRow(
            id: categoryProducts[i].id,
            title: categoryProducts[i].title,
        ),
        separatorBuilder: (BuildContext context, int index) => const Divider(),
    ),
    )
}

Using print I have checked my URL is changing wite page 1,2,3.... But I'm unable to append list in state. I have created a categoryProducts list then tried to append in builder state.I'm getting below error

The following NoSuchMethodError was thrown building:
Class 'List<Product>' has no instance getter 'id'.
Receiver: Instance(length:5) of '_GrowableList'
Tried calling: id

How can I fix this issue ?