• 🌎 só disponíveis na Web,
• 🖥️ só disponíveis no desktop,

• 📱 só disponíveis em celulares,
• 🅾 Read Only (Somente leitura).

# Exemplos:
page.controls.append(ft.Text("Olá!"))
page.update()

# alternativamente
page.add(ft.Text("Olá!"))
# page.add é um shortcut para page.controls.append() seguido de page.update()

# para remover (pop) o último controle da lista
page.controls.pop()
page.update()

Para um recurso externo a “url_da_fonte” é a URL absoluta, e para fontes instaladas a URL relativa para um diretório assets_dir. Esse diretório deve ser especificado na chamada para flet.app(), podendo ser um caminho relativo ao local onde está main.py ou um caminho absoluto. Por exemplo, suponha a estrutura mostrada na figura 1:

Para usar a fonte “Open Sans” e “Kanit”, importada do GitHub, como default, podemos fazer:

import flet as ft

def main(page: ft.Page):
    page.fonts = {
        "Kanit": "https://raw.githubusercontent.com/google/fonts/master/ofl/kanit/Kanit-Bold.ttf",
        "Open Sans": "/fonts/OpenSans-Regular.ttf"
    }
    page.theme = Theme(font_family="Kanit")
    page.add(
      ft.Text("Esse texto usa a fonte default Kanit"),
      ft.Text("Esse texto usa a fonte Open Sans", font_family="Open Sans")
    )
ft.app(target=main, assets_dir="assets")

send_all(message) envia para todos. send_all_on_topic(topic, message) especifica o tópico de envio.

@dataclass
class Message:
    user: str
    text: str

def main(page: ft.Page):

    def on_broadcast_message(message):
        page.add(ft.Text(f"{message.user}: {message.text}"))

    page.pubsub.subscribe(on_broadcast_message)

    def on_send_click(e):
        page.pubsub.send_all(Message("John", "Hello, all!"))

    page.add(ft.ElevatedButton(text="Send message", on_click=on_send_click))

unsubscribe() remove a sessão da lista de subscrição.

@dataclass
class Message:
    user: str
    text: str

def main(page: ft.Page):

    def on_leave_click(e):
        page.pubsub.unsubscribe()

    page.add(ft.ElevatedButton(text="Leave chat", on_click=on_leave_click))

Para remover a sessão da lista de destinatários de mensagens de um tópico use unsubscribe_topic(topic).
Para remover a sessão da lista de destinatários de mensagens de todos os tópicos: unsubscribe_all(), por exemplo quando o usuário fecha a janela:

def main(page: ft.Page):
    def client_exited(e):
        page.pubsub.unsubscribe_all()

    page.on_close = client_exited

• None ▸ (default), a coluna não pode ser percorrida e o texto pode extrapolar o espaço (overflow).
• AUTO ▸ a rolagem está ativada e a barra só aparece quando necessária.
• ADAPTIVE ▸ a rolagem está ativada e barra aparece quando aplicativo está na web ou desktop.
• ALWAYS ▸ a rolagem está ativada e barra está sempre visível.
• HIDDEN ▸ a rolagem está ativado mas a barra está oculta.

É exibido em cima da página de conteúdo. Pode ser usado junto com ProgressBar ou ProgressRing para indicar uma operação demorada.

from time import sleep
import flet as ft

def main(page: ft.Page):
    def button_click(e):
        page.splash = ft.ProgressBar()
        btn.disabled = True
        page.update()
        sleep(3)
        page.splash = None
        btn.disabled = False
        page.update()

    btn = ft.ElevatedButton("Do some lengthy task!", on_click=button_click)
    page.add(btn)

ft.app(target=main)

page.theme = theme.Theme(color_scheme_seed="green")
page.update()

A classe Theme tem as propriedades:

• color_scheme_seed ▸ cor “semente” para servir de base ao algoritmo de construção do tema.
• color_scheme ▸ uma instância de ft.ColorScheme para personalização do esquema Material colors derivedo de color_scheme_seed.
• text_theme ▸ instância de ft.TextTheme para personalização de estilos de texto.
• primary_text_theme ▸ instância de ft.TextTheme descrevendo o tema de texto que constrasta com a cor primária.
• scrollbar_theme ▸ instância de ft.ScrollbarTheme para personalizar a aparência da barra de rolagem.
• tabs_theme ▸ instância de ft.TabsTheme para personalizar a aparência do controle de Tabs.
• font_family ▸ a fonte base para todos os elementos da UI.
• use_material3 ▸ True (default) para usar Material 3; caso contrário use Material 2.
• visual_density ▸ ThemeVisualDensity enum: STANDARD (default), COMPACT, COMFORTABLE, ADAPTIVE_PLATFORM_DENSITY.
• page_transitions ▸ instância de PageTransitionsTheme para personalizar transições entre páginas ^(†).

† Transições de navegação: (theme.page_transitions personaliza transições entre páginas para diversas plataformas. Seu valor é uma instância de PageTransitionsTheme com as propriedades adicionais:

• android ▸ default: FADE_UPWARDS
• ios ▸ default: CUPERTINO
• macos ▸ default: ZOOM)
• linux ▸ default: ZOOM)
• windows ▸ default: ZOOM

Transições suportadas estão em um ENUM ft.PageTransitionTheme: NONE (transição imediata e sem animação), FADE_UPWARDS, OPEN_UPWARDS, ZOOM, CUPERTINO.

São exemplos:

theme = ft.Theme()
theme.page_transitions.android = ft.PageTransitionTheme.OPEN_UPWARDS
theme.page_transitions.ios = ft.PageTransitionTheme.CUPERTINO
theme.page_transitions.macos = ft.PageTransitionTheme.FADE_UPWARDS
theme.page_transitions.linux = ft.PageTransitionTheme.ZOOM
theme.page_transitions.windows = ft.PageTransitionTheme.NONE
page.theme = theme
page.update()

• START (default)
• END
• CENTER
• SPACE_BETWEEN
• SPACE_AROUND
• SPACE_EVENLY

Por exemplo vertical_alignment=MainAxisAlignment.START posiciona o filho no alto da página.

Se usada com uma página transparente toda a janela fica transparente: page.window_bgcolor = ft.colors.TRANSPARENT e page.bgcolor = ft.colors.TRANSPARENT.