Lezione 2: Componenti base — Text, Button, Icon, TextField

Obiettivi

• Conoscere i componenti base di Flet
• Distinguere i diversi tipi di bottone
• Usare TextField per raccogliere input dall’utente
• Capire il meccanismo on_change per reagire all’input

---

1. Recap della Lezione 1

Nella lezione precedente abbiamo visto:

import flet as ft

def main(page: ft.Page):
    page.title = "Ciao Flet!"
    page.add(ft.Text("Hello World"))

ft.app(target=main)

Oggi aggiungiamo bottoni, icone e campi di input.

---

2. I bottoni in Flet

Flet offre diversi tipi di bottone:

Componente	Aspetto	Quando usarlo
ElevatedButton	3D, con ombra	Azione principale
FilledButton	Pieno, colorato	Azione importante
OutlinedButton	Solo bordo	Azione secondaria
TextButton	Solo testo	Azione meno importante
IconButton	Solo icona	Azione con icona

Esempio: tutti i bottoni

import flet as ft

def main(page: ft.Page):
    page.title = "Bottoni in Flet"
    page.padding = 30

    page.add(
        ft.ElevatedButton("Elevato", on_click=lambda e: print("Elevato!")),
        ft.FilledButton("Pieno", on_click=lambda e: print("Pieno!")),
        ft.OutlinedButton("Bordato", on_click=lambda e: print("Bordato!")),
        ft.TextButton("Testuale", on_click=lambda e: print("Testuale!")),
        ft.IconButton(icon=ft.icons.FAVORITE, on_click=lambda e: print("Cuore!")),
    )

ft.app(target=main)

Personalizzare i bottoni

ft.ElevatedButton(
    text="Bottone personalizzato",
    icon=ft.icons.STAR,        # Icona a sinistra del testo
    icon_color="amber",         # Colore dell'icona
    color="white",              # Colore del testo
    bgcolor="purple",           # Colore di sfondo
    style=ft.ButtonStyle(
        shadow_color="grey",
        elevation=5,
        padding=20,
        border_radius=10,
    )
)

---

3. Le icone

Flet include migliaia di icone dalla libreria Material Icons di Google.

Sintassi

ft.Icon(name=ft.icons.NOME_ICONA)

Esempi

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row([
            ft.Icon(ft.icons.HOME, size=40, color="blue"),
            ft.Icon(ft.icons.SETTINGS, size=40, color="grey"),
            ft.Icon(ft.icons.PERSON, size=40, color="green"),
            ft.Icon(ft.icons.FAVORITE, size=40, color="red"),
            ft.Icon(ft.icons.STAR, size=40, color="amber"),
        ])
    )

ft.app(target=main)

Come trovare le icone

Visita materialicons.com per cercare icone. Il nome in Flet è lo stesso con ft.icons.NOME.

Esempi utili:

• ft.icons.HOME — casa
• ft.icons.SEARCH — lente di ingrandimento
• ft.icons.PERSON — persona
• ft.icons.SETTINGS — ingranaggio
• ft.icons.FAVORITE — cuore pieno
• ft.icons.FAVORITE_BORDER — cuore vuoto
• ft.icons.DELETE — cestino
• ft.icons.ADD — più
• ft.icons.EMAIL — email
• ft.icons.PHONE — telefono

---

4. TextField: raccogliere input

TextField crea un campo di testo dove l’utente può scrivere.

Esempio base

import flet as ft

def main(page: ft.Page):
    page.title = "Ciao, come ti chiami?"
    page.padding = 30

    nome = ft.TextField(label="Il tuo nome")

    def saluta(e):
        page.add(ft.Text(f"Ciao, {nome.value}!"))

    bottone = ft.ElevatedButton("Saluta", on_click=saluta)

    page.add(nome, bottone)

ft.app(target=main)

Proprietà principali di TextField

Proprietà	Descrizione	Esempio
label	Etichetta sopra il campo	label="Nome"
hint_text	Testo di suggerimento	hint_text="Inserisci nome"
value	Valore corrente	value="Mario"
password	Nasconde il testo	password=True
multiline	Testo su più righe	multiline=True
max_lines	Numero massimo di righe	max_lines=3
width	Larghezza in pixel	width=300
prefix_icon	Icona a sinistra	prefix_icon=ft.icons.PERSON
suffix_icon	Icona a destra	suffix_icon=ft.icons.CHECK
disabled	Disabilita il campo	disabled=True

Esempio: form di registrazione

import flet as ft

def main(page: ft.Page):
    page.title = "Registrazione"
    page.padding = 30

    nome = ft.TextField(
        label="Nome completo",
        hint_text="Inserisci nome e cognome",
        prefix_icon=ft.icons.PERSON
    )

    email = ft.TextField(
        label="Email",
        hint_text="nome@esempio.com",
        prefix_icon=ft.icons.EMAIL
    )

    password = ft.TextField(
        label="Password",
        password=True,
        prefix_icon=ft.icons.LOCK
    )

    def registra(e):
        if nome.value and email.value and password.value:
            page.add(ft.Text(f"Registrato: {nome.value}", color="green"))
        else:
            page.add(ft.Text("Compila tutti i campi!", color="red"))

    bottone = ft.ElevatedButton("Registrati", on_click=registra)

    page.add(nome, email, password, bottone)

ft.app(target=main)

---

5. Eventi di TextField: reagire ai cambiamenti

Oltre a leggere il valore con .value, possiamo reagire mentre l’utente digita usando on_change.

import flet as ft

def main(page: ft.Page):
    page.title = "Digitazione in tempo reale"
    page.padding = 30

    output = ft.Text("...", size=20)

    def aggiorna(e):
        if e.control.value:
            output.value = f"Stai scrivendo: {e.control.value}"
        else:
            output.value = "Scrivi qualcosa..."
        page.update()

    campo = ft.TextField(
        label="Scrivi qui",
        hint_text="Inizia a digitare...",
        on_change=aggiorna
    )

    page.add(campo, output)

ft.app(target=main)

Spiegazione: e.control si riferisce al componente che ha generato l’evento (il TextField). e.control.value contiene il valore attuale del campo.

---

6. Tabella riassuntiva

Componente	Codice	Descrizione
Testo	ft.Text("testo")	Mostra testo semplice
Testo formattato	ft.Text("testo", size=N, weight="bold", color="...")	Testo con stile
Bottone elevato	ft.ElevatedButton("testo", on_click=f)	Bottone principale
Bottone pieno	ft.FilledButton("testo", on_click=f)	Bottone importante
Bottone bordato	ft.OutlinedButton("testo", on_click=f)	Bottone secondario
Bottone icona	ft.IconButton(icon=ft.icons.X, on_click=f)	Solo icona cliccabile
Icona	ft.Icon(ft.icons.NOME, size=N, color="...")	Icona decorativa
Campo testo	ft.TextField(label="...")	Input utente
Campo password	ft.TextField(password=True)	Input nascosto
Evento cambio	on_change=f	Reagisce alla digitazione

---

7. Esercizio autonomo

🎯 Esercizio: “Modulo di contatto”

Crea un nuovo file contatto.py che realizzi un modulo di contatto con:

1. Un titolo: “Contattaci” (grande, grassetto)
2. Un sottotitolo: “Compila il form qui sotto” (grigio, più piccolo)
3. Campi input:
   • Nome completo (con icona persona)
   • Email (con icona email)
   • Messaggio (multiline, 3 righe max)
   • Telefono (con icona telefono)
4. Un bottone “Invia” che quando cliccato:
   • Se tutti i campi sono pieni, mostra un messaggio “Grazie, [nome]! Ti risponderemo presto.”
   • Se qualche campo è vuoto, mostra “Compila tutti i campi!”
5. Extra (opzionale): Aggiungi un’icona di fianco al bottone

Suggerimenti

• Usa prefix_icon per le icone nei TextField
• Per il campo messaggio, imposta multiline=True e max_lines=3
• Per controllare se un campo è vuoto: if nome.value: (True se non vuoto)
• Aggiungi page.padding = 30 per dare respiro

Output atteso

Una schermata pulita e ordinata con tutti i campi allineati verticalmente, un bottone “Invia” in fondo, e messaggi di conferma o errore dopo il click.