Skip to main content

FloatingActionButtonLocation

Defines a position for the FloatingActionButton.

See FloatingActionButtonLocation from Flutter documentation for placement location examples.

Inherits: enum.Enum

Properties

  • CENTER_DOCKED - Centers the floating action button over the bottom navigation bar so its center aligns with the bar's top edge.
  • CENTER_FLOAT - Centers the floating action button near the bottom of the screen.
  • CENTER_TOP - Centers the floating action button over the boundary between the app bar and the body.
  • END_CONTAINED - Aligns the floating action button to the end side and positions it so it lines up with the vertical center of the bottom navigation bar.
  • END_DOCKED - Aligns the floating action button to the end side and docks it over the bottom navigation bar so its center aligns with the bar's top edge.
  • END_FLOAT - Aligns the floating action button to the end side near the bottom of the screen.
  • END_TOP - Aligns the floating action button to the end side over the boundary between the app bar and the body.
  • MINI_CENTER_DOCKED - Like CENTER_DOCKED, but intended for a mini floating action button.
  • MINI_CENTER_FLOAT - Like CENTER_FLOAT, but optimized for a mini floating action button.
  • MINI_CENTER_TOP - Like CENTER_TOP, but intended for a mini floating action button.
  • MINI_END_DOCKED - Like END_DOCKED, but intended for a mini floating action button.
  • MINI_END_FLOAT - Like END_FLOAT, but optimized for a mini floating action button.
  • MINI_END_TOP - Like END_TOP, but intended for a mini floating action button.
  • MINI_START_DOCKED - Like START_DOCKED, but intended for a mini floating action button.
  • MINI_START_FLOAT - Like START_FLOAT, but optimized for a mini floating action button.
  • MINI_START_TOP - Like START_TOP, but intended for a mini floating action button.
  • START_DOCKED - Aligns the floating action button to the start side and docks it over the bottom navigation bar so its center aligns with the bar's top edge.
  • START_FLOAT - Aligns the floating action button to the start side near the bottom of the screen.
  • START_TOP - Aligns the floating action button to the start side over the boundary between the app bar and the body.

Examples​

Floating Action Button Location showcase​

play_arrowTry Online
import flet as ft


def showcase_card(location: ft.FloatingActionButtonLocation) -> ft.Container:
    mini = location.name.startswith("MINI_")
    return ft.Container(
        width=300,
        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(location.name, weight=ft.FontWeight.BOLD),
                ft.Pagelet(
                    width=260,
                    height=200,
                    bgcolor=ft.Colors.SURFACE,
                    appbar=ft.AppBar(
                        title=ft.Text("AppBar", size=12),
                        center_title=True,
                        toolbar_height=38,
                        bgcolor=ft.Colors.PRIMARY_CONTAINER,
                    ),
                    content=ft.Container(
                        alignment=ft.Alignment.CENTER,
                        content=ft.Text("Body", size=12),
                    ),
                    bottom_appbar=ft.BottomAppBar(
                        height=42,
                        bgcolor=ft.Colors.SECONDARY_CONTAINER,
                    ),
                    floating_action_button=ft.FloatingActionButton(
                        icon=ft.Icons.ADD,
                        mini=mini,
                        bgcolor=ft.Colors.LIGHT_BLUE_400,
                    ),
                    floating_action_button_location=location,
                ),
            ],
        ),
    )


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

    page.appbar = ft.AppBar(title="FloatingActionButtonLocation Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Compare FloatingActionButton placement presets."),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[
                            showcase_card(location)
                            for location in ft.FloatingActionButtonLocation
                        ],
                    ),
                ],
            ),
        )
    )


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

Properties​

CENTER_DOCKEDclass-attributeinstance-attribute​

Centers the floating action button over the bottom navigation bar so its center aligns with the bar's top edge.

This is typically used with a bottom navigation bar or bottom app bar that can visually accommodate the overlapping button.

CENTER_FLOATclass-attributeinstance-attribute​

Centers the floating action button near the bottom of the screen.

CENTER_TOPclass-attributeinstance-attribute​

Centers the floating action button over the boundary between the app bar and the body.

END_CONTAINEDclass-attributeinstance-attribute​

Aligns the floating action button to the end side and positions it so it lines up with the vertical center of the bottom navigation bar.

END_DOCKEDclass-attributeinstance-attribute​

Aligns the floating action button to the end side and docks it over the bottom navigation bar so its center aligns with the bar's top edge.

END_FLOATclass-attributeinstance-attribute​

Aligns the floating action button to the end side near the bottom of the screen.

END_TOPclass-attributeinstance-attribute​

Aligns the floating action button to the end side over the boundary between the app bar and the body.

MINI_CENTER_DOCKEDclass-attributeinstance-attribute​

Like CENTER_DOCKED, but intended for a mini floating action button.

MINI_CENTER_FLOATclass-attributeinstance-attribute​

Like CENTER_FLOAT, but optimized for a mini floating action button.

MINI_CENTER_TOPclass-attributeinstance-attribute​

Like CENTER_TOP, but intended for a mini floating action button.

MINI_END_DOCKEDclass-attributeinstance-attribute​

Like END_DOCKED, but intended for a mini floating action button.

MINI_END_FLOATclass-attributeinstance-attribute​

Like END_FLOAT, but optimized for a mini floating action button.

MINI_END_TOPclass-attributeinstance-attribute​

Like END_TOP, but intended for a mini floating action button.

MINI_START_DOCKEDclass-attributeinstance-attribute​

Like START_DOCKED, but intended for a mini floating action button.

MINI_START_FLOATclass-attributeinstance-attribute​

Like START_FLOAT, but optimized for a mini floating action button.

MINI_START_TOPclass-attributeinstance-attribute​

Like START_TOP, but intended for a mini floating action button.

START_DOCKEDclass-attributeinstance-attribute​

Aligns the floating action button to the start side and docks it over the bottom navigation bar so its center aligns with the bar's top edge.

START_FLOATclass-attributeinstance-attribute​

Aligns the floating action button to the start side near the bottom of the screen.

START_TOPclass-attributeinstance-attribute​

Aligns the floating action button to the start side over the boundary between the app bar and the body.