Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding ListView widget
  • Customizing ListView Widget
  • Allow Scroll
  • Shrink Wrap
  • Default Properties
  • Samples
  • 1. Static ListView
  • 2. JSON based ListView
  • 3. API based ListView
  1. BUILDING UI
  2. Widgets
  3. Layout Widgets

ListView

PreviousLayout WidgetsNextWeb View

Last updated 1 month ago

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.

Adding ListView widget

To add the ListView widget to your project:

  1. Select the ListView widget from the Add Widget Button or add it directly from the widget tree.

  2. Inside the ListView, you can add various widgets, and display them in a list.

Customizing ListView Widget

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.

You can customize the appearance and behavior of this widget using the various properties available under the .

Column
Widget Default Properties