Salta al contenuto principale

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 appnome pacchettodescrizione
Flutter + flutter_hookshooks_riverpodPermette l'utilizzo di entrambi flutter_hooks e Riverpod insieme.
Solo Flutterflutter_riverpodPer utilizzare Riverpod per App Flutter
Solo Dart (No Flutter)riverpodVersione 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:

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.0.0-dev.8

Dopodichè esegui flutter 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":

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.

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

img

Scegli il prossimo passo

Apprendi i concetti base:

Segui un cookbook: