Skip to main content

VisualDensity

Defines the visual density of user interface components.

Inherits: enum.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​

Visual Density showcase​

play_arrowTry Online
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.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="VisualDensity Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    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],
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

ADAPTIVE_PLATFORM_DENSITYclass-attributeinstance-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.

COMFORTABLEclass-attributeinstance-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.

COMPACTclass-attributeinstance-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.

STANDARDclass-attributeinstance-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.