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.

Example​

Live example

import flet as ft

class State:
    counter = 0

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

    def add_click(e):
        state.counter += 1
        counter.value = str(state.counter)
        counter.update()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.icons.ADD, on_click=add_click
    )
    page.add(
        ft.SafeArea(
            ft.Container(
                counter := ft.Text("0", size=50),
                alignment=ft.alignment.center,
            ),
            expand=True,
        )
    )

ft.app(main)

Properties​

bottom​

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

Defaults to True.

content​

A Control to display inside safe area.

left​

Whether to avoid system intrusions on the left.

Defaults to True.

maintain_bottom_view_padding​

Specifies whether the SafeArea should maintain the bottom MediaQueryData.viewPadding instead of the bottom MediaQueryData.padding, defaults to False.

For example, if there is an onscreen keyboard displayed above the SafeArea, the padding can be maintained below the obstruction rather than being consumed. This can be helpful in cases where your layout contains flexible controls, which could visibly move when opening a software keyboard due to the change in the padding value. Setting this to true will avoid the UI shift.

minimum​

This minimum padding to apply.

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

Deprecated (renamed) in v0.23.0 and will be removed in v0.26.0. Use minimum_padding instead.

minimum_padding​

This minimum padding to apply.

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

Whether to avoid system intrusions on the right.

Defaults to True.

top​

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

Defaults to True.