Introduzione

Prima di addentrarci nei meccanismi interni di Riverpod, iniziamo con le basi, ovvero installare Riverpod e di seguito creare il classico "Hello World".

Quale pacchetto installare

Prima di tutto, devi sapere che Riverpod è diviso in diversi pacchetti, ognuno per una propria esigenza. La variante di Riverpod che vorrai installare dipenderà dal tipo di App che hai intenzione di creare.

Fai riferimento alla seguente tabella per decidere quale pacchetto installare:

tipo app	nome pacchetto	descrizione
Flutter + flutter_hooks	hooks_riverpod	Permette l'utilizzo di entrambi flutter_hooks e Riverpod insieme.
Solo Flutter	flutter_riverpod	Per utilizzare Riverpod per App Flutter
Solo Dart (No Flutter)	riverpod	Versione di Riverpod con tutte le classi collegate a Flutter rimosse

Installare il pacchetto

Una volta che sai quale pacchetto installare, procedi aggiungendo la versione dalla seguente tabella al file pubspec.yaml:

Flutter + flutter_hooks
Flutter
Solo Dart

pubspec.yaml
environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^2.1.1

Dopodichè esegui flutter pub get.

pubspec.yaml
environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.1

Dopodichè esegui flutter pub get.

pubspec.yaml
environment:
  sdk: ">=2.12.0-0 <3.0.0"

dependencies:
  riverpod: ^2.1.1

Dopodichè esegui dart pub get.

Ottimo! Hai appena aggiunto Riverpod alla tua app!

Esempio di utilizzo: Hello world

Ora che hai installato Riverpod, possiamo iniziare ad utilizzarlo.

I seguenti snippet mostrano come utilizzare la nostra nuova dipendenza per creare un "Hello world":

Flutter + flutter_hooks
Flutter
Solo Dart

lib/main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

// Creiamo un "provider", che salverà un valore (Nel nostro caso "Hello world")
// Utilizzare un provider ci permetterà di imitare/sovrascrivere il valore esposto.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // Per fare in modo che i widget leggano i provider, dobbiamo avvolgere
    // l'intera applicazione in un widget "ProviderScope".
    // Qui è dove sarà salvato lo stato dei nostri provider.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Nota: MyApp è un HookConsumerWidget, da hooks_riverpod
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Puoi eseguire l'app con flutter run.
Questo mostrerà "Hello world" nel tuo device.

lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Creiamo un "provider", che salverà un valore (Nel nostro caso "Hello world")
// Utilizzando provider ci permetterà di mock/override il valore esposto.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // Per i widget, per avere la possibilità di leggere i provider, dobbiamo avvolgere
    // l'intera applicazione con il Widget "ProviderScope".
    // Qui è dove sarà salvato lo stato dei nostri provider.
   ProviderScope(
      child: MyApp(),
    ),
  );
}

// Estende ConsumerWidget (esposto da Riverpod) invece che StatelessWidget
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Puoi eseguire con flutter run.
Questo mostrerà "Hello world" nel tuo device.

lib/main.dart
import 'package:riverpod/riverpod.dart';

// Creiamo un "provider", che salverà un valore(Nel nostro caso "Hello world")
// Utilizzando provider ci permetterà di mock/override il valore esposto.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {

  // In questo oggetto sarà salvato lo stato dei nostri provider.
  final container = ProviderContainer();

  // Grazie a "container", possiamo leggere il nostro provider.
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}