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
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
.
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
.
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
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 {
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.
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 {
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.
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
}
Puoi eseguire con dart lib/main.dart
.
Questo mostrerà "Hello world" nella console
Andando oltre: Installare snippet
Se stai utilizzando Flutter
e VS Code
, considera l'utilizzo di Flutter Riverpod Snippets
Se stai utilizzando Flutter
e Android Studio
o IntelliJ
, considera l'utilizzo di Flutter Riverpod Snippets
Scegli il prossimo passo
Apprendi i concetti base:
Segui un cookbook: