Gestire lo Stato in Flutter: Cos’è Riverpod e Perché Semplifica la Vita (Anche se Non Sei un Designer)

Quando iniziamo a sviluppare un’applicazione con Flutter, tutto sembra magico: scriviamo un po’ di codice e, come per incanto, sullo schermo compaiono bottoni, immagini e menu colorati.

Ben presto, però, ci scontriamo con un problema fondamentale: come facciamo a far dialogare le varie parti dell’applicazione tra loro? Se un utente preme “Aggiungi al carrello” nella schermata dei prodotti, come fa l’icona del carrello in alto a destra (che si trova in un’altra schermata o in un altro componente) a sapere che deve aggiornare il numero degli elementi?

La risposta a questa domanda si chiama Gestione dello Stato (State Management), e in questa guida esploreremo lo strumento più moderno e amato dalla community di Flutter per farlo: Riverpod.

1. Capire lo “Stato” con un’analogia della vita reale

Prima di parlare di codice, cerchiamo di capire cos’è lo “Stato” senza tecnicismi.

Immagina l’applicazione come un grande Hotel:

• Le stanze, la hall e la piscina sono l’interfaccia grafica (la UI o User Interface).
• Gli ospiti che entrano, ordinano la colazione, cambiano stanza o accendono le luci rappresentano i Dati.

Lo “Stato” non è altro che la fotografia dell’hotel in un preciso momento: La stanza 101 è occupata? La luce della hall è accesa? Quanti ospiti ci sono in piscina?

Se non usi un sistema centralizzato per gestire queste informazioni, il receptionist deve correre fisicamente da una stanza all’altra a urlare le novità. Nel codice, questo si traduce in un disastro chiamato “Spaghetti Code”, dove tutto è collegato a tutto in modo confuso e basta una minima modifica per rompere l’intera applicazione.

Riverpod è il computer della reception centrale dell’Hotel. Ogni volta che succede qualcosa, l’informazione viene salvata lì. Tutte le stanze possono “ascoltare” il computer centrale e aggiornarsi all’istante non appena un dato cambia.

2. Cos’è Riverpod e a cosa serve?

Riverpod è una libreria di gestione dello stato per Flutter. Se sei curioso, il suo nome è un anagramma di Provider, che era il vecchio standard per fare questa operazione (creato dallo stesso autore, Remi Rousselet).

Riverpod serve principalmente a tre cose:

1. Separare la logica dall’aspetto visivo: Chi si occupa della grafica non deve preoccuparsi di come i dati vengono scaricati da internet o calcolati. Il codice visivo rimane pulito e snello.
2. Condividere i dati ovunque: Permette a qualsiasi schermata o widget dell’app di accedere a un’informazione in modo sicuro e immediato.
3. Evitare bug: Monitora lo stato dell’applicazione e aggiorna lo schermo solo quando è strettamente necessario, migliorando le performance ed evitando blocchi dell’app.

3. Le Alternative principali in Flutter

Nel mondo di Flutter esistono diversi modi per gestire lo stato. Le alternative più famose a Riverpod sono:

• setState (Nativo): È il sistema integrato in Flutter per le cose piccolissime (es. aprire/chiudere un piccolo menu a tendina). Non va bene per applicazioni reali perché non permette di condividere i dati tra schermate diverse.
• Provider: Il “padre” di Riverpod. Molto famoso, ma soffriva di alcune limitazioni tecniche legate alla struttura stessa di Flutter.
• BLoC (Business Logic Component): Un approccio molto robusto e aziendale, basato sui flussi di dati (Stream). È estremamente potente per progetti giganteschi, ma richiede la scrittura di tantissimo codice anche per fare cose semplici (il cosiddetto boilerplate).
• GetX: Molto popolare tra i principianti perché permette di fare tutto in poche righe, ma spesso criticato dai professionisti perché non segue le buone pratiche di architettura software e rischia di creare problemi nei progetti a lungo termine.

Quali sono le differenze chiave?

Il grande vantaggio di Riverpod rispetto a tutti gli altri è che scopre gli errori mentre stai scrivendo il codice (in fase di compilazione) e non quando l’applicazione è già nelle mani dell’utente, riducendo drasticamente i crash della tua app.

4. Come si usa? I concetti fondamentali

Per usare Riverpod bastano tre concetti chiave:

1. Il ProviderScope: È l’interruttore generale. Va messo sopra a tutta l’applicazione per dire a Flutter: “Da qui in poi, Riverpod gestirà il nostro Hotel”.
2. Il Provider: È la singola “scatola” che contiene un dato o una logica. Esistono scatole per dati che non cambiano mai, scatole per dati che cambiano nel tempo (i Notifier) e scatole per i dati che arrivano da internet (FutureProvider).
3. Il ConsumerWidget (e il WidgetRef): Invece di usare i classici componenti di Flutter, usiamo una versione speciale fornita da Riverpod. Questa versione ha in mano un “telecomando” (chiamato ref) con cui può guardare dentro le scatole (ref.watch) o dare ordini di modifica (ref.read).

5. Un Esempio Pratico: Il Contatore di Click

Vediamo come si traduce tutto questo in un codice d’esempio moderno (usando lo standard Riverpod 2.0+). Immaginiamo di voler creare una schermata con un numero che aumenta ogni volta che premiamo un bottone.

Passo 1: Creiamo il “Cervello” (Il Notifier)

Qui definiamo qual è il nostro dato (un numero intero) e l’azione per modificarlo (incrementare).

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. Creiamo la logica che gestisce il nostro numero
class Contatore extends Notifier<int> {
  // Definiamo il valore di partenza (lo stato iniziale dell'hotel)
  @override
  int build() => 0;

  // Definiamo l'azione per cambiare lo stato
  void incrementa() {
    state++; // 'state' è il valore attuale. Aumentalo di 1.
  }
}
// 2. Creiamo la "scatola" pubblica accessibile dall'esterno
final contatoreProvider = NotifierProvider<Contatore, int>(Contatore.new);

Passo 2: Colleghiamo l’Interfaccia Grafica (La UI)

Ora creiamo lo schermo che legge questo numero e ha il bottone per aumentarlo.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'counter_provider.dart'; // Importiamo il file del passo 1

// Usiamo ConsumerWidget invece del classico StatelessWidget
class SchermataContatore extends ConsumerWidget {
  const SchermataContatore({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Usiamo il telecomando 'ref' per stare in ascolto del numero.
    // Ogni volta che il numero cambia, questa schermata si aggiorna da sola!
    final numeroAttuale = ref.watch(contatoreProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Il Mio Primo Riverpod')),
      body: Center(
        child: Text(
          'Hai premuto il bottone $numeroAttuale volte',
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Quando premiamo il bottone, diciamo al notifier di eseguire l'azione
        onPressed: () => ref.read(contatoreProvider.notifier).incrementa(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Come puoi vedere, la grafica (SchermataContatore) non sa come avviene il calcolo matematico. Sa solo che deve mostrare un testo e che c’è un bottone da premere. Questa pulizia strutturale rende l’app incredibilmente facile da manutenere e far crescere nel tempo.

6. Risorse Utili e Bibliografia Online

Per approfondire lo studio di Riverpod e rimanere aggiornati con le migliori pratiche del settore, ecco le fonti ufficiali e le guide più autorevoli disponibili online:

Sito Ufficiale di Riverpod https://riverpod.dev/ : La documentazione ufficiale (disponibile anche in diverse lingue). Contiene guide dettagliate, esempi pratici e la spiegazione di tutti i tipi di provider esistenti.

Sito Ufficiale di Flutter https://flutter.dev/ : Il punto di partenza per comprendere l’architettura generale dei widget e capire dove e perché si rende necessario un gestore di stato.

Code with Andrea https://codewithandrea.com/ : Gestito da Andrea Bizzotto, sviluppatore e formatore di riferimento nel mondo Flutter. Il suo blog e i suoi corsi contengono i migliori articoli di approfondimento pratico su Riverpod (in particolare sull’architettura a strati).

Pub.dev - Pacchetto Riverpod https://pub.dev/packages/flutter_riverpod : La pagina del repository dei pacchetti di Flutter dove verificare costantemente le ultime versioni rilasciate, il changelog e le dipendenze della libreria.