I want to add infinite scroll to my gridview builder. I am using riverpod as a state managament. when i scrolling, it can not to scroll to end.I add scroll controller to gridview but i cant fetch data dynamically from riverpod…

here is my all code. please help.

Here is my cars riverpod

    import 'package:imotors/models/autosalon_car_items.dart';
import 'package:imotors/views/home.dart';
import 'package:flutter/material.dart';
import 'package:imotors/models/custom_tab_bar.dart';
import 'package:imotors/models/tab_bar_items.dart';
import 'package:grock/grock.dart';

import 'package:imotors/views/base_scaffold.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:imotors/models/brand.dart';
import 'package:imotors/models/brand_items.dart';
import 'package:imotors/models/bottom_nav_bar.dart';
import 'package:imotors/constants/Constant.dart';
import 'package:imotors/models/autosalon_car.dart';
import 'dart:math';
final carRiverpodProvider = ChangeNotifierProvider<CarRiverpod>((ref) {
  return CarRiverpod();
});

class CarRiverpod extends ChangeNotifier {


 
  AutoSalonCar cars = AutoSalonCar(items: [
    AutoSalonCarItems(
        name: 'Wultang Silver Label',
        id: 1,
        klass: 'Label',
        fuel: 'Benzin',
        distance: '0 km',
        year: '2024',
        images: [
          'assets/images/car1.png',
          'assets/images/car1.png',
          'assets/images/car1.png'
        ],
        engine: '1.5 motor',
        colors: [Colors.black, Colors.red, Colors.white],
        price: 140.000), 
    AutoSalonCarItems(
        name: 'Toyota Prado',
        id: 36,
        klass: 'Light',
        fuel: 'Benzin',
        distance: '150.000 km',
        year: '2006',
        images: [
          'assets/images/car1.png',
          'assets/images/car2.png',
          'assets/images/car1.png'
        ],
        engine: '3.5 Motor',
        colors: [Colors.pink, Colors.yellow, Colors.red],
        price: 85.000)
  ]);

  bool showFirstWidget = false;
  bool isLoading = false;
  void toggleWidget() {
    showFirstWidget = !showFirstWidget;
    notifyListeners();
  }

  static Widget activePage = const Home();

  int? currentIndex = 0;
  int imagesCurrentIndex = 0;
  late TabController tabController;

  // void initialize(TickerProvider vsync, int length) {
  //   tabController = TabController(length: 3, vsync: this);
  //   notifyListeners();
  // }

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

//   final tabControllerProvider = ChangeNotifierProvider((ref) {
//   return TabBarRiverpod();
// });
  void setImagesIndex(newPageValue) {
    imagesCurrentIndex = newPageValue;
    notifyListeners();
  }

  void setTabController(TabController tabController) {
    this.tabController = tabController;
  }

  void changeTab(int index) {
    tabController.animateTo(index);
    notifyListeners();
  }

  void setCurrentIndex(int index) {
    currentIndex = index;

    notifyListeners();
  }

  void setTabControllerIndex(int index) {
    if (tabController.index != index) {
      tabController.index = index;
      notifyListeners();
    }
  }
  //   // //notifyListeners();

  Widget body() {
    return activePage;
  }
}

here is my cars_in_showroom page

    import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:imotors/constants/constant.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:imotors/riverpod/brand_riverpod.dart';
import 'package:imotors/models/brand_items.dart';
import 'package:imotors/riverpod/autosalon_car_riverpod.dart';
import 'package:imotors/components/car_card.dart';

class Autosalon extends ConsumerStatefulWidget {
  const Autosalon({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _AutosalonState();
}

class _AutosalonState extends ConsumerState<Autosalon> {
  @override
  //late ScrollController _scrollController;

  final ScrollController scrollController = ScrollController();
  List<int> items = List.generate(20, (index) => index); // Başlangıçta 20 öğe
  bool isLoading = false;
  @override
  void initState() {
    super.initState();
     scrollController.addListener(() {
      if ( scrollController.position.pixels == scrollController.position.maxScrollExtent) {
        // The user has reached the end of the list, so load more posts
        _loadMoreCars();
      }
    });

    // _scrollController = new ScrollController(initialScrollOffset: 5.0)
    //   ..addListener(_scrollListener);
  }

  void _loadMoreCars() {
    if (scrollController.position.pixels ==
            scrollController.position.maxScrollExtent &&
        !isLoading) {
      setState(() => isLoading = true);

      // Yeni verileri simüle etmek için
    }
  }

  // _scrollListener() {
  //   if (_scrollController.offset >=
  //           _scrollController.position.maxScrollExtent &&
  //       !_scrollController.position.outOfRange) {
  //     setState(() {
  //       final carList = ref.watch(carRiverpodProvider);
  //       carList.isLoading = true;

  //       // if (carList.isLoading ) {
  //       //   print("RUNNING LOAD MORE");

  //       //   pageCount = pageCount + 1;

  //       //   addItemIntoLisT(pageCount);
  //       // }
  //     });
  //   }
  // }

  Widget build(BuildContext context) {
    // Create a local text editing controller
    final itemList = ref.watch(brandRiverpodProvider);
    final carList = ref.watch(carRiverpodProvider);
    double screenHeight = MediaQuery.of(context).size.height;
    var keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
    final TextEditingController searchController = TextEditingController();

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.only(
                  top: 24, left: 18), // Adds padding around the TextField
              child: SizedBox(
                width: 270,
                height: 40,
                child: TextField(
                  maxLines: null,
                  expands: true,

                  textAlign: TextAlign.center,

                  controller:
                      searchController, // Connects the controller to the TextField
                  decoration: InputDecoration(
                    // Faded text that gives a hint to the user
                    contentPadding: const EdgeInsets.all(2),
                    isDense: true,
                    // Icon displayed at the start of the TextField
                    border:
                        const OutlineInputBorder(), // Adds a border around the TextField
                    suffixIcon: IconButton(
                      icon: const Icon(Icons.search, color: Constant.ybrown),
                      onPressed: () =>
                          searchController.clear(), // Clears the TextField
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide:
                          const BorderSide(color: Constant.ybrown, width: 2.0),
                      borderRadius: BorderRadius.circular(1.0),
                    ),
                  ),
                  onChanged: (text) {
                    // Optional: handle changes to the text
                    // For example, update the UI based on the input
                  },
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 40, right: 30),
              child: GestureDetector(
                onTap: itemList.toggleWidget,
                child: SvgPicture.asset(
                  'assets/icons/filter.svg',
                  width: 48,
                  height: 48,
                ),
              ),
            )
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20, top: 10),
          child: itemList.showFirstWidget
              ? Text(
                  'Markalar',
                  style: Constant.brands,
                )
              : null,
        ),
        const SizedBox(height: 10),
        itemList.showFirstWidget ? brands(itemList) : filters(itemList),
        Padding(
          padding: const EdgeInsets.only(left: 20, top: 10),
          child: itemList.showFirstWidget
              ? Text(
                  'Model',
                  style: Constant.brands,
                )
              : null,
        ),
        const SizedBox(height: 10),

        cars(
          carList,
          screenHeight,
          scrollController,
        ),
        // Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        //   Column(
        //     children: [
        //       Image.asset('assets/images/car1.png', width: 165, height: 94),
        //       SizedBox(height: 10),
        //       Text('Wultang Silver Label', style: Constant.carName),
        //     ],
        //   ),
        //   Column(
        //     children: [
        //       Image.asset('assets/images/car2.png', width: 165, height: 94),
        //       SizedBox(height: 10),
        //       Text('Wultang Early Light', style: Constant.carName),
        //     ],
        //   ),
        // ]),
      ],
    );
  }
}

Widget brands(itemList) {
  return SizedBox(
    height: 100,
    child: ListView.builder(
      shrinkWrap: true,
      itemCount: itemList.brands.items.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (BuildContext context, int index) {
        final item = itemList.brands.items[index];
        return GestureDetector(
          onTap: () {
            // Handle the tap here. You can use the item or index to determine action.
            print('Item tapped: ${item.id}'); // Example action
          },
          child: Padding(
            // 'return' anahtar kelimesini ekledim.
            padding: const EdgeInsets.only(left: 15),
            child: Row(children: [
              Stack(
                children: [
                  Image.asset(
                    item.backgroundImage,
                    width: 83,
                    height: 83,
                  ),
                  Image.asset(
                    item.image,
                    width: 83,
                    height: 63,
                  ),
                  Positioned(
                    // 'Padding' yerine 'Positioned' kullanıldı.
                    top: 55,
                    left: index == 2 ? item.textPadding : 20,
                    child: Text(item.text),
                  ),
                ],
              ),
            ]),
          ),
        );
      },
    ),
  );
}

Widget filters(itemList) {
  return Padding(
    padding: const EdgeInsets.only(left: 20),
    child: Stack(
      alignment: Alignment.center, // İçerikleri ortalamak için
      children: [
        Image.asset('assets/images/filterBackground.png'),
        Positioned(
          top: 20, // Üstten 20 birim boşluk
          left: 20, // Soldan 20 birim boşluk
          child: Row(children: [
            SvgPicture.asset('assets/icons/selectInput.svg'),
            const SizedBox(width: 40),
          ]),
        ),
      ],
    ),
  );
}

Widget cars(
  carList,
  height,
  scrollController,
) {
  return Flexible(
    child: Scrollbar(
      child: GridView.builder(
        shrinkWrap: true,
        padding: const EdgeInsets.all(5),
        //controller: _scrollController,
        physics: const AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.vertical,
        controller: scrollController,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 5,
            mainAxisSpacing: 5,
            childAspectRatio: 1),
        itemCount: carList.cars.items.length,
        itemBuilder: (context, index) {
          return CarCard(cars: carList.cars.items[index]);
        },
      ),
    ),
  );
}