How to detect if a widget reaches the bottom of the screen in flutter?

Question

My widget renders a list of photos and installs a ScrollController to detect when the user scrolls to the bottom so new photos can be loaded. On some devices however the initial loaded photos don't cover the whole screen. In this case I want to load more photos until the whole screen is covered. How can I achieve that?

scrollController.addListener(() async {
  final pos = scrollController.position;
  final triggerFetchMoreSize = 0.9 * pos.maxScrollExtent;
  if (pos.pixels > triggerFetchMoreSize) {
       // scrolling to bottom detected
  }
}



SingleChildScrollView(controller: scrollController,
          physics: const AlwaysScrollableScrollPhysics(),
          child: PhotoList());

do you have all of those photos in a listview..? – srikanth7785 May 14 '20 at 15:09 — srikanth7785, May 14 '20 at 15:09
all photos are in a gridview – MarcS82 May 14 '20 at 15:17 — MarcS82, May 14 '20 at 15:17

score 2 · Accepted Answer · answered May 15 '20 at 03:43

2

You can use the extentAfter property to know how much more space is left till the end..

I guess this is something you are trying to do..

https://stackoverflow.com/a/49509349/13460232

answered May 15 '20 at 03:43

srikanth7785

1,382
1
7
22

score -1 · Answer 2 · answered May 14 '20 at 15:05

-1

You could use MediaQuery to do it. You could find the height of the device by using MediaQuery.of<context>.size.height or width of the Device Screen using MediaQuery.of<context>.size.width

Reference: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

answered May 14 '20 at 15:05

Humble

41
2
8

Ok but how can find out if my list of photos is larger as `MediaQuery.of.size.height`? And where can I do the comparation makeing sure that my photolist is already drawn? – MarcS82 May 14 '20 at 15:19

How to detect if a widget reaches the bottom of the screen in flutter?

2 Answers2