GridView

A scrollable, 2D array of controls.

It is very effective for large lists (thousands of items). Prefer it over wrapping Columns or Rows for smooth scrolling.

ft.GridView(
    width=180,
    runs_count=2,
    spacing=8,
    controls=[
        ft.Container(
            width=50, height=50, bgcolor=ft.Colors.PRIMARY, border_radius=8
        ),
        ft.Container(
            width=50, height=50, bgcolor=ft.Colors.SECONDARY, border_radius=8
        ),
        ft.Container(
            width=50, height=50, bgcolor=ft.Colors.TERTIARY, border_radius=8
        ),
        ft.Container(
            width=50, height=50, bgcolor=ft.Colors.ERROR, border_radius=8
        ),
    ],
)

Basic GridView

Inherits: LayoutControl, ScrollableControl, AdaptiveControl

Properties

• build_controls_on_demand(bool) –

  TBD

• cache_extent(Number | None) –

  Items that fall in the cache area (area before or after the visible area that are

• child_aspect_ratio(Number) –

  The ratio of the cross-axis to the main-axis extent of each child.

• clip_behavior(ClipBehavior | None) –

  The content will be clipped (or not) according to this option.

• controls(list[Control]) –

  A list of controls to display inside grid.

• horizontal(bool) –

  Whether to layout the grid items horizontally.

• max_extent(int | None) –

  The maximum width or height of the grid item.

• padding(PaddingValue | None) –

  The amount of space by which to inset the children.

• reverse(bool) –

  Whether the scroll view scrolls in the reading direction.

• run_spacing(Number) –

  The number of logical pixels between each child along the cross axis.

• runs_count(int) –

  The number of children in the cross axis.

• semantic_child_count(int | None) –

  The number of children that will contribute semantic information.

• spacing(Number) –

  The number of logical pixels between each child along the main axis.

Examples

Live example

Photo gallery

import flet as ft


def main(page: ft.Page):
    page.title = "GridView Example"
    page.theme_mode = ft.ThemeMode.DARK
    page.padding = 50

    page.add(
        ft.GridView(
            expand=1,
            runs_count=5,
            max_extent=150,
            child_aspect_ratio=1.0,
            spacing=5,
            run_spacing=5,
            controls=[
                ft.Image(
                    src=f"https://picsum.photos/150/150?{i}",
                    fit=ft.BoxFit.NONE,
                    repeat=ft.ImageRepeat.NO_REPEAT,
                    border_radius=ft.BorderRadius.all(10),
                )
                for i in range(0, 60)
            ],
        )
    )


ft.run(main)

Properties

build_controls_on_demand class-attribute instance-attribute

build_controls_on_demand: bool = True

TBD

cache_extent class-attribute instance-attribute

cache_extent: Number | None = None

Items that fall in the cache area (area before or after the visible area that are about to become visible when the user scrolls) are laid out even though they are not (yet) visible on screen.

The cacheExtent describes how many pixels the cache area extends before the leading edge and after the trailing edge of the viewport.

The total extent, which the viewport will try to cover with controls, is cache_extent before the leading edge + extent of the main axis + cache_extent after the trailing edge.

child_aspect_ratio class-attribute instance-attribute

child_aspect_ratio: Number = 1.0

The ratio of the cross-axis to the main-axis extent of each child.

clip_behavior class-attribute instance-attribute

clip_behavior: ClipBehavior | None = None

The content will be clipped (or not) according to this option.

controls class-attribute instance-attribute

controls: list[Control] = field(default_factory=list)

A list of controls to display inside grid.

horizontal class-attribute instance-attribute

horizontal: bool = False

Whether to layout the grid items horizontally.

max_extent class-attribute instance-attribute

max_extent: int | None = None

The maximum width or height of the grid item.

padding class-attribute instance-attribute

padding: PaddingValue | None = None

The amount of space by which to inset the children.

reverse class-attribute instance-attribute

reverse: bool = False

Whether the scroll view scrolls in the reading direction.

For example, if the reading direction is left-to-right and horizontal is True, then the scroll view scrolls from left to right when reverse is False and from right to left when reverse is True.

Similarly, if horizontal is False, then the scroll view scrolls from top to bottom when reverse is False and from bottom to top when reverse is True.

run_spacing class-attribute instance-attribute

run_spacing: Number = 10

The number of logical pixels between each child along the cross axis.

runs_count class-attribute instance-attribute

runs_count: int = 1

The number of children in the cross axis.

semantic_child_count class-attribute instance-attribute

semantic_child_count: int | None = None

The number of children that will contribute semantic information.

spacing class-attribute instance-attribute

spacing: Number = 10

The number of logical pixels between each child along the main axis.