GridView is a powerful and efficient component in Flet for displaying a scrollable, two-dimensional array of controls. It is particularly effective for handling large lists containing thousands of items, ensuring smooth scrolling performance compared to using a wrapped Column or Row.

Why Use GridView?

GridView is optimized for large datasets, making it preferable over traditional Column or Row layouts when working with many elements. A great example of its usage is in the Flet Icons Browser, where it efficiently organizes and displays a large number of icons.

Example: Photo Gallery

Below is a simple example demonstrating how to create a photo gallery using GridView in Flet.

import flet as ft

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

    images = ft.GridView(
        expand=1,
        runs_count=5,
        max_extent=150,
        child_aspect_ratio=1.0,
        spacing=5,
        run_spacing=5,
    )

    page.add(images)

    for i in range(0, 60):
        images.controls.append(
            ft.Image(
                src=f"https://picsum.photos/150/150?{i}",
                fit=ft.ImageFit.NONE,
                repeat=ft.ImageRepeat.NO_REPEAT,
                border_radius=ft.border_radius.all(10),
            )
        )
    page.update()

ft.app(main, view=ft.AppView.WEB_BROWSER)

This example dynamically loads 60 images from an online source and arranges them in a GridView with customizable spacing, aspect ratio, and scrolling behavior.

Key Properties of GridView

Layout and Display Options

  • runs_count – Defines the number of children in the cross axis.

  • max_extent – Sets the maximum width or height of a grid item.

  • child_aspect_ratio – Determines the ratio of width to height for each child.

  • spacing – Specifies the space between each child in the main axis.

  • run_spacing – Defines spacing between rows or columns.

Scrolling Behavior

  • auto_scroll – If set to True, the scrollbar automatically moves to the end when items are updated.

  • reverse – Reverses the scrolling direction if set to True.

  • horizontal – Allows GridView to be displayed in a horizontal layout.

  • scroll_to(offset, delta, key, duration, curve) – Moves the scroll position based on absolute offset, relative delta, or a specified control.

Performance Optimization

  • cache_extent – Determines how many extra pixels are preloaded before and after the visible area, enhancing scroll performance.

  • semantic_child_count – Specifies the number of children contributing semantic information for accessibility.

Events

  • on_scroll – Fires when the scroll position is changed by the user, allowing for event-driven behavior such as lazy loading.

Conclusion

GridView is an essential component in Flet for creating high-performance, scrollable grids. Whether you're building photo galleries, icon browsers, or product listings, GridView offers the flexibility, efficiency, and smooth scrolling performance needed for an optimal user experience.