I’m fetching data from the NewsApi. How to implement infinite scroll pagination ? What is the most common approach ?

{
"status": "ok",
"totalResults": 13185,
-"articles": [
-{
-"source": {
"id": "wired",
"name": "Wired"
},
"author": "Andy Greenberg",
"title": "A Vast New Dataset Could Supercharge the AI Hunt for Crypto Money Laundering",
"description": "Blockchain analysis firm Elliptic, MIT, and IBM, have released a new AI detection model—and the 200-million-transaction dataset it's trained on—that aims to spot the “shape” of Bitcoin money laundering.",
"url": "https://www.wired.com/story/ai-crypto-tracing-model-money-laundering/",
"urlToImage": "https://media.wired.com/photos/6631a1936dc0c77846852ed5/191:100/w_1280,c_limit/Crypto-Money-Laundering-Security-GettyImages-1543076825.jpg",
"publishedAt": "2024-05-01T13:00:00Z",
"content": "As a test of their resulting AI tool, the researchers checked its outputs with one cryptocurrency exchangewhich the paper doesn't nameidentifying 52 suspicious chains of transactions that had all ult… [+3279 chars]"
},

Main Screen

 import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:projekttestowy/provider/searchbar_provider.dart';
import 'package:projekttestowy/provider/service_provider.dart';


class HomePage extends ConsumerWidget {
  final ScrollController controller;
  static const pageSize = 100;

  HomePage() : controller = ScrollController() {
    controller.addListener(scrollListener);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            _searchBar(ref),
            _sortBy(ref),
            _newsList(ref),
          ],
        ),
      ),
    );
  }

  Widget _newsList(WidgetRef ref) {
    final prov = ref.watch(getResponseProvider);
    return Expanded(
      child: RefreshIndicator(
        onRefresh: () async {
          ref.refresh(getResponseProvider);
        },
        child: prov.when(
          data: (data) {
            return ListView.builder(
              controller: controller,
              physics: const AlwaysScrollableScrollPhysics(),
              itemCount: data.articles.length ,
              itemBuilder: (context, index) {
                //final page = index ~/ pageSize + 1;
                //final indexInPage = index % pageSize + 1;
                //log('index: $index, page: $page, indexInPage: $indexInPage');

                final article = data.articles[index];



                return GestureDetector(
                  onTap: () {
                    Navigator.of(context).pushNamed(
                      '/NewsDetailed',
                      arguments: data.articles[index],
                    );
                  },
                  child: Container(
                    margin: EdgeInsets.all(16.0),
                    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 32),
                    decoration: BoxDecoration(
                      color: Colors.amberAccent,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Column(
                      children: [
                        Text(index.toString()),
                        Text(article.publishedAt ?? 'unknown'),
                        Text(article.title ?? 'unknown'),
                        FadeInImage.assetNetwork(
                          placeholder: 'assets/placeholder.png',
                          image: article.urlToImage ?? 'assets/placeholder.png',
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          loading: () => Center(child: CircularProgressIndicator()),
          error: (error, stack) {
            return Text('Error: $error');
          },
        ),
      ),
    );
  }

  void scrollListener() {
    
    if (controller.position.maxScrollExtent == controller.offset) {
      log("END");
     
    }
  }

  Widget _searchBar(WidgetRef ref) {
    TextEditingController controller = TextEditingController();
    return TextField(
      decoration: InputDecoration(
        fillColor: Colors.limeAccent,
        filled: true,
        hintText: "Search...",
        suffixIcon: IconButton(
          icon: Icon(Icons.clear),
          onPressed: () {
            controller.clear();
            ref.read(searchBarProvider.notifier).state = "";
          },
        ),
      ),
      textInputAction: TextInputAction.search,
      controller: controller,
      onSubmitted: (_) {
        ref.read(searchBarProvider.notifier).state = controller.text;
        log('text searchbar ${controller.text}');
      },
    );
  }

  Widget _sortBy(WidgetRef ref) {
    return Row(
      children: [
        _buildSortButton(ref, 'publishedAt', 'Newest'),
        _buildSortButton(ref, 'popularity', 'Popular'),
        _buildSortButton(ref, 'relevancy', 'Relevancy'),
      ],
    );
  }

  Widget _buildSortButton(WidgetRef ref, String sortValue, String buttonText) {
    final selectedSort = ref.watch(sortByProvider);

    return OutlinedButton(
      onPressed: () {
        ref.read(sortByProvider.notifier).state = sortValue;
      },
      child: Text(buttonText),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all(
          selectedSort == sortValue ? Colors.red : Colors.black,
        ),
      ),
    );
  }
}

import 'dart:async';

import 'package:dio/dio.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:projekttestowy/services/rest_client.dart';

import '../models/api_response.dart';
import '../models/article.dart';

final dioProvider = Provider<Dio>((ref) {
  final dio = Dio();
  return dio;
});

final getResponseProvider = FutureProvider<ApiResponse>((ref) async {
  final dio = ref.watch(dioProvider);
  final client = RestClient(dio);
  final sortBy = ref.watch(sortByProvider);
  final topic = ref.watch(searchBarProvider);
  final pageNumber = ref.watch(pageNumberProvider);
  ApiResponse response = await client.getResponse(100, pageNumber, sortBy, topic);

  return response;
});

final page = StateProvider<int>((ref) {
  return 1;
});

final sortByProvider = StateProvider<String>((ref) {
  return 'relevancy';
});

final searchBarProvider = StateProvider<String>((ref) => "bitcoin");

final pageNumberProvider = StateProvider<int>((ref) {
  return 1;
});

import 'package:dio/dio.dart';
import 'package:retrofit/http.dart';
import 'package:projekttestowy/models/api_response.dart';

import '../models/article.dart'; // Importuj ApiResponse

part 'rest_client.g.dart';

@RestApi(baseUrl: "https://newsapi.org/v2")
abstract class RestClient {
  factory RestClient(Dio dio, {String baseUrl}) = _RestClient;

  @GET('/everything')
  Future<ApiResponse> getResponse(
      //@Query('language') String country,
      @Query('pageSize') int pageSize,
      @Query('page') int page,
      @Query('sortBy') String sortBy,
      @Query('q') String topic);
}

import 'package:json_annotation/json_annotation.dart';

import 'article.dart';

@JsonSerializable()

class ApiResponse {
  final String status;
  final int totalResults;
  final List<Article> articles;

  ApiResponse({
    required this.status,
    required this.totalResults,
    required this.articles,
  });

  factory ApiResponse.fromJson(Map<String, dynamic> json) {
    return ApiResponse(
      status: json['status'],
      totalResults: json['totalResults'],
      articles: (json['articles'] as List)
          .map((articleJson) => Article.fromJson(articleJson))
          .toList(),
    );
  }

 
}

import 'package:json_annotation/json_annotation.dart';
import 'package:projekttestowy/models/source.dart';

part 'article.g.dart';

@JsonSerializable()
class Article {
  Source source;
  String? author;
  String? title;
  String? description;
  String? url;
  String? urlToImage;
  String? publishedAt;
  String? content;

  Article({
    required this.source,
    required this.author,
    required this.title,
    required this.description,
    required this.url,
    required this.urlToImage,
    required this.publishedAt,
    required this.content,
  });




  factory Article.fromJson(Map<String, dynamic> json) => _$ArticleFromJson(json);

  Map<String, dynamic> toJson() => _$ArticleToJson(this);
}

import 'package:json_annotation/json_annotation.dart';
part 'source.g.dart';

@JsonSerializable()
class Source {
  String? id;
  String? name;

  Source({this.id, required this.name});

  factory Source.fromJson(Map<String, dynamic> json) => _$SourceFromJson(json);

  Map<String, dynamic> toJson() => _$SourceToJson(this);
}

I have already tried adding listener on scrollController but I had no idea how to add new articles to the existing list ?? My intuition is telling me to merge new list from another page to the one who exists but Itake data directly from the object ApiResponse returned by provider.