Flet

Introducció

Flet permet construir una interfície d’usuari pel teu programa amb controls Flet que estan basats en Flutter de Google.

Flet va més enllà de simplement empaquetar els widgets de Flutter. Afegeix el seu propi toc combinant widgets més petits, simplificant complexitats, implementant les millors pràctiques d’interfície d’usuari i aplicant valors predeterminats sensats. Això assegura que les teves aplicacions es vegin elegants i polides sense requerir esforços addicionals de disseny per la teva part.

Crea una aplicació

Crea un projecte amb UV:

uv init school
cd school

Executa la següent comanda per afegir Flet com a dependència:

uv add 'flet[all]' --dev

Assegura’t que el CLI de Flet s’ha instal·lat i es pot executar:

uv run flet --version

Per crear una nova aplicació Flet “mínima”, executa la següent comanda:

uv run flet create

Nota

El pyproject.toml original creat per uv init serà reemplaçat pel de la plantilla de l’aplicació Flet.

Modifica el fitxer main.py:

main.py

import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )


ft.app(main)

El fitxer src/main.py conté el programa Flet. Té una funció main() on afegiràs elements d’interfície d’usuari (controls) a una pàgina o finestra.

L’aplicació acaba amb una funció bloquejant ft.app() que inicialitza l’aplicació Flet i executa main().

Executant l’aplicació Flet

L’aplicació Flet es pot executar com a aplicació d’escriptori o web utilitzant una única comanda flet run.

Executa com a aplicació d’escriptori

Per executar l’aplicació Flet com a aplicació d’escriptori, utilitza la següent comanda:

uv run flet run

Aquesta comanda executarà main.py ubicat al directori actual.

L’aplicació s’iniciarà en una finestra nativa del sistema operatiu!

Executa com a aplicació web

Per executar l’aplicació Flet com a aplicació web, utilitza la següent comanda:

uv run flet run --web

S’obrirà una nova finestra/pestanya del navegador i l’aplicació utilitzarà un port TCP aleatori.

Per executar en un port fix, utilitza l’opció --port (-p), per exemple:

uv run flet run --web --port 8000 main.py

Hot reload

Per defecte, Flet vigilarà el fitxer de script que s’ha executat i recarregarà l’aplicació cada vegada que el fitxer es modifiqui i es guardi, però no vigilarà els canvis en altres fitxers.

uv run flet run -d

Per vigilar el directori del script i tots els subdirectoris recursivament, utilitza la següent comanda:

poetry run flet run -d -r [script]

Controls

La interfície d’usuari està feta de Controls (també coneguts com a widgets).

Per fer els controls visibles a l’usuari, han de ser afegits a una Page o dins d’altres controls. Page és el control de nivell superior. La nidificació de controls es pot representar com un arbre amb Page com a arrel.

Els controls són simplement classes Python. Crea instàncies de control mitjançant constructors amb paràmetres que coincideixin amb les seves propietats, per exemple:

t = ft.Text(value="Hello, world!", color="green")

Per mostrar el control en una pàgina, afegeix-lo a la llista de controls de la Pàgina i crida page.update() per enviar els canvis de la pàgina al navegador o client d’escriptori:

text.py

import flet as ft

def main(page: ft.Page):
    t = ft.Text(value="Hello, world!", color="green")
    page.controls.append(t)
    page.update()

ft.app(main)

uv run flet run text.py

Flet controls

Youtube

A continuació tens un videos que t’explica tot el que et fa falta:

Play