ListView

The ListView widget is an extremely useful widget for displaying a list of items in a linear arrangement (vertical or horizontal). ListView is an advanced version of the widget that automatically provides scrolling when the list of items won't fit on the screen.

ListView provides a way to efficiently display a list of data in a manner that is both visually attractive and practical for managing large amounts of data. It can support both static and dynamic data.

To add the ListView widget to your project:

Select the ListView widget from the Add Widget Button or add it directly from the widget tree.
Inside the ListView, you can add various widgets, and display them in a list.

Allow Scroll

If you want to make the list scrollable, turn this toggle to On. This is On by default, and must be turned Off if you want to make the list unscrollable.

Shrink Wrap

By turning this On, you can change this behavior so that the ListView only occupies the space it needs (it will still scroll when there are more items).

Default Properties

Samples

1. Static ListView

A "static" ListView simply refers to a list view that doesn't change dynamically based on user interaction or other factors. A static ListView typically consists of a predetermined set of items, and these items remain unchanged unless manually modified by the developer. This type of ListView is ideal for displaying content that remains constant throughout the application's lifecycle, such as navigation menus, settings lists, or informational displays. In this sample there are four items in the list view and can not be updated during runtime. This type of list view are used when we want a fixed user interface.

Here are some steps to create static ListView.

Adding the ListView component to our project from widget tree.

Adding items / children in this ListView to be shown is a vertical list.

Here, we have added four items (Rows) in our ListView with an image and a text inside every Row with some styling and statically typed data.

2. JSON based ListView

Unlike a static ListView, its content can vary based on the data contained within the JSON object. This type of ListView is particularly useful for displaying dynamic content such as a list of products, news articles, or user-generated content.

In a JSON-based ListView, the number of items and their properties are determined by the structure of the JSON data. This allows for flexibility in displaying various types of information without the need for manual modification by the developer.

Here are some steps to create JSON based ListView.

Adding the ListView component to our project from widget tree.

Adding item / child in this ListView to be shown is a vertical list.

Here, we have added only one item (Row) in our ListView with an image and a text inside this Row. This Row will render repeatedly on the screen in our ListView according to JSON.

Now, In the below image it is shown how to place our JSON object inside the dataSource section to access that data in listView. Widgets like ListView expect children to arrange them in a series, so they always require a list of objects to recreate the widget according to every object present in the list.

Now, to recreate a widget for all the items in the list we use "currentItem" keyword to access the object present on the current index. In the example given below we are accessing the image URL from our JSON object.

3. API based ListView

The content of API based ListView can vary based on the data contained within the JSON object we are getting from an API call. This type of ListView is particularly useful for displaying dynamic content such as a list of products, news articles, or user-generated content.

In a API-based ListView, the number of items and their properties are determined by the structure of the JSON data coming from API. This allows for flexibility in displaying various types of information without the need for manual modification by the developer.

This is how we create a dataSource by defining an API call which should give us response in the form of JSON object.

Selecting the dataSource for a page

Linking dataSource to our ListView by using "dataSource" keyword.

Assigning data to repeating item.

Note:- "currentItem" is the keyword to access the data present on current index in our list of objects. We can navigate down in the object hierarchy by using dot notation (.) followed by the desired key as shown in above example.