SafeArea

Outro controle voltado para a diagramação das páginas de aplicativos, SafeArea insere conteúdo com preenchimento (padding, as distâncias entre as margens internas do container com as bordas externas do controle) de modo a impedir que os elementos de interface do sistema operacional se sobreponham às do aplicativo. Ele recua o conteúdo interno evitando sobreposição pela barra de status no alto da tela.

Em particular esse recurso permite o recuo do conteúdo para evitar obstrução pelo “entalhe” no iPhone, (notch) ou outras modificações na geometria das telas em aparelhos menores. Quando um preenchimento mínimo é especificado, o maior preenchimento mínimo ou o preenchimento da área segura será aplicado.

Propriedades de SafeArea

Propriedade	Descrição
bottom	booleano, se o aplicativo deve evitar intrusão do sistema operacional na parte inferior da tela. Default é True.
content	recebe o controle filho a ser exibido dentro SafeArea.
left	booleano, se o aplicativo deve evitar intrusão do SO na parte esquerda da tela. Default é True.
maintain_bottom_view_padding	booleano, default é False. Se True o controle SafeArea deve manter em exibição o MediaQueryData.viewPadding no parte inferior da tela, em vez do MediaQueryData.padding (que é o default). Por exemplo, caso um teclado na tela seja exibido acima da SafeArea, o preenchimento interno (padding) pode ser mantido abaixo da obstrução sem ser ocultado. Pode ser útil quando o layout contém controles flexíveis que podem ser movidos na interface do usuário. Definir SafeArea=True evita alteração na IU.
minimum	preenchimento (padding) mínimo a ser aplicado.
right	booleano, se o aplicativo deve evitar intrusão do SO na parte direita da tela. Default é True.
right	booleano, se o aplicativo deve evitar intrusão do SO na parte superior da tela, que em geral contém uma barra de status. Default é True.

Um exemplo de uso do controle pode ser visto em Uso de SafeArea.

Placeholder

A palavra “placeholder” pode ser descrita em português como “marcador de posição” ou “espaço reservado”. O controle placeholder desenha uma caixa na página, representando o local onde outro widget será colocado, mais tarde. Ele é útil para marcar áreas do aplicativo durante o desenvolvimento, para efeito de visualização e organização do projeto.

Basicamente o Placeholder pode inserido na página sem muitas propriedades.

import flet as ft
def main(page: ft.Page):
    page.add(ft.Placeholder(expand=True))
ft.app(main)

Propriedades de Placeholder

Propriedade	Descrição
content	um controle que pode ser adicionado dentro do placeholder (opcional)
color	a cor do traço marcando o espaço reservado
fallback_height	altura da caixa a ser usada quando o placeholder não tem uma altura definida. O valor é um float com default de 400.0.
fallback_width	largura da caixa a ser usada quando o placeholder não tem uma largura definida. O valor é um float com default de 400.0.
stroke_width	largura da linha usada para desenhar a caixa do placeholder na página. O value é um float com default de 2.0.

Exemplo de uso de Placeholder

import flet as ft

def main(page: ft.Page):
    page.title = "Página com um Placeholder"
    page.bgcolor=ft.Colors.BLUE_50
    page.window.width=500
    page.window.height=500
        
    page.add(
        ft.Container(
            border=ft.border.all(1, ft.Colors.BLACK),
            content=ft.Text("Um container com texto fora do placeholder", color=ft.Colors.BLACK),
            margin=ft.margin.symmetric(horizontal=1, vertical=1),
            alignment=ft.alignment.center,
            height=100,
            bgcolor=ft.Colors.GREEN_50,
        ),
        ft.Placeholder(
            expand=True,
            stroke_width=4.0,
            color=ft.Colors.DEEP_PURPLE_500,
            content=ft.Container(
                content=ft.Text("Um container com texto dentro do placeholder", color=ft.Colors.BLACK),
                alignment=ft.alignment.center,
                width=500,
                height=100,
            ),
            width=600,
        )
    )
ft.app(main)