Riverpod Flutter framework

Riverpod Flutter framework

Questo articolo esplora le API e i concetti di Riverpod Flutter framework usando semplici esempi. È uno dei tanti modi per gestire la gestione dello stato di Flutter. Abbiamo trattato come un tutorial di Riverpod Flutter, il suo utilizzo e i vantaggi dell’utilizzo di Riverpod rispetto al pacchetto Provider.

Sommario

1. Introduzione
2. Installazione di Flutter Riverpod
3. Creazione e lettura di un provider
4. Conclusione
   

Introduzione
Per i principianti, iniziamo con la comprensione concettuale di base della gestione dello stato di Flutter e il ruolo del repository Flutter Riverpod. Fondamentalmente, Flutter si occupa della gestione dello stato da solo, tuttavia, man mano che la tua applicazione cresce e si espande, potresti dover condividere lo stato della tua app con diverse classi.

Flutter fornisce numerose opzioni per gestire gli stati della tua applicazione. Qui, discuteremo di Riverpod .

Che cos’è Riverpod Flutter?
Riverpod è un framework di caching reattivo per Flutter/Dart. Può recuperare, mettere in cache, combinare e ricalcolare automaticamente le richieste di rete, gestendo anche gli errori. È una ricostruzione del pacchetto Provider, il che significa che riduce le dipendenze.

Tuttavia, nella battaglia tra Riverpod e Provider, i vantaggi di Riverpod rispetto a Provider sono:

• Non riceverai più l’eccezione “provider non trovato”
• Puoi definire provider globali
• Puoi semplificare notevolmente la combinazione di “provider”, invece del noioso e soggetto a errori ProxyProvider.

Vantaggi di Flutter Riverpod
Riverpod offre numerosi vantaggi all’applicazione Flutter, come prestazioni migliorate e scalabilità migliorata. Di seguito sono riportati i vantaggi di Flutter Riverpod per la tua applicazione.

• Riverpod aiuta a gestire stati complessi delle applicazioni e a ridimensionare l’app man mano che si espande, semplificandone la gestione.
• Promuove un codice UI privo di logica di gestione dello stato, il che lo rende più leggibile, elimina i bug e lo rende più facile da testare.
• Flutter riverpod offre un provider completo per la gestione di diversi stati, che include dati asincroni e sincroni.
• Supporta in modo integrato le applicazioni web e desktop Flutter, il che lo rende un’opzione adatta per le applicazioni multipiattaforma.
• Riverpod include un meccanismo integrato per ridurre gli errori. Può essere utilizzato con numerose architetture Flutter, come Redux e Flutter BloC .

Caso d’uso di Riverpod in Flutter
Riverpod, una soluzione di state management per Flutter, ha molteplici casi d’uso che possono scalare il processo di sviluppo della tua app con la sua efficienza. Ecco alcuni degli scenari comuni in cui Riverpod Flutter brilla:

• Rileva gli errori di programmazione in fase di compilazione anziché in fase di esecuzione
• Recupera, memorizza nella cache e aggiorna facilmente i dati da una fonte remota
• Esegui la memorizzazione nella cache reattiva e aggiorna facilmente la tua interfaccia utente
• Affidati allo stato asincrono o calcolato
• Scrivi codice testabile e mantieni la logica al di fuori dell’albero dei widget
• Crea, usa e combina provider con codice boilerplate minimo
• Elimina lo stato di un provider quando non è più utilizzato

Installazione di Flutter Riverpod
Il passaggio principale è aggiungere l’ultimo ‘flutter_riverpod’ al’pubspec.yaml’ file come dipendenza.

dependencies:
  flutter:
    sdk: flutter  
  flutter_riverpod: ^2.0.2

ProviderScope

Una volta installato Riverpod, possiamo avvolgere il nostro widget root con un ProviderScope:

void main() {
  // wrap the entire app with a ProviderScope so that widgets
  // will be able to read providers
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

ProviderScope` è un widget che memorizza lo stato di tutti i provider che creiamo:

• Sostituiscono completamente i design pattern come singleton, service locator, dependency injection e InheritedWidgets.
• Consentono di memorizzare un certo stato e di accedervi facilmente in più posizioni.
• Consentono di ottimizzare le prestazioni filtrando le ricostruzioni dei widget o memorizzando nella cache costosi calcoli di stato.
• Rendono il codice più testabile, poiché ogni provider può essere sovrascritto per comportarsi in modo diverso durante un test.

Creazione e lettura di un provider
Ecco una semplice schermata “Hello World” creata utilizzando il Provider.

// provider that returns a string value
final helloWorldProvider = Provider((ref) {
  return 'Hello world';
});

Questo è composto da tre cose:

1. La dichiarazione: final helloWorldProvider è la variabile globale che useremo per leggere lo stato del provider
2. Il provider: Provider< String > ci dice che tipo di provider stiamo usando (maggiori dettagli di seguito) e il tipo di stato che detiene.
3. Una funzione che crea lo stato. Questo ci fornisce un parametro ref che possiamo usare per leggere altri provider, eseguire una logica di dispose personalizzata e altro ancora.

Per usare questo provider all’interno di un widget, avrai bisogno di un oggetto di riferimento. Ci sono 3 modi per ottenerlo:

1. Utilizzo di un ConsumerWidget
   Il modo più semplice è utilizzare un ConsumerWidget:

final helloWorldProvider = Provider((_) => 'Hello world');

// 1. widget class now extends [ConsumerWidget]
class HelloWorldWidget extends ConsumerWidget {
  @override
  // 2. build method has an extra [WidgetRef] argument
  Widget build(BuildContext context, WidgetRef ref) {
    // 3. use ref.watch() to get the value of the provider
    final helloWorld = ref.watch(helloWorldProvider);
    return Text(helloWorld);
  }
}

Utilizzo di un Consumer
In alternativa, possiamo racchiudere il nostro widget Testo con un Consumatore:

final helloWorldProvider = Provider((_) => 'Hello world');

class HelloWorldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. Add a Consumer
    return Consumer(
      // 2. specify the builder and obtain a WidgetRef
      builder: (_, WidgetRef ref, __) {
        // 3. use ref.watch() to get the value of the provider
        final helloWorld = ref.watch(helloWorldProvider);
        return Text(helloWorld);
      },
    );
  }
}

Utilizzo di ConsumerStatefulWidget e ConsumerState

final helloWorldProvider = Provider((_) => 'Hello world');

// 1. extend [ConsumerStatefulWidget]
class HelloWorldWidget extends ConsumerStatefulWidget {
  @override
  ConsumerState createState() => _HelloWorldWidgetState();
}

// 2. extend [ConsumerState]
class _HelloWorldWidgetState extends ConsumerState {
  @override
  void initState() {
    super.initState();
    // 3. if needed, we can read the provider inside initState
    final helloWorld = ref.read(helloWorldProvider);
    print(helloWorld); // "Hello world"
  }

  @override
  Widget build(BuildContext context) {
    // 4. use ref.watch() to get the value of the provider
    final helloWorld = ref.watch(helloWorldProvider);
    return Text(helloWorld);
  }
}

Conclusione Riverpod Flutter framework
Riverpod è una soluzione sensata per risolvere i problemi di state management di Flutter, ed è sicuramente un metodo migliore rispetto a Provider. Riverpod supera gli svantaggi di Provider e questo articolo di Flutter Riverpod aiuterà a creare un’architettura solida per la tua applicazione Flutter.

Tuttavia consigliamo una formazione con i docenti del nostro staff per ottenere proprie le nozioni in oggetto ed essere cosi produttivi nei progetti aziendali con Flutter.

(fonte)

Innovaformazione, scuola informatica specialistica promuove l’utilizzo e la formazione di Flutter per lo sviluppo mobile. Nell’offerta formativa trovate il Corso Flutter rivolto alle aziende.