Primeiros passos

Antes de mergulhar nos mecanismos internos do Riverpod, vamos começar com o básico: Instalando o Riverpod e escrevendo um "Olá Mundo".

Qual pacote instalar

Antes de qualquer coisa, você precisa estar ciente de que o Riverpod está distribuído em vários pacotes, com uso ligeiramente diferente.
A variante do Riverpod que você deseja instalar depende do aplicativo que você está criando.

Você pode consultar a tabela a seguir para ajudá-lo a decidir qual pacote usar:

tipo de aplicativo	nome do pacote	descrição
Apenas Flutter	flutter_riverpod	Uma maneira básica de usar Riverpod com flutter.
Flutter + flutter_hooks	hooks_riverpod	Uma maneira de usar flutter_hooks e Riverpod juntos.
Apenas Dart (Sem Flutter)	riverpod	Uma versão do Riverpod em que todas as classes relacionadas ao Flutter foram removidas.

Instalando o pacote

Depois de saber qual pacote deseja instalar, adicione o seguinte ao seu pubspec.yaml:

Flutter + flutter_hooks
Flutter
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.0.0-dev.5

Then run flutter pub get.

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

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.0.0-dev.5

Then run flutter pub get.

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

dependencies:
  riverpod: ^2.0.0-dev.5

No terminal, rode dart pub get.

É isso. Você adicionou Riverpod ao seu aplicativo! 🥳 🤩

Exemplo de uso: Olá mundo

Agora que instalamos o Riverpod, podemos começar a usá-lo.

Os snippets a seguir mostram como usar nossa nova dependência para criar um "Olá mundo":

Flutter + flutter_hooks
Flutter
Dart

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

// Criamos um "provider", que armazenará um valor (aqui "Olá, mundo").
// Ao usar um provider, isso nos permite simular/substituir o valor exposto.
final olaMundoProvider = Provider((_) => 'Olá mundo');

void main() {
  runApp(
    // Para que os widgets possam ler os provides, precisamos envolver o
    // aplicativo inteiro em um widget "ProviderScope".
    // É aqui que o estado dos nossos providers será armazenado.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Nota: MyApp é um HookConsumerWidget, pacote `hooks_riverpod`.
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(olaMundoProvider);

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

Que você pode então executar flutter run.
Isso renderizará "Olá mundo" no seu dispositivo.

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

// Criamos um "provider", que armazenará um valor (aqui "Olá, mundo").
// Ao usar um provider, isso nos permite simular/substituir o valor exposto.
final olaMundoProvider = Provider((_) => 'Olá mundo');

void main() {
  runApp(
    // Para que os widgets possam ler os provides, precisamos envolver o
    // aplicativo inteiro em um widget "ProviderScope".
    // É aqui que o estado dos nossos providers será armazenado.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Estenda com ConsumerWidget em vez de StatelessWidget,
// que é fornecido pelo Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(olaMundoProvider);

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

Que você pode então executar flutter run.
Isso renderizará "Olá mundo" no seu dispositivo.

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

// Criamos um "provider", que armazenará um valor (aqui "Olá, mundo").
// Ao usar um provider, isso nos permite simular/substituir o valor exposto.
final olaMundoProvider = Provider((_) => 'Olá mundo');

void main() {
  // Este objeto é onde será armazenado o estado de nossos providers.
  final container = ProviderContainer();

  // Graças ao "container", podemos ler nosso provider.
  final value = container.read(olaMundoProvider);

  print(value); // Olá mundo
}