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

• avoid_intrusions_bottom(bool) –

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

• avoid_intrusions_left(bool) –

  Whether to avoid system intrusions on the left.

• avoid_intrusions_right(bool) –

  Whether to avoid system intrusions on the right.

• avoid_intrusions_top(bool) –

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

• content(Control) –

  The control to display.

• maintain_bottom_view_padding(bool) –

  Specifies whether the SafeArea should maintain the bottom

• minimum_padding(PaddingValue) –

  The minimum padding to apply.

Example

Live example

Basic Example

import flet as ft


class State:
    counter = 0


def main(page: ft.Page):
    state = State()

    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(
                message := ft.Text("0", size=50),
                alignment=ft.Alignment.CENTER,
            ),
        )
    )


ft.run(main)

Properties

avoid_intrusions_bottom

avoid_intrusions_bottom: bool = True

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

avoid_intrusions_left

avoid_intrusions_left: bool = True

Whether to avoid system intrusions on the left.

avoid_intrusions_right

avoid_intrusions_right: bool = True

Whether to avoid system intrusions on the right.

avoid_intrusions_top

avoid_intrusions_top: bool = True

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

content

content: Control

The control to display.

Must be visible.

Raises:

• ValueError –

  If content is not visible.

maintain_bottom_view_padding

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_padding

minimum_padding: PaddingValue = 0

The minimum padding to apply.

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