GridView

Here you will find the documentation about the GridView component, its attributes and constructors.

What is it?

The GridView component defines how a group of items will place itself natively in a recyclable grid layout. The items in a GridView could be any server-driven component. The GridView use is more suitable for visual content and is recommended for situations where an item repeats itself but with different data, like a card with movies details for example.

This is how this component is structured:

GridView

AttributeTypeRequiredDefinition
spanCountIntDefines the number of columns or rows that the GridView will display.
directionGridViewDirectionSets the direction in which items are displayed.
contextContextDataDefines the context of the component.
onInitList<Action>List of actions to be performed as soon as the component is displayed.
dataSourceBind<List<Any>>Expression that points to a list of values used to populate the component.
templatesList<ServerDrivenComponent >It represents a template array, where each template corresponds to a cell in the list through aServerDrivenComponent.
isScrollIndicatorVisibleBoolSet the scroll bar visibility.
onScrollEndList<Action>List of actions taken when the list ends.
scrollEndThresholdIntDefines the percentage scrolled from the list to trigger onScrollEnd.
iteratorNameStringIt is the context identifier for each cell.
keyStringPoints to a unique value present in each item of the dataSource to be used as a suffix in the ids of the template components.
itemAspectRatioDoubleonly valid for Flutter. This sets the aspect ratio of the items in the grid. If left in blank, the items will be squares (itemAspectRatio = 1). The Flutter GridView doesn’t accept items with arbitrary size.

GridViewDirection

It is an ENUM, the values are:

ValuesDefinition
VERTICALWhen itens are displayed in COLUMNS.
HORIZONTALWhen itens are displayed in ROWS.

Templates

The template to use will be decided according to the property case of the template.

How to use it?

GridView

data class Person(
    val name: String,
    val race: String,
    val planet: String,
    val isMistborn: Boolean,
    val age: Int,
    val sex: String
)

val characters = listOf(
    Person(
        name = "Kelsier",
        race = "Half-skaa",
        planet = "Scadrial",
        isMistborn = true,
        age = 38,
        sex = "male"
    ),
    Person(
        name = "Vin",
        race = "Half-skaa",
        planet = "Scadrial",
        isMistborn = true,
        age = 20,
        sex = "female"
    ),
    Person(
        name = "TenSoon",
        race = "Kandra",
        planet = "Scadrial",
        isMistborn = false,
        age = 40,
        sex = "male"
    ),
    Person(
        name = "TenSoon",
        race = "Kandra",
        planet = "Scadrial",
        isMistborn = false,
        age = 40,
        sex = "male"
    )
)

GridView(
    spanCount = 2,
    direction = GridViewDirection.HORIZONTAL,
    context = ContextData(id = "characters", value = characters),
    dataSource = expressionOf("@{characters}"),
    templates = listOf(
        Template(
            case = expressionOf("@{eq(item.race, 'Half-skaa')}"),
            view = Container(
                children = listOf(
                    Text("Name: @{item.name}"),
                    Text("Race: @{item.race}"),
                    Text("Mistborn: @{item.isMistborn}"),
                    Text("Planet: @{item.planet}"),
                    Text("sex: @{item.sex}"),
                    Text("age: @{item.age}"),
                )
            ).setStyle {
                margin = EdgeValue.only(bottom = 20)
            }
        ),
        Template(
            case = expressionOf("@{eq(item.race, 'Kandra')}"),
            view = Container(
                children = listOf(
                    Text("Name: @{item.name}"),
                    Text("Race: @{item.race}"),
                    Text("Mistborn: @{item.isMistborn}"),
                )
            ).setStyle {
                margin = EdgeValue.only(bottom = 20)
            }
        ),
        Template(
            view = Container(
                children = listOf(
                    Text("Planet: @{item.planet}"),
                    Text("sex: @{item.sex}"),
                    Text("age: @{item.age}"),
                )
            ).setStyle {
                margin = EdgeValue.only(bottom = 20)
            }
        )
    )
)