how to load data when scroll from api for flutter

Question

I want to load more data when scrolling down from API, I tried many methods and packages like infinite_scroll_pagination,pull_to_refresh,lazy-loading-listview they work when I use their example, but I couldn't make it with my code, it's been more than four days and I couldn't solve it here is my full code which displays all data from API at once I want to loop and display 10 items till the length of the data. please any help

    Future getData() async {
    var response = await http.post(
      Uri.parse("https://jokeapp6.000webhostapp.com/index0.php"),
    );
    var responsebody = jsonDecode(response.body);
    print('connected succsefully');
    return responsebody;
  }

  ScrollController scrollController = ScrollController();

 

 @override
  void initState() {
    scrollController.addListener(() {
      // call your api here
      getData();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          endDrawer: NavigationDrawerWidget(),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            backgroundColor: Colors.black,
            title: Text("      الصبر   "),
            centerTitle: true,
          ),
          backgroundColor: Colors.grey[900],
          body: FutureBuilder(
              future: getData(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                List snap = snapshot.data;

                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
     

   if (snapshot.hasError) {
              return Center(
                child: Text("error"),
              );
            }
            return ListView.separated(
              controller: scrollController,
              itemCount: 10,
              separatorBuilder: (context, index) {
                final data = snap[index];
                final dataJoke = data["joke"];
                final dataAnswer = data["answer"];

                return Card(
                  elevation: 6,
                  margin: EdgeInsets.symmetric(vertical: 3, horizontal: 6),
                  child: Container(
                    color: Colors.grey[600],
                    child: ListTile(
                      title: Text(
                    " ${snap[index]['joke']}",
                    textDirection: TextDirection.rtl,
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                          trailing: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                minimumSize: Size(1, 30),
                                primary: Colors.grey[900], // background
                                onPrimary: Colors.white70,
                                elevation: 0),
                            onPressed: () async {
                              const urlPreview =
                                  "https://play.google.com/store/apps/details?id=com.amjadalmousawi.joke";
                              await Share.share(
                                  "$dataJoke \n $dataAnswer \n للمزيد من الطرائف والألغاز\n$urlPreview");
                            },
                            child: Icon(Icons.share),
                          ),
                        ),
                      ),
                    );
                  },
                  itemBuilder: (BuildContext context, int index) {
                    if (index % 10 == 5) {
                      return _getAdWidget();
                    }
                    return Text(
                      '',
                    );
                  },
                );
              }),
        ));
  }

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}

Answer 1

define scrollcontroller like

ScrollController scrollController = ScrollController();

You need use controller scroll in initState so when your list is reach in the end it will call api

@override
  void initState() {
  scrollController.addListener(() {
      // call your api here
  });
  super.initState();
}

You need to define your scrollcontroller in listview.separated like below

 ListView.separated(
  controller: scrollcontroller,
  itemCount: 4,
  itemBuilder:(BuildContext context,int index) {
         // your code
         return Container();
     },
     separatorBuilder:(BuildContext context,int index) {
         // your code
         return Container();
     },
),