Skip to main content

SafeArea

A control that insets its content by sufficient padding to avoid intrusions by the operating system.

For example, this will indent the content by enough to avoid the status bar at the top of the screen.

It will also indent the content by the amount necessary to avoid the Notch on the iPhone X, or other similar creative physical features of the display.

When a minimum_padding is specified, the greater of the minimum padding or the safe area padding will be applied.

Inherits: LayoutControl, AdaptiveControl

Properties

Example​

Live example

Basic Example​

import flet as ft


class State:
    counter = 0


def main(page: ft.Page):
    state = State()
    message = ft.Text("0", size=50)

    def handle_button_click(e: ft.Event[ft.FloatingActionButton]):
        state.counter += 1
        message.value = str(state.counter)
        message.update()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD,
        on_click=handle_button_click,
    )

    page.add(
        ft.SafeArea(
            expand=True,
            content=ft.Container(
                alignment=ft.Alignment.CENTER,
                content=message,
            ),
        )
    )


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

Properties​

avoid_intrusions_bottomclass-attributeinstance-attribute​

avoid_intrusions_bottom: bool = True

Whether to avoid system intrusions on the bottom side of the screen.

avoid_intrusions_leftclass-attributeinstance-attribute​

avoid_intrusions_left: bool = True

Whether to avoid system intrusions on the left.

avoid_intrusions_rightclass-attributeinstance-attribute​

avoid_intrusions_right: bool = True

Whether to avoid system intrusions on the right.

avoid_intrusions_topclass-attributeinstance-attribute​

avoid_intrusions_top: bool = True

Whether to avoid system intrusions at the top of the screen, typically the system status bar.

contentinstance-attribute​

content: Annotated[Control, V.visible_control()]

The control to display.

Raises:

  • ValueError - If it is not visible.

maintain_bottom_view_paddingclass-attributeinstance-attribute​

maintain_bottom_view_padding: bool = False

Specifies whether the SafeArea should maintain the bottom MediaQueryData.viewPadding instead of the bottom MediaQueryData.padding.

This avoids layout shifts caused by keyboard overlays, useful when flexible controls are used.

minimum_paddingclass-attributeinstance-attribute​

minimum_padding: PaddingValue = 0

The minimum padding to apply.

The greater of the minimum insets and the media padding will be applied.