Skip to main content

ListTileTitleAlignment

Defines how ListTile aligns ListTile.leading and ListTile.trailing relative to the tile's title area.

The alignment is computed against the text block formed by ListTile.title and ListTile.subtitle. Use this to tune the visual balance between icon/avatar controls and text, especially when tiles switch between one-line, two-line, and three-line layouts.

Inherits: enum.Enum

Properties

Examples​

List Tile Title Alignment showcase​

play_arrowTry Online
import flet as ft


def showcase_card(alignment: ft.ListTileTitleAlignment) -> ft.Container:
    return ft.Container(
        width=380,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(alignment.name, weight=ft.FontWeight.BOLD),
                ft.Container(
                    border=ft.Border.all(1, ft.Colors.OUTLINE),
                    border_radius=8,
                    bgcolor=ft.Colors.SURFACE,
                    content=ft.ListTile(
                        title_alignment=alignment,
                        leading=ft.CircleAvatar(content=ft.Text("JD")),
                        title=ft.Text("Jane Doe"),
                        subtitle=ft.Text(
                            "This subtitle helps visualize vertical alignment."
                        ),
                        is_three_line=True,
                        trailing=ft.Icon(ft.Icons.MORE_VERT),
                    ),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="ListTileTitleAlignment Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Compare leading/trailing alignment against title area."),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[
                            showcase_card(alignment)
                            for alignment in ft.ListTileTitleAlignment
                        ],
                    ),
                ],
            ),
        )
    )


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

Properties​

BOTTOMclass-attributeinstance-attribute​

Aligns ListTile.leading and ListTile.trailing toward the bottom of the title area.

Bottom placement respects ListTile.min_vertical_padding.

CENTERclass-attributeinstance-attribute​

Centers ListTile.leading and ListTile.trailing relative to the title/subtitle block.

THREE_LINEclass-attributeinstance-attribute​

Uses alignment behavior optimized for three-line list tile layouts.

This is the default alignment style in Material 3.

TITLE_HEIGHTclass-attributeinstance-attribute​

Uses alignment behavior based on title-height rules from legacy list tile layouts.

This is the default alignment style in Material 2.

TOPclass-attributeinstance-attribute​

Aligns ListTile.leading and ListTile.trailing toward the top of the title area.

Top placement respects ListTile.min_vertical_padding.