VisualDensity

Defines the visual density of user interface components.

Inherits: Enum

Properties

• ADAPTIVE_PLATFORM_DENSITY –

  Visual density that is adaptive based on the given platform.

• COMFORTABLE –

  The profile for a "comfortable" interpretation of visual density.

• COMPACT –

  The profile for a "compact" interpretation of visual density.

• STANDARD –

  The default/standard profile for visual density.

Examples

Showcase

import flet as ft


def density_card(visual_density: ft.VisualDensity) -> ft.Container:
    return ft.Container(
        width=300,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        theme=ft.Theme(visual_density=visual_density),
        dark_theme=ft.Theme(visual_density=visual_density),
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(visual_density.name, weight=ft.FontWeight.BOLD),
                ft.IconButton(icon=ft.Icons.ADD),
                ft.Checkbox(label="Checkbox", value=True),
                ft.Chip(
                    label="Explore topics",
                    leading=ft.Icon(ft.Icons.EXPLORE_OUTLINED),
                ),
                ft.RadioGroup(
                    value="1",
                    content=ft.Row(
                        controls=[
                            ft.Radio(label=f"{i}", value=f"{i}") for i in range(1, 4)
                        ],
                    ),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="VisualDensity Showcase")
    page.add(
        ft.Text("Compare component density presets across Material controls."),
        ft.Row(
            wrap=True,
            spacing=12,
            expand=True,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[density_card(vd) for vd in ft.VisualDensity],
        ),
    )


ft.run(main)

Properties

ADAPTIVE_PLATFORM_DENSITY = 'adaptivePlatformDensity' class-attribute instance-attribute

Visual density that is adaptive based on the given platform.

For desktop platforms, this returns COMPACT, and for other platforms, it returns a default-constructed visual density.

COMFORTABLE = 'comfortable' class-attribute instance-attribute

The profile for a "comfortable" interpretation of visual density.

Individual components will interpret the density value independently, making themselves more visually dense than STANDARD and less dense than COMPACT to different degrees based on the Material Design specification of the comfortable setting for their particular use case.

It corresponds to a density value of -1 in both axes.

COMPACT = 'compact' class-attribute instance-attribute

The profile for a "compact" interpretation of visual density.

Individual components will interpret the density value independently, making themselves more visually dense than STANDARD and COMFORTABLE to different degrees based on the Material Design specification of the COMFORTABLE setting for their particular use case.

It corresponds to a density value of -2 in both axes.

STANDARD = 'standard' class-attribute instance-attribute

The default/standard profile for visual density.

This default value represents a visual density that is less dense than either COMFORTABLE or COMPACT, and corresponds to density values of zero in both axes.