Skip to content

Commit a0812a0

Browse files
pinkeshmarspinkeshmars
committed
Added infinite api calls
1 parent 1391282 commit a0812a0

File tree

3 files changed

+142
-1
lines changed

3 files changed

+142
-1
lines changed

‎docs/resources/ui/widgets/built-in-widgets/imgs/infinite-scroll-behind-scene.avif

283 KB
Binary file not shown.

‎docs/resources/ui/widgets/built-in-widgets/imgs/pagination-variable.png

21.2 KB
Loading

‎docs/resources/ui/widgets/built-in-widgets/list-grid.md

Lines changed: 142 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,12 +274,153 @@ Here's a quick demo to show how to add a GridView widget and modify its properti
274274
:::tip[Video Tutorial]
275275
If you prefer watching a video tutorial, here's the one for you:
276276

277-
278277
<div class="video-container"><iframe src="https://www.youtube.
279278
com/embed/zZTCMyz8U1w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
279+
:::
280+
281+
## Adding infinite scroll
282+
283+
The infinite scroll automatically loads the new items as you scroll down the list. It works by showing only a limited number of items (e.g., 15, 25) at first and loads subsequent items before the user reaches the end of the list. At the end of the list, a circular progress bar is visible as the new items are loaded.
284+
285+
<div style={{
286+
position: 'relative',
287+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
288+
height: 0,
289+
width: '100%'}}>
290+
<iframe
291+
src="https://demo.arcade.software/aetb7DXpZXxGk3dXj4an?embed&show_copy_link=true"
292+
title=""
293+
style={{
294+
position: 'absolute',
295+
top: 0,
296+
left: 0,
297+
width: '100%',
298+
height: '100%',
299+
colorScheme: 'light'
300+
}}
301+
frameborder="0"
302+
loading="lazy"
303+
webkitAllowFullScreen
304+
mozAllowFullScreen
305+
allowFullScreen
306+
allow="clipboard-write">
307+
</iframe>
308+
</div>
309+
<p></p>
310+
311+
![Infinite scroll behind the scene](imgs/infinite-scroll-behind-scene.avif)
312+
313+
Adding infinite scroll helps you improve the user experience by reducing the initial waiting time (as without infinite scroll, it would take more time to load the long list) and loading new items only when required.
314+
315+
The infinite scroll can be added to the list of items retrieved from two sources:
316+
317+
- [Infinite scroll on a list from the Firestore collection](#infinite-scroll-on-a-list-from-the-firestore-collection)
318+
- [Infinite scroll on a list from API call](#infinite-scroll-on-a-list-from-api-call)
319+
320+
### Infinite scroll on a list from the Firestore collection
321+
322+
In FlutterFlow, you can directly enable the infinite scroll on a list of items received from the Firestore collection.
323+
324+
To enable the infinite scroll:
325+
326+
1. [Query a collection](../../../control-flow/backend-logic/backend-query/query-collection.md) on a ListView (skip if you have already done so).
327+
2. Select the ListView, move to the properties panel and, select the **Backend Query** section.
328+
3. Scroll down the already added query and **turn on** the **Enable Infinite Scroll**.
329+
4. On enabling the infinite scroll, the **Listen For Changes** property also gets enabled. That means the list automatically updates if changes are made to the item. This is done to keep all the items up to date on the screen. However, it does not update the list if any new item is added or deleted. In rare cases, you would need to disable this feature. To do so, turn off this property.
330+
5. In infinite scroll, the items are loaded in chunks called pages. The number of items to load on a single page is determined by the **Page Size** property. By default, the value is set to 25 (i.e., load 25 items per page). The ListView loads the first page as soon as it is visible on the screen, and the subsequent pages (with the number of items defined in the Page Size property) are loaded as you scroll down the screen. You can adjust this value according to your design and requirements.
331+
6. Click **Save**.
332+
333+
<div style={{
334+
position: 'relative',
335+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
336+
height: 0,
337+
width: '100%'}}>
338+
<iframe
339+
src="https://demo.arcade.software/E0Bg7uJ9BYk5soxQMGD1?embed&show_copy_link=true"
340+
title=""
341+
style={{
342+
position: 'absolute',
343+
top: 0,
344+
left: 0,
345+
width: '100%',
346+
height: '100%',
347+
colorScheme: 'light'
348+
}}
349+
frameborder="0"
350+
loading="lazy"
351+
webkitAllowFullScreen
352+
mozAllowFullScreen
353+
allowFullScreen
354+
allow="clipboard-write">
355+
</iframe>
356+
</div>
357+
<p></p>
358+
359+
### Infinite scroll on a list from API call
360+
361+
To add an infinite scroll on the API call, you must have an endpoint that supports pagination with at least one query parameter that accepts a page number like page, offset, etc.
362+
363+
#### Pagination Variables
280364

365+
When you add the paginated API call in the builder and enable the infinite scroll, we provide you the following pagination variables that you can pass to your API variables. These will be available inside the **Set Variable** menu.
366+
367+
![Pagination Variables](imgs/pagination-variable.png)
368+
369+
1. **Next Page Index**: You can pass this variable for the query parameter that accepts the page number. The default value is 0 and keeps increasing by one as you scroll down the list until it reaches the end.
370+
2. **#(Number of) Loaded Items**: This equals the number of items returned by the paginated API call.
371+
3. **Last Response**: This is useful if you want to get anything from the last response that might help you retrieve the next set of data.
372+
373+
:::tip
374+
When passing the *Number of Loaded Items* for query parameters like *limit*, *per_page*, *size,* etc., use a *Specific Value,* such as 15,20.
281375
:::
282376

377+
Adding infinite scroll includes:
378+
379+
1. [Add paginated API call](#1-add-paginated-api-call)
380+
2. [Passing pagination variable in API call query](#2-passing-pagination-variable-in-api-call-query)
381+
382+
#### 1. Add paginated API call
383+
384+
The paginated API is the API that returns the result in chunks. Most of the paginated API requires you to add the query parameters to know how many items to retrieve and from where to start.
385+
386+
For example, this API call https://reqres.in/api/users?per_page=20&page=1 requires `per_page` parameter that specifies 20 items to load per page, and `page` parameter tells to start from the first page. This is called page-based pagination.
387+
388+
See [how to add the paginated API](../../../control-flow/backend-logic/api/rest-api.md#passing-query-parameters) call by adding query parameters.
389+
390+
#### 2. Passing pagination variable in API call query
391+
392+
This step includes adding the ListView -> ListTile widget and querying the paginated API call.
393+
394+
1. First, query and show data from API calls.
395+
2. While querying the API call, pass the query parameter value from the pagination variable.
396+
397+
398+
<div style={{
399+
position: 'relative',
400+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
401+
height: 0,
402+
width: '100%'}}>
403+
<iframe
404+
src="https://www.loom.com/embed/1020e46df8114b08aa9c50b90b1bc517?sid=f6b4c022-f4e6-49cf-9f45-0f267e821b45"
405+
title=""
406+
style={{
407+
position: 'absolute',
408+
top: 0,
409+
left: 0,
410+
width: '100%',
411+
height: '100%',
412+
colorScheme: 'light'
413+
}}
414+
frameborder="0"
415+
loading="lazy"
416+
webkitAllowFullScreen
417+
mozAllowFullScreen
418+
allowFullScreen
419+
allow="clipboard-write">
420+
</iframe>
421+
</div>
422+
<p></p>
423+
283424
## Pull to Refresh on ListView or GridView
284425

285426
:::info

0 commit comments

Comments
 (0)