Understanding the Row Widget in Flet

The Row widget in Flet is a control that arranges its children horizontally. It provides various customization options, including spacing, alignment, wrapping, and expansion capabilities. This guide will explore its properties and methods with practical examples.

Basic Usage

To create a horizontal layout, use the Row widget and pass a list of controls as its children:

import flet as ft

def main(page: ft.Page):
    row = ft.Row(
        controls=[
            ft.Text("Item 1"),
            ft.Text("Item 2"),
            ft.Text("Item 3"),
        ]
    )
    page.add(row)

ft.app(main)

Adjusting Spacing

Use the spacing property to modify the gap between child elements:

import flet as ft

def main(page: ft.Page):
    def items(count):
        return [
            ft.Container(
                content=ft.Text(str(i)),
                alignment=ft.alignment.center,
                width=50,
                height=50,
                bgcolor=ft.Colors.AMBER,
                border_radius=ft.border_radius.all(5),
            ) for i in range(1, count + 1)
        ]
    
    def gap_slider_change(e):
        row.spacing = int(e.control.value)
        row.update()
    
    gap_slider = ft.Slider(
        min=0,
        max=50,
        divisions=50,
        value=0,
        label="{value}",
        on_change=gap_slider_change,
    )

    row = ft.Row(spacing=0, controls=items(10))

    page.add(ft.Column([ft.Text("Spacing between items"), gap_slider]), row)

ft.app(main)

Wrapping Items

The wrap property allows items to move to the next line if they exceed the available space:

import flet as ft

def main(page: ft.Page):
    def items(count):
        return [
            ft.Container(
                content=ft.Text(str(i)),
                alignment=ft.alignment.center,
                width=50,
                height=50,
                bgcolor=ft.Colors.AMBER,
                border_radius=ft.border_radius.all(5),
            ) for i in range(1, count + 1)
        ]
    
    def slider_change(e):
        row.width = float(e.control.value)
        row.update()
    
    width_slider = ft.Slider(
        min=0,
        max=page.window.width,
        divisions=20,
        value=page.window.width,
        label="{value}",
        on_change=slider_change,
    )
    
    row = ft.Row(
        wrap=True,
        spacing=10,
        run_spacing=10,
        controls=items(30),
        width=page.window.width,
    )
    
    page.add(
        ft.Column([
            ft.Text("Change the row width to see wrapping in action:"),
            width_slider,
        ]),
        row,
    )

ft.app(main)

Horizontal Alignments

The alignment property defines how children are positioned along the horizontal axis:

import flet as ft

def main(page: ft.Page):
    def items(count):
        return [
            ft.Container(
                content=ft.Text(str(i)),
                alignment=ft.alignment.center,
                width=50,
                height=50,
                bgcolor=ft.Colors.AMBER_500,
            ) for i in range(1, count + 1)
        ]
    
    def row_with_alignment(align: ft.MainAxisAlignment):
        return ft.Column([
            ft.Text(str(align), size=16),
            ft.Container(content=ft.Row(items(3), alignment=align), bgcolor=ft.Colors.AMBER_100),
        ])
    
    page.add(
        row_with_alignment(ft.MainAxisAlignment.START),
        row_with_alignment(ft.MainAxisAlignment.CENTER),
        row_with_alignment(ft.MainAxisAlignment.END),
        row_with_alignment(ft.MainAxisAlignment.SPACE_BETWEEN),
        row_with_alignment(ft.MainAxisAlignment.SPACE_AROUND),
        row_with_alignment(ft.MainAxisAlignment.SPACE_EVENLY),
    )

ft.app(main)

Vertical Alignment

Use vertical_alignment to control the positioning of items along the vertical axis:

import flet as ft

def main(page: ft.Page):
    def items(count):
        return [
            ft.Container(
                content=ft.Text(str(i)),
                alignment=ft.alignment.center,
                width=50,
                height=50,
                bgcolor=ft.Colors.AMBER_500,
            ) for i in range(1, count + 1)
        ]
    
    def row_with_vertical_alignment(align: ft.CrossAxisAlignment):
        return ft.Column([
            ft.Text(str(align), size=16),
            ft.Container(
                content=ft.Row(items(3), vertical_alignment=align),
                bgcolor=ft.Colors.AMBER_100,
                height=150,
            ),
        ])
    
    page.add(
        row_with_vertical_alignment(ft.CrossAxisAlignment.START),
        row_with_vertical_alignment(ft.CrossAxisAlignment.CENTER),
        row_with_vertical_alignment(ft.CrossAxisAlignment.END),
    )

ft.app(main)

Expanding Children

Use the expand property to make a child control fill the available space:

r = ft.Row([
  ft.TextField(hint_text="Enter your name", expand=True),
  ft.ElevatedButton(text="Join chat")
])

With numeric expand factors:

r = ft.Row([
  ft.Container(expand=1, content=ft.Text("A")),
  ft.Container(expand=3, content=ft.Text("B")),
  ft.Container(expand=1, content=ft.Text("C"))
])

Summary of Row Properties

• alignment: Controls horizontal alignment (default: MainAxisAlignment.START).

• spacing: Sets space between children (default: 10).

• wrap: Enables wrapping if needed.

• run_spacing: Controls space between wrapped rows.

• scroll: Enables horizontal scrolling.

• expand: Allows children to fill available space.

• vertical_alignment: Controls vertical placement (default: CrossAxisAlignment.START).

By leveraging these properties, you can create dynamic and responsive layouts in Flet!