ResponsiveRow: A Flexible Grid Layout for Flet Applications

ResponsiveRow is a powerful layout control in Flet that brings the flexibility of grid-based design, similar to the Bootstrap web framework, into Python applications. It enables developers to create responsive UIs that automatically adjust to different screen sizes by aligning child controls to virtual columns.

Understanding ResponsiveRow

By default, ResponsiveRow divides the layout into 12 virtual columns, which can be customized using the columns property. Each child control within the ResponsiveRow can specify how many columns it should span using the col property, making it easy to design flexible and structured layouts.

Basic Usage

Here’s a simple example of a two-column layout where each column spans 6 virtual columns:

import flet as ft

ft.ResponsiveRow([
    ft.Column(col=6, controls=[ft.Text("Column 1")]),
    ft.Column(col=6, controls=[ft.Text("Column 2")])
])

In this case, the two columns will always occupy equal space, regardless of the screen size.

Responsiveness with Breakpoints

The true power of ResponsiveRow comes from its ability to adapt to different screen sizes. Instead of setting a constant col value, you can specify different values for various breakpoints:

For example, to collapse content into a single column on smaller screens but display two columns on larger screens:

import flet as ft

ft.ResponsiveRow([
    ft.Column(col={"sm": 6}, controls=[ft.Text("Column 1")]),
    ft.Column(col={"sm": 6}, controls=[ft.Text("Column 2")])
])

In this case, the layout dynamically adjusts based on the screen size.

Live Example

Here’s a more complex example demonstrating how ResponsiveRow adapts UI elements:

import flet as ft

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

    page.on_resize = page_resize

    pw = ft.Text(bottom=50, right=50, style="displaySmall")
    page.overlay.append(pw)
    page.add(
        ft.ResponsiveRow([
            ft.Container(
                ft.Text("Column 1"),
                padding=5,
                bgcolor=ft.Colors.YELLOW,
                col={"sm": 6, "md": 4, "xl": 2},
            ),
            ft.Container(
                ft.Text("Column 2"),
                padding=5,
                bgcolor=ft.Colors.GREEN,
                col={"sm": 6, "md": 4, "xl": 2},
            ),
            ft.Container(
                ft.Text("Column 3"),
                padding=5,
                bgcolor=ft.Colors.BLUE,
                col={"sm": 6, "md": 4, "xl": 2},
            ),
            ft.Container(
                ft.Text("Column 4"),
                padding=5,
                bgcolor=ft.Colors.PINK_300,
                col={"sm": 6, "md": 4, "xl": 2},
            ),
        ]),
        ft.ResponsiveRow([
            ft.TextField(label="TextField 1", col={"md": 4}),
            ft.TextField(label="TextField 2", col={"md": 4}),
            ft.TextField(label="TextField 3", col={"md": 4}),
        ], run_spacing={"xs": 10}),
    )
    page_resize(None)

ft.app(main)

Properties of ResponsiveRow

ResponsiveRow provides several configurable properties to fine-tune layout behavior:

• alignment: Controls the horizontal alignment of child controls. Default is MainAxisAlignment.START.

• columns: Defines the number of virtual columns. Default is 12.

• controls: A list of child controls to be displayed.

• rtl: Enables right-to-left text direction. Default is False.

• run_spacing: Defines spacing between wrapped rows when content spans multiple lines.

• spacing: Defines spacing between controls in a row (applies only when alignment is set to START, END, or CENTER).

• vertical_alignment: Controls vertical alignment of child elements. Default is CrossAxisAlignment.START.

Conclusion

ResponsiveRow is an essential tool for building adaptive UIs in Flet applications. With its intuitive grid-based approach and customizable breakpoints, it provides a flexible and efficient way to create layouts that work seamlessly across various screen sizes. Whether you're designing simple layouts or complex responsive interfaces, ResponsiveRow makes structuring your UI easy and scalable.

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/responsiverow-a-flexible-grid-layout-for-flet-applications/

License Agreement:Attribution-NonCommercial 4.0 International License