Scroll end detect to many times in flutter

Question

I uses Listview.builder. it detect scroll end to many time that is why API call to many times and add duplicate Data in Listview.

Code:-

ListView.builder(
    controller: _scrollController
    ..addListener(() async {
  if (_scrollController
      .position.pixels -
      10 ==
      _scrollController.position
          .maxScrollExtent -
          10 &&
      !state.isPaginationLoading) {
    print("Scroll End TEst Screen");
    await ctx
        .read<ProfileCubit>()
        .getProfiles(
        context, true, null);
  }

Answer 1

Dont put logic code inside build. In your case _scrollController will addListener every times widget build called, cause multiple handle will trigger.

Advice for you is create and put handle logic to a function, put addListener/removeListener in initState/dispose because they was called only once.

With your problem, you can create a variale to check api was called yet and prevent other call.

class AppState extends State<App> {
  var scroll = ScrollController();
  var preventCall = false;

  @override
  initState() {
    scroll.addListener(onScroll);
    super.initState();
  }

  @override
  void dispose() {
    scroll.removeListener(onScroll);
    super.dispose();
  }

  Future yourFuture() async {}

  void onScroll() {
    var position = scroll.position.pixels;
    if (position >= scroll.position.maxScrollExtent - 10) {
      if (!preventCall) {
        yourFuture().then((_) => preventCall = false);
        preventCall = true;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return ...
  }
}