Lezione 1: Introduzione a Flet e Hello World

Obiettivi

• Capire cos’è Flet e come funziona
• Installare Flet sul proprio PC
• Creare e avviare la prima app Flet
• Capire la struttura base del codice (main, page, ft.app)

---

1. Cos’è Flet?

Flet è un framework Python che permette di creare applicazioni desktop, web e mobile usando solo Python, senza scrivere una riga di HTML, CSS, JavaScript o Dart.

Come funziona?

Il tuo codice Python (Flet)
        │
        ▼
   Motore Flutter  (Google)
        │
        ▼
  App che funziona su:
  Windows, macOS, Linux, Web, Android, iOS

Scrivi il codice UNA VOLTA e Flet lo trasforma in un’app che funziona su tutti i dispositivi.

Perché Flet?

Vantaggio	Spiegazione
Solo Python	Non devi imparare altri linguaggi
UI moderna	Usa Flutter di Google (UI bellissime)
Cross-platform	Stesso codice per PC, web, telefono
Hot reload	Modifichi il codice e vedi subito le modifiche
Semplice	pip install flet e puoi già partire

---

2. Installazione

Requisiti

• Python 3.10 o superiore
• pip (già incluso in Python moderno)

Verifica Python

Apri il terminale (PowerShell su Windows, Terminal su macOS/Linux) e digita:

python --version

Dovresti vedere qualcosa come:

Python 3.12.x

Se Python non è installato, scaricalo da python.org.

Installa Flet

Sempre nel terminale:

pip install flet

⚠️ Su Windows: se pip non funziona, prova con python -m pip install flet

Verifica che sia installato:

pip show flet

Dovresti vedere la versione (es. Version: 0.85.x).

---

2.5. Scegliere un IDE — Visual Studio Code

Per scrivere codice Python/Flet in modo efficiente, ti consiglio Visual Studio Code (VS Code).

Perché VS Code?

Vantaggio	Perché serve per Flet
Terminale integrato	Avvi python hello.py senza uscire dall’editor
Estensione Python	IntelliSense, debugging, evidenziazione sintassi
Git integrato	Puoi salvare le versioni dei tuoi progetti
Gratuito e leggero	Funziona su qualsiasi PC, anche scolastico

Installazione

1. Scarica VS Code da code.visualstudio.com
2. Avvia l’installer (tieni le impostazioni predefinite) e completa l’installazione
3. Apri VS Code: dovresti vedere una finestra come questa:

Estensione Python

VS Code da solo non sa interpretare Python — devi aggiungere l’estensione ufficiale Microsoft:

1. Apri la barra delle estensioni: clicca l’icona a forma di ⬛ sulla sinistra (o premi Ctrl+Shift+X)
2. Cerca scrivendo Python nella barra di ricerca in alto
3. Installa l’estensione di Microsoft (quella con più download, decine di milioni)

Nota: Questa estensione installa automaticamente anche Pylance (autocompletamento avanzato) e Python Debugger (strumento per trovare errori). Non devi fare nient’altro!

Ambiente virtuale (venv) per lo sviluppo mobile

Un ambiente virtuale è una cartella isolata dove Python installa le librerie del progetto, senza mescolarle con gli altri programmi sul tuo PC.

Perché serve? Quando lavorerai a più progetti (es. Flet, Django, altri corsi), ogni progetto avrà le sue librerie senza conflitti. Inoltre, per compilare l’APK finale (Lezione 16) Flet ha bisogno di dipendenze specifiche — avere un ambiente separato evita problemi.

Creare l’ambiente con VS Code

1. Apri VS Code e poi apri la Command Palette con Ctrl+Shift+P (o F1)
2. Digita “Python: Create Environment” e seleziona il comando
3. Scegli Venv come tipo di ambiente
4. Seleziona l’interprete Python che hai installato (es. Python 3.12)

VS Code creerà automaticamente una cartella .venv nel tuo progetto.

Verifica che sia attivo

Nella barra in basso a destra di VS Code dovresti vedere la scritta:

Python 3.12.x ('.venv': venv) ◉

Se non è selezionato, clicca su quella scritta e scegli l’interprete dentro .venv.

Installa Flet nell’ambiente virtuale

Apri il terminale integrato (Ctrl+`) e verifica che il nome dell’ambiente .venv sia visibile nel prompt. Poi installa Flet:

pip install flet

⚠️ Importante: D’ora in poi, ogni volta che apri VS Code in questa cartella, l’ambiente si attiverà automaticamente. Installerai tutte le librerie dei prossimi capitoli sempre dentro questo ambiente.

Sintesi del flusso di lavoro:

┌─────────────────────────────────────────┐
│ 1. Apri VS Code nella cartella progetto │
│ 2. Crea ambiente virtuale (.venv)       │
│ 3. Installa Flet con pip                │
│ 4. Scrivi e avvia il codice             │
│ 5. (Lezione 16) Build APK dal .venv     │
└─────────────────────────────────────────┘

Primi passi in VS Code per Flet

Vediamo come usare VS Code per il tuo progetto Flet:

1. Apri la cartella del progetto: File > Open Folder... → seleziona la cartella prima-app/ che hai creato prima
2. Crea un nuovo file: clicca l’icona Nuovo File nell’EsploraFile a sinistra (o Ctrl+N) e chiamalo hello.py
3. Scrivi il codice nella finestra centrale — VS Code colorerà automaticamente la sintassi

Eseguire il codice

Ci sono due modi per eseguire il tuo programma:

Modo 1 — Pulsante Play ▶️

In alto a destra nell’editor trovi un triangolino bianco ▶️. Cliccalo per eseguire il file corrente:

Modo 2 — Terminale integrato

1. Apri il terminale: premi Ctrl+` (backtick) oppure Terminal > New Terminal
2. Assicurati di essere nella cartella giusta (dove hai salvato hello.py)
3. Digita:

python hello.py

Il terminale mostrerà l’output del programma:

Consiglio: Usa il terminale integrato — ti abituerai a usare la riga di comando, competenza fondamentale per un programmatore!

(Opzionale) Altre estensioni utili

⭐ Flet Preview — Anteprima live dentro VS Code

Flet Preview è un’estensione pensata apposta per questo corso: esegue la tua app Flet e la mostra in un pannello laterale direttamente dentro VS Code, senza passare dal browser.

Cosa offre:

• ▶️ Avvio con un click — tasto Play nell’editor o comando Flet: Start Preview
• 🔄 Auto-reload — salvi il file e l’anteprima si aggiorna da sola
• 📱 Simulazione mobile — ridimensiona la preview a 390 px per vedere come appare su telefono
• 🖥️ Modalità desktop/tablet — passaggio rapido tra le varie dimensioni
• 🛑 Stop — termina il server con un click

Consiglio: Installala subito, ti farà risparmiare tempo in tutte le lezioni!

Altre estensioni consigliate

Estensione	Perché serve per Flet
Black Formatter	Formatta automaticamente il codice (lo tiene pulito e leggibile) — Flet stesso usa Black
Python Environment Manager	Gestisce gli ambienti virtuali con interfaccia grafica
indent-rainbow	Colora i vari livelli di indentazione — aiuta a non sbagliare le rientranze in Python
Material Icon Theme	Icone più chiare e colorate per i file nella barra laterale
GitLens	Esplora la cronologia di Git (utile se versioni i tuoi progetti)

---

3. La Prima App: Hello World

Passo 1: Crea un file

Crea una nuova cartella per il progetto:

mkdir prima-app
cd prima-app

Crea un file chiamato hello.py e aprilo con VS Code (o qualsiasi editor di testo).

Passo 2: Scrivi il codice

import flet as ft

def main(page: ft.Page):
    page.title = "La mia prima app"
    page.add(ft.Text("Ciao, mondo!"))

ft.app(target=main)

Passo 3: Esegui l’app

Nel terminale:

python hello.py

Si aprirà una finestra nativa (sul tuo computer) con la scritta “Ciao, mondo!”.

Dove viene visualizzata l’app?

Quando esegui python hello.py, Flet:

1. Avvia un piccolo server Python locale sul tuo PC
2. Apre una finestra nativa (non il browser, non il telefono) che si collega a questo server
3. Tutto rimane sul tuo computer — non serve internet né smartphone

Fase	Dove gira	Serve telefono?
Sviluppo e test (Lezioni 1-15)	Finestra sul PC	❌ No
Preview nel browser (opzionale)	Browser sul PC	❌ No
App finale (Lezione 16)	File .apk → telefono	✅ Sì

Niente paura: per tutto il corso ti basta il PC. Lo smartphone entra in gioco solo alla Lezione 16, quando compilerai l’APK finale! 🚀

---

4. Analisi del codice

Analizziamo riga per riga cosa abbiamo scritto:

import flet as ft

Importa la libreria Flet e la chiamiamo ft (per comodità).

def main(page: ft.Page):

Questa è la funzione principale della nostra app. Flet chiama automaticamente questa funzione all’avvio e le passa un oggetto page che rappresenta la finestra dell’app.

• page è come il “foglio bianco” su cui andiamo a mettere i componenti
• ft.Page è il tipo (una classe di Flet che rappresenta la pagina)

    page.title = "La mia prima app"

Imposta il titolo della finestra (quello che vedi nella scheda del browser o nella barra del titolo).

    page.add(ft.Text("Ciao, mondo!"))

Aggiunge un componente Text (testo) alla pagina. Il testo visualizzato sarà “Ciao, mondo!”.

ft.app(target=main)

Avvia l’applicazione Flet, dicendogli di eseguire la funzione main.

---

5. Esempio guidato: Personalizziamo il saluto

Modifichiamo il file hello.py per aggiungere più componenti:

import flet as ft

def main(page: ft.Page):
    # Configurazione della pagina
    page.title = "Benvenuto!"
    page.bgcolor = "#f0f0f0"  # Sfondo grigio chiaro
    page.padding = 50          # Spazio dai bordi

    # Componenti
    titolo = ft.Text(
        "Benvenuto in Flet!",
        size=30,
        weight="bold",
        color="blue"
    )
    sottotitolo = ft.Text(
        "La tua prima app Python cross-platform",
        size=16,
        color="gray"
    )
    messaggio = ft.Text("Clicca il bottone qui sotto!")

    # Bottone
    bottone = ft.ElevatedButton(
        text="Cliccami",
        on_click=lambda e: print("Hai cliccato il bottone!")
    )

    # Aggiungiamo tutto alla pagina
    page.add(titolo, sottotitolo, messaggio, bottone)

ft.app(target=main)

Cosa abbiamo aggiunto?

Codice	Cosa fa
page.bgcolor	Cambia il colore di sfondo
page.padding	Aggiunge spazio dai bordi
ft.Text(...)	Mostra un testo con dimensioni, stile e colore
ft.ElevatedButton(...)	Crea un bottone 3D
on_click=lambda e: ...	Funzione eseguita quando si clicca il bottone

Nota: lambda e: print(...) è una funzione anonima Python. Non preoccuparti se non l’hai mai vista — la useremo spesso per gestire i click.

---

6. Spiegazione approfondita: page e ft.app

La page

L’oggetto page è il cuore della nostra app. Rappresenta la finestra/schermata principale.

Attributi importanti di page:

Attributo	Descrizione
page.title	Titolo della finestra
page.bgcolor	Colore di sfondo
page.padding	Spazio dai bordi (in pixel)
page.add(...)	Aggiunge componenti alla pagina
page.controls	Lista di tutti i componenti nella pagina
page.update()	Aggiorna la pagina (lo useremo dopo)

ft.app()

Avvia l’app. Parametri principali:

ft.app(target=main)              # Apre in finestra nativa/desktop
ft.app(target=main, view=ft.AppView.WEB_BROWSER)  # Forza apertura nel browser
ft.app(target=main, port=8080)   # Imposta una porta specifica

---

7. Riassunto dei comandi imparati

Comando	Cosa fa
import flet as ft	Importa la libreria
def main(page: ft.Page):	Funzione principale dell’app
page.title = "..."	Imposta il titolo
page.bgcolor = "..."	Imposta lo sfondo
page.padding = N	Imposta il padding
page.add(...)	Aggiunge componenti
ft.Text("testo")	Mostra testo
ft.Text(..., size=N, weight="bold", color="...")	Testo personalizzato
ft.ElevatedButton(text="...", on_click=...)	Bottone cliccabile
ft.app(target=main)	Avvia l’app

---

8. Esercizio autonomo

🎯 Esercizio: “La tua carta d’identità”

Crea un nuovo file biglietto_da_visita.py che mostri una schermata con:

1. Titolo della finestra: “Il mio biglietto da visita”
2. Sfondo: colore a tua scelta (es. "#e0f7fa")
3. Padding: 30
4. Tre testi:
   • Nome e cognome (grande, grassetto, colore blu)
   • Classe e scuola (medio, colore grigio)
   • Un motto o citazione preferita (corsivo, colore verde)
5. Un bottone che quando cliccato stampa "Ciao da [tuo nome]!" nella console

Suggerimenti

• Usa ft.Text(weight="bold") per il grassetto
• Usa ft.Text(italic=True) per il corsivo
• Usa colori esadecimali come "#FF5733" o nomi come "blue", "green", "gray"
• Rivedi l’esempio guidato se hai dubbi

Output atteso

Quando esegui il programma, dovresti vedere:

• Una finestra con sfondo colorato
• Il tuo nome ben visibile
• La tua classe
• Una citazione
• Un bottone che stampa un messaggio nella console quando cliccato

Consiglio: Gioca con i colori fino a ottenere un risultato che ti piace. La creatività è benvenuta!