Layout Controls

Layout controls help you organize and position other controls in your Flet application. Understanding layout is essential for building responsive, well-structured user interfaces.

Core Layout Controls

Row

Arranges controls horizontally in a row

Column

Arranges controls vertically in a column

Stack

Overlays controls on top of each other

Container

Wraps a control with padding, margin, and decoration

Row

Arranges child controls in a horizontal array.

Basic Example

import flet as ft

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

ft.app(target=main)

Alignment

Control how items are aligned within the Row:

import flet as ft

def main(page: ft.Page):
    page.add(
        # Horizontal alignment
        ft.Row(
            controls=[ft.Text("Start"), ft.Text("Aligned")],
            alignment=ft.MainAxisAlignment.START,
        ),
        ft.Row(
            controls=[ft.Text("Center"), ft.Text("Aligned")],
            alignment=ft.MainAxisAlignment.CENTER,
        ),
        ft.Row(
            controls=[ft.Text("End"), ft.Text("Aligned")],
            alignment=ft.MainAxisAlignment.END,
        ),
        ft.Row(
            controls=[ft.Text("Space"), ft.Text("Between")],
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        ),
        # Vertical alignment
        ft.Row(
            height=100,
            controls=[
                ft.Text("Top", size=20),
                ft.Text("Aligned", size=30),
            ],
            vertical_alignment=ft.CrossAxisAlignment.START,
        ),
    )

ft.app(target=main)

Spacing and Wrapping

import flet as ft

def main(page: ft.Page):
    page.add(
        # Spacing between items
        ft.Row(
            spacing=20,
            controls=[ft.ElevatedButton(f"Button {i}") for i in range(5)],
        ),
        # Wrap to multiple rows if needed
        ft.Row(
            wrap=True,
            spacing=10,
            run_spacing=10,
            controls=[ft.ElevatedButton(f"Btn {i}") for i in range(10)],
        ),
    )

ft.app(target=main)

Column

Arranges child controls in a vertical array.

Basic Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Column(
            controls=[
                ft.Text("Title", size=24, weight=ft.FontWeight.BOLD),
                ft.Text("Subtitle", size=16),
                ft.Text("Body text goes here"),
            ],
            spacing=10,
        )
    )

ft.app(target=main)

Scrolling Column

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Column(
            height=300,
            scroll=ft.ScrollMode.AUTO,
            controls=[ft.Text(f"Item {i}") for i in range(50)],
        )
    )

ft.app(target=main)

Expanding Children

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Column(
            height=400,
            controls=[
                ft.Container(
                    content=ft.Text("Header"),
                    bgcolor=ft.Colors.BLUE_100,
                    padding=10,
                ),
                ft.Container(
                    content=ft.Text("Expanded Content"),
                    bgcolor=ft.Colors.GREEN_100,
                    padding=10,
                    expand=True,  # Takes remaining space
                ),
                ft.Container(
                    content=ft.Text("Footer"),
                    bgcolor=ft.Colors.ORANGE_100,
                    padding=10,
                ),
            ],
        )
    )

ft.app(target=main)

Stack

Positions controls on top of each other in a LIFO (Last In First Out) order.

Basic Layering

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            width=300,
            height=300,
            controls=[
                ft.Container(
                    width=300,
                    height=300,
                    bgcolor=ft.Colors.BLUE,
                ),
                ft.Container(
                    width=200,
                    height=200,
                    bgcolor=ft.Colors.RED,
                    left=50,
                    top=50,
                ),
                ft.Container(
                    width=100,
                    height=100,
                    bgcolor=ft.Colors.YELLOW,
                    left=100,
                    top=100,
                ),
            ],
        )
    )

ft.app(target=main)

Positioned Overlays

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Stack(
            width=400,
            height=300,
            controls=[
                # Background image
                ft.Image(
                    src="https://picsum.photos/400/300",
                    width=400,
                    height=300,
                    fit=ft.ImageFit.COVER,
                ),
                # Overlay text
                ft.Container(
                    content=ft.Text(
                        "Overlay Text",
                        size=30,
                        color=ft.Colors.WHITE,
                        weight=ft.FontWeight.BOLD,
                    ),
                    left=20,
                    bottom=20,
                ),
                # Top-right button
                ft.IconButton(
                    icon=ft.Icons.FAVORITE,
                    icon_color=ft.Colors.RED,
                    right=10,
                    top=10,
                ),
            ],
        )
    )

ft.app(target=main)

Container

A versatile control that combines decoration, positioning, and sizing.

Basic Decoration

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            content=ft.Text("Hello, Container!"),
            bgcolor=ft.Colors.BLUE_100,
            padding=20,
            margin=10,
            border_radius=10,
            border=ft.border.all(2, ft.Colors.BLUE),
        )
    )

ft.app(target=main)

Sizing and Alignment

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Container(
            content=ft.Text("Centered"),
            width=200,
            height=100,
            bgcolor=ft.Colors.AMBER_100,
            alignment=ft.alignment.center,
        ),
        ft.Container(
            content=ft.Text("Bottom Right"),
            width=200,
            height=100,
            bgcolor=ft.Colors.GREEN_100,
            alignment=ft.alignment.bottom_right,
        ),
    )

ft.app(target=main)

Gradients and Shadows

import flet as ft

def main(page: ft.Page):
    page.add(
        # Gradient background
        ft.Container(
            content=ft.Text("Gradient", color=ft.Colors.WHITE),
            padding=20,
            gradient=ft.LinearGradient(
                begin=ft.alignment.top_left,
                end=ft.alignment.bottom_right,
                colors=[ft.Colors.BLUE, ft.Colors.PURPLE],
            ),
            border_radius=10,
        ),
        # Shadow
        ft.Container(
            content=ft.Text("Shadow"),
            padding=20,
            bgcolor=ft.Colors.WHITE,
            border_radius=10,
            shadow=ft.BoxShadow(
                spread_radius=1,
                blur_radius=15,
                color=ft.Colors.BLUE_GREY_300,
                offset=ft.Offset(0, 5),
            ),
        ),
    )

ft.app(target=main)

Clickable Container

import flet as ft

def main(page: ft.Page):
    def container_clicked(e):
        e.control.bgcolor = ft.Colors.BLUE_200
        e.control.update()
    
    page.add(
        ft.Container(
            content=ft.Text("Click me!"),
            padding=20,
            bgcolor=ft.Colors.BLUE_100,
            border_radius=10,
            ink=True,  # Ink ripple effect
            on_click=container_clicked,
        )
    )

ft.app(target=main)

Advanced Layout Controls

GridView

Scrollable 2D grid of controls

ListView

Scrollable list of controls

ResponsiveRow

Responsive grid layout

SafeArea

Ensures content avoids system UI

GridView

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.GridView(
            runs_count=3,  # 3 columns
            spacing=10,
            run_spacing=10,
            max_extent=150,
            controls=[
                ft.Container(
                    content=ft.Text(f"Item {i}"),
                    bgcolor=ft.Colors.BLUE_100,
                    padding=10,
                    alignment=ft.alignment.center,
                )
                for i in range(20)
            ],
        )
    )

ft.app(target=main)

ListView

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.ListView(
            height=400,
            spacing=10,
            padding=20,
            controls=[
                ft.ListTile(
                    leading=ft.Icon(ft.Icons.PERSON),
                    title=ft.Text(f"User {i}"),
                    subtitle=ft.Text(f"user{i}@example.com"),
                )
                for i in range(20)
            ],
        )
    )

ft.app(target=main)

ResponsiveRow

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.ResponsiveRow(
            controls=[
                ft.Container(
                    content=ft.Text("Full width on mobile, half on desktop"),
                    bgcolor=ft.Colors.BLUE_100,
                    padding=10,
                    col={"xs": 12, "md": 6},  # Responsive columns
                ),
                ft.Container(
                    content=ft.Text("Half width on desktop"),
                    bgcolor=ft.Colors.GREEN_100,
                    padding=10,
                    col={"xs": 12, "md": 6},
                ),
            ],
        )
    )

ft.app(target=main)

Layout Best Practices

Use Expand Wisely

import flet as ft

# Good: Expand takes remaining space
ft.Row(
    controls=[
        ft.Text("Fixed"),
        ft.Container(
            content=ft.Text("Expanded"),
            expand=True,
        ),
        ft.ElevatedButton("Action"),
    ]
)

Combine Layouts

import flet as ft

# Row + Column combination
ft.Row(
    controls=[
        ft.Column(
            controls=[
                ft.Text("Left Column"),
                ft.Text("Item 1"),
                ft.Text("Item 2"),
            ],
            expand=1,
        ),
        ft.Column(
            controls=[
                ft.Text("Right Column"),
                ft.Text("Item A"),
                ft.Text("Item B"),
            ],
            expand=2,  # Takes 2x space
        ),
    ]
)

Avoid Nesting Too Deeply

# Bad: Too much nesting
ft.Container(
    content=ft.Row(
        controls=[
            ft.Container(
                content=ft.Column(
                    controls=[
                        ft.Container(content=ft.Text("Deep"))
                    ]
                )
            )
        ]
    )
)

# Good: Flatter structure
ft.Row(
    controls=[
        ft.Text("Simple", expand=True),
    ]
)

Next Steps

Learn about Navigation Controls for app structure
Explore Material Controls to populate your layouts
Check Input Controls for user interaction

API Reference

Detailed documentation:

Get Started

Core Concepts

Building Apps

Controls

CLI

Advanced

​Core Layout Controls

Row

Column

Stack

Container

​Row

​Basic Example

​Alignment

​Spacing and Wrapping

​Column

​Basic Example

​Scrolling Column

​Expanding Children

​Stack

​Basic Layering

​Positioned Overlays

​Container

​Basic Decoration

​Sizing and Alignment

​Gradients and Shadows

​Clickable Container

​Advanced Layout Controls

GridView

ListView

ResponsiveRow

SafeArea

​GridView

​ListView

​ResponsiveRow

​Layout Best Practices

​Use Expand Wisely

​Combine Layouts

​Avoid Nesting Too Deeply

​Next Steps

​API Reference

Build docs developers (and LLMs) love

Core Layout Controls

Row

Basic Example

Alignment

Spacing and Wrapping

Column

Basic Example

Scrolling Column

Expanding Children

Stack

Basic Layering

Positioned Overlays

Container

Basic Decoration

Sizing and Alignment

Gradients and Shadows

Clickable Container

Advanced Layout Controls

GridView

ListView

ResponsiveRow

Layout Best Practices

Use Expand Wisely

Combine Layouts

Avoid Nesting Too Deeply

Next Steps

API Reference