Home > database >  ScrollController's using Flutter's new version
ScrollController's using Flutter's new version

Time:10-04

I having problem with Flutter's ScrollController. I want to be notified (at the debug console in the i.e) when I scroll ListView view and reach at the end of the list. I think What I learned is not applicable with flutter's new version. Do you have any idea why? Or maybe I made a mistake somwhere in my code?

Here is what I have

   class _ExploreScreenState extends State<ExploreScreen> {
  final mockServer = MockFooderlichService();
  late final ScrollController _scrollController;

  _scrollListener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }

    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ExploreData>(
      future: mockServer.getExploreData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final recipes = snapshot.data!.todayRecipes;

          return ListView(
            controller: _scrollController,
            scrollDirection: Axis.vertical,
            children: [
              TodayRecipeListView(recipes: recipes),
              const SizedBox(
                height: 16,
              ),
              FriendPostListView(
                friendPosts: snapshot.data!.friendPosts,
              ),
            ],
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

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

CodePudding user response:

There is no such problem in your code, except print statements, both having same String value debugPrint("reach the top");

 _scrollListener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the bottom");
      });
    }

    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

Does it solve your issue?

CodePudding user response:

Add this in your initState. Let me know if it works for you.

 _scrollController.addListener(() { 
  if (_scrollController.position.atEdge) {
      if (_scrollController.position.pixels == 0) {
        print("At the top");
      } else {
        print("At the bottom");
      }
    }
  });
  • Related