ResponsiveRow

Allows aligning child controls to virtual columns.

By default, a virtual grid has 12 columns, but that can be customized with columns property.

Similar to expand property, every control has col property which allows specifying how many columns a control should span.

Inherits: LayoutControl, AdaptiveControl

Properties

• alignment(MainAxisAlignment) –

  Defines how the child controls should be

• breakpoints(dict[str | ResponsiveRowBreakpoint, Number]) –

  TBD

• columns(ResponsiveNumber) –

  The number of virtual columns to layout children.

• controls(list[Control]) –

  A list of Controls to display.

• run_spacing(ResponsiveNumber) –

  The spacing between runs when row content is wrapped on multiple lines.

• spacing(ResponsiveNumber) –

  The spacing between controls in a row in virtual pixels.

• vertical_alignment(CrossAxisAlignment) –

  Defines how the child controls should be placed

Methods

• clean –

Examples

Live example

ResponsiveRow

import flet as ft


def main(page: ft.Page):
    def handle_page_resize(e: ft.PageResizeEvent):
        pw.value = f"{page.width} px"
        pw.update()

    page.on_resize = handle_page_resize

    pw = ft.Text(text_align=ft.TextAlign.END, style=ft.TextTheme.display_small)
    # page.overlay.append(pw)

    page.add(
        ft.ResponsiveRow(
            controls=[
                ft.Container(
                    content=ft.Text("Column 1"),
                    padding=5,
                    bgcolor=ft.Colors.YELLOW,
                    col={"xs": 12, "md": 6, "lg": 3},
                ),
                ft.Container(
                    content=ft.Text("Column 2"),
                    padding=5,
                    bgcolor=ft.Colors.GREEN,
                    col={"xs": 12, "md": 6, "lg": 3},
                ),
                ft.Container(
                    content=ft.Text("Column 3"),
                    padding=5,
                    bgcolor=ft.Colors.BLUE,
                    col={"xs": 12, "md": 6, "lg": 3},
                ),
                ft.Container(
                    content=ft.Text("Column 4"),
                    padding=5,
                    bgcolor=ft.Colors.PINK_300,
                    col={"xs": 12, "md": 6, "lg": 3},
                ),
            ],
        ),
        ft.ResponsiveRow(
            run_spacing={"xs": 10},
            controls=[
                ft.TextField(label="TextField 1", col={"md": 4}),
                ft.TextField(label="TextField 2", col={"md": 4}),
                ft.TextField(label="TextField 3", col={"md": 4}),
            ],
        ),
        pw,
    )
    handle_page_resize(None)


ft.run(main)

Properties

alignment class-attribute instance-attribute

alignment: MainAxisAlignment = START

Defines how the child controls should be placed horizontally.

breakpoints class-attribute instance-attribute

breakpoints: dict[str | ResponsiveRowBreakpoint, Number] = (
    field(
        default_factory=lambda: {
            XS: 0,
            SM: 576,
            MD: 768,
            LG: 992,
            XL: 1200,
            XXL: 1400,
        }
    )
)

TBD

columns class-attribute instance-attribute

columns: ResponsiveNumber = 12

The number of virtual columns to layout children.

controls class-attribute instance-attribute

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

A list of Controls to display.

run_spacing class-attribute instance-attribute

run_spacing: ResponsiveNumber = 10

The spacing between runs when row content is wrapped on multiple lines.

spacing class-attribute instance-attribute

spacing: ResponsiveNumber = 10

The spacing between controls in a row in virtual pixels.

Note

Has effect only when alignment is set to MainAxisAlignment.START, MainAxisAlignment.END, or MainAxisAlignment.CENTER.

vertical_alignment class-attribute instance-attribute

vertical_alignment: CrossAxisAlignment = START

Defines how the child controls should be placed vertically.

Methods

clean

clean()