Hello World in Flutter

Questa lezione introduce il progetto “Hello World” in Flutter, mostrando come creare un nuovo progetto, esplorare l’IDE, avviare l’app e comprendere i concetti fondamentali di widget compositi. Verrà anche mostrato un esempio di refactoring che semplifica il progetto passando da un approccio stateful a uno stateless per un primo approccio.

1. Creazione di un Nuovo Progetto

Da Terminale

Per creare un nuovo progetto Flutter dalla linea di comando, esegui:


flutter create [nome_app]

Da Android Studio

Cliccare su New Flutter Project.
Selezionare il percorso del Flutter SDK.
Compilare le informazioni richieste (nome del progetto, piattaforme target, ecc.).
Cliccare su Create per completare la creazione del progetto.

Note

Assicurarsi di avere tutto l’ambiente configurato prima di procedere.

Create project offline. Con questa opzione, il processo di creazione utilizza solo le risorse già presenti sul computer, evitando di cercare aggiornamenti online (utile in ambienti con connessione instabile o assente). È possibile anche utilizzare i parametri --offline o --no-offline dalla linea di comando per ottenere lo stesso effetto del checkbox.

Struttura di un’Applicazione Flutter

Quando si crea un nuovo progetto Flutter, viene generata una struttura di cartelle e file pensata per organizzare in modo chiaro il codice e le risorse dell’applicazione.


nome_app/
├── android/           # File e configurazioni specifiche per la build su Android
├── build/             # Cartella generata automaticamente durante la compilazione (non modificare)
├── ios/               # File e configurazioni specifiche per la build su iOS
├── lib/               # Il cuore dell'applicazione: contiene tutto il codice Dart
│   └── main.dart      # Il punto di ingresso dell'applicazione
├── test/              # Test unitari e altri script di testing
├── web/               # (Opzionale) File relativi alla build per il web, se abilitata
├── pubspec.yaml       # File di configurazione del progetto (dipendenze, asset, font, versioning)
└── README.md          # Documento descrittivo del progetto (facoltativo)

pubspec.yaml È il file di configurazione del progetto Flutter. Qui definisci:
Le dipendenze del progetto (librerie esterne necessarie).
Gli asset come immagini, font e file JSON.
Altre impostazioni, come la versione dell’app.

2. Avvio del Progetto

Prima di avviare il progetto, verifica che:

L’emulatore sia configurato e avviato, oppure che un dispositivo fisico sia collegato con il debug abilitato.
L’ambiente sia correttamente configurato.

È possibile avviare il progetto in vari modi:

Da Terminale:
Esegui il comando:


flutter run

Dall’IDE:
Clicca sul tasto play (o Run) in alto a destra.
Debug Mode:
Avvia il progetto in modalità debug per settare breakpoint e analizzare il codice interattivamente.

⚠️

Warning

Assicurarsi che l’emulatore sia configurato e avviato o che il dispositivo fisico sia collegato prima di eseguire il progetto.

In Flutter, ogni elemento dell’interfaccia utente è un widget, e i widget possono essere annidati (widget dentro widget) per costruire interfacce complesse.


import 'package:flutter/material.dart';
 
void main() {
    runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Hello World App',
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Hello World App'),
                ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text(
                        'Benvenuto in Flutter!',
                        style: TextStyle(fontSize: 24),
                        ),
                        Icon(
                        Icons.flutter_dash,
                        size: 48,
                        color: Colors.blue,
                        ),
                    ],
                    ),
                ),
            ),
        );
    }
}

MaterialApp: Imposta il tema e la struttura base dell’app.
Scaffold: Fornisce una struttura di layout con app bar e body.
Center: Centra il contenuto all’interno del body.
Column: Dispone i widget (Testo e Icona) in verticale.

4. Esempio di “Hello World” Stateful vs Stateless

A. Approccio Stateful (più complesso)

Questa versione stateful permette di modificare lo stato (ad esempio, aggiornare il messaggio quando si preme un bottone):


import 'package:flutter/material.dart';
 
void main() {
    runApp(MyStatefulApp());
}
 
class MyStatefulApp extends StatefulWidget {
    @override
    _MyStatefulAppState createState() => _MyStatefulAppState();
}
 
class _MyStatefulAppState extends State<MyStatefulApp> {
    String message = "Hello World!";
 
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(title: Text("Stateful Hello World")),
                body: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            Text(
                            message,
                            style: TextStyle(fontSize: 24),
                            ),
                            ElevatedButton(
                                onPressed: () {
                                // Aggiorna lo stato e modifica il messaggio
                                    setState(() {
                                    message = "Hai premuto il bottone!";
                                    });
                                },
                                child: Text("Premi qui"),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

B. Approccio Stateless (più semplice)

Per un primo approccio senza gestione dello stato, un widget stateless è più semplice e permette di focalizzarsi sull’interfaccia:


import 'package:flutter/material.dart';
 
void main() {
    runApp(MyStatelessApp());
}
 
class MyStatelessApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Hello World',
            home: Scaffold(
                appBar: AppBar(title: Text("Stateless Hello World")),
                body: Center(
                    child: Text(
                    'Hello World!',
                    style: TextStyle(fontSize: 24, color: Colors.black87),
                    ),
                ),
            ),
        );
    }
}

La versione stateless non gestisce alcuno stato, rendendo il codice più semplice.
È un esempio introduttivo, dove il contenuto è statico.

Conclusioni

Questa lezione copre:

Creazione del progetto
Avvio dell’applicazione
Composizione dei Widget
Esempi di codice