Salta al contenuto principale

Introduzione

Prova Riverpod online​

Per farti un'idea di Riverpod, prova a utilizzarlo online su Dartpad o su Zapp:

Installazione del package​

Una volta che sai quale pacchetto desideri installare, procedi ad aggiungere la dipendenza alla tua app tramite riga di comando:

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner
flutter pub add dev:custom_lint
flutter pub add dev:riverpod_lint

In alternativa, puoi aggiungere manualmente la dipendenza alla tua app all'interno del tuo file pubspec.yaml:

pubspec.yaml
name: my_app_name
environment:
  sdk: ">=3.0.0 <4.0.0"
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.6.1
  riverpod_annotation: ^2.6.1

dev_dependencies:
  build_runner:
  custom_lint:
  riverpod_generator: ^2.6.1
  riverpod_lint: ^2.6.1

Infine, installa i package con flutter pub get.

Ora puoi eseguire il code-generator con flutter pub run build_runner watch.

Ecco fatto. Hai aggiunto Riverpod alla tua app!

Abilitare riverpod_lint/custom_lint​

Riverpod include un pacchetto opzionale chiamato riverpod_lint che fornisce regole di lint per aiutarti a scrivere codice migliore e offre opzioni di refactoring personalizzate.

Il pacchetto dovrebbe già essere installato se hai seguito i passaggi precedenti, ma è necessario un passaggio separato per abilitarlo.

Per abilitare riverpod_lint, è necessario aggiungere un file analysis_options.yaml posizionato sullo stesso livello del tuo pubspec.yaml e includere quanto segue:

analysis_options.yaml
analyzer:
  plugins:
    - custom_lint

Ora dovresti vedere dei warning nel tuo ambiente di sviluppo (IDE) se hai commesso errori nell'utilizzo di Riverpod nel tuo codice.

Per vedere l'elenco completo dei possibili warning e refactoring, vai alla pagina di riverpod_lint.

note

Quei warning non verranno visualizzati nel comando dart analyze. Se desideri verificare tali warning in CI/terminale, puoi eseguire quanto segue:

dart run custom_lint

Esempio di utilizzo: Hello world​

Ora che abbiamo installato Riverpod, possiamo iniziare ad usarlo.

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

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
@riverpod
String helloWorld(Ref ref) {
  return 'Hello world';
}

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

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

Successivamente, avvia l'applicazione con flutter run. Questo renderizzerà "Hello world" sul tuo dispositivo.

Andando oltre: Installazione di snippet di codice​

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: