Flutter Mobile Development · Lezione

Widget Stateless e Stateful

Comprenda le differenze fondamentali tra StatelessWidget e StatefulWidget e impari quando e come utilizzare ciascuno per creare interfacce utente dinamiche.

Widget Stateless e Stateful è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.

Widgets: The Building Blocks

Le interfacce utente di Flutter sono costruite interamente con widget. Pensali come mattoncini LEGO! Tutto ciò che vedi sullo schermo – testo, pulsanti, persino i contenitori di layout – è un widget.

I widget descrivono come dovrebbe apparire l'interfaccia della tua app data la sua configurazione e il suo stato attuali. Esistono due tipi principali di widget che incontrerai:

StatelessWidget
StatefulWidget

StatelessWidget: Static UI

Uno StatelessWidget è un widget che non cambia il suo aspetto o comportamento nel tempo. Una volta costruito, rimane invariato.

Non ha alcuno "stato" interno da gestire.
Le sue proprietà sono immutabili (non possono essere modificate dopo la creazione).
È perfetto per visualizzare contenuti statici come testo, icone o immagini che non devono reagire all'input dell'utente o a cambiamenti dei dati.

Simple StatelessWidget

Ecco un StatelessWidget di base che visualizza un messaggio di benvenuto. Nota come il suo contenuto sia fisso.

Esegui questo codice per vedere il messaggio statico "Hello, CoddyKit!".

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateless Demo'),
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

When to Go Stateless

Usa un StatelessWidget quando:

L'aspetto del widget dipende solo dai suoi parametri di configurazione (passati nel costruttore).
Non deve rispondere a interazioni dell'utente (come tap) o a cambiamenti di dati interni.
Esempi: Text, Icon, Image, AppBar, Padding, Row, Column.

Questi widget sono efficienti perché Flutter non ha bisogno di ricostruirli se il loro genitore cambia, a meno che le loro proprietà non cambino esplicitamente.

StatefulWidget: Dynamic UI

Un StatefulWidget è un widget in grado di modificare il proprio aspetto e comportamento nel tempo, reagendo all'input dell'utente o a cambiamenti nei dati.

Possiede uno "stato" interno che può essere modificato.
Quando il suo stato cambia, il widget viene ricostruito per riflettere il nuovo stato.
È ideale per elementi interattivi come checkbox, slider o liste dinamiche.

Updating UI with setState()

Per rendere dinamico un StatefulWidget, è necessario modificarne lo stato interno. Quando lo stato cambia, devi invocare il metodo setState().

Chiamare setState() comunica a Flutter che lo stato interno di questo widget è cambiato e che è necessario ricostruire l'interfaccia utente per riflettere il nuovo stato.

Senza setState(), lo stato potrebbe cambiare, ma l'interfaccia utente non verrà aggiornata!

Interactive StatefulWidget

Creiamo una semplice app contatore utilizzando uno StatefulWidget. Tocca il pulsante per incrementare il numero.

Osserva come setState() viene utilizzato per aggiornare la variabile _counter e ricostruire l'interfaccia utente.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stateful Demo'),
        ),
        body: const Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0; // This is the mutable state

  void _incrementCounter() {
    setState(() {
      _counter++; // Update state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Count: $_counter',
          style: const TextStyle(fontSize: 32),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

StatefulWidget's Journey

I StatefulWidget attraversano un ciclo di vita. I momenti chiave includono:

createState(): Crea l'oggetto di stato mutabile.
initState(): Chiamato una volta quando il widget viene inserito nell'albero dei widget. Ideale per la configurazione iniziale.
build(): Chiamato ogni volta che il widget deve visualizzare la propria interfaccia utente, solitamente dopo setState().
dispose(): Chiamato quando il widget viene rimosso dall'albero. Ideale per liberare le risorse.

Comprenderli aiuta a gestire interazioni complesse.

Choosing the Right Widget

Ecco un rapido confronto per aiutarti a decidere:

StatelessWidget:
- Proprietà immutabili.
- Non cambia dopo la creazione.
- Nessuno stato interno.
- Efficiente per contenuti statici.
StatefulWidget:
- Stato mutabile (gestito da un oggetto State).
- Può cambiare dinamicamente.
- Risponde all'interazione dell'utente o ai dati.
- Utilizza setState() per attivare il rebuild.

La maggior parte dei widget nasce come stateless; rendili stateful solo se devono realmente cambiare in modo dinamico.

Widget Type Challenge

Stai sviluppando un'app Flutter. Quale tipo di widget utilizzeresti principalmente per un'icona semplice che, quando viene toccata, cambia colore?

Recap: Dynamic vs. Static

Ottimo lavoro! Hai imparato la differenza fondamentale tra StatelessWidget e StatefulWidget.

I StatelessWidget sono per elementi dell'interfaccia utente statici che non cambiano dopo essere stati costruiti.
Gli StatefulWidget sono per elementi dell'interfaccia utente dinamici che devono reagire alle interazioni o alle modifiche dei dati, utilizzando setState() per aggiornare il loro aspetto.

Scegliere il tipo di widget giusto è fondamentale per creare applicazioni Flutter efficienti e manutenibili. Nella prossima lezione, approfondiremo i widget di layout di base!

Domande Frequenti

La lezione «Widget Stateless e Stateful» è gratuita?

Sì — il testo completo di «Widget Stateless e Stateful» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.

Cosa imparerò in «Widget Stateless e Stateful»?

Comprenda le differenze fondamentali tra StatelessWidget e StatefulWidget e impari quando e come utilizzare ciascuno per creare interfacce utente dinamiche. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Flutter Mobile Development?

Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Widget Stateless e Stateful»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?

Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Flutter Mobile Development