Введение

Прежде чем окунуться в структуру Riverpod, разберемся с установкой Riverpod и напишем традиционный "Hello world".

Какой пакет установить

Прежде всего, стоит отметить, что Riverpod представлен в нескольких пакетах, в которых использование Riverpod примерно одинаково. Выбор конкретного пакета с Riverpod зависит от приложения, которое вы делаете.

Вы можете использовать данную таблицу, чтобы определить, какой пакет вам нужен.

Тип приложения	Название пакета	Описание
Только Flutter	flutter_riverpod	Основной вариант использования Riverpod с Flutter.
Flutter + flutter_hooks	hooks_riverpod	Возможность использовать flutter_hooks и Riverpod одновременно.
Только Dart (без Flutter)	riverpod	Версия Riverpod, в которой отсутствуют классы, относящиеся к Flutter.

Установка пакета

После того, как вы определитесь с нужным пакетом, добавьте следующие строки в pubspec.yaml:

Flutter + flutter_hooks
Flutter
Dart only

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.3

Затем запустите 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.3

Затем запустите flutter pub get.

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

dependencies:
  riverpod: ^2.1.3

Затем запустите dart pub get.

Вуаля! Вы только что добавили Riverpod в свое приложение!

Пример: Hello world

Теперь, когда мы установили Riverpod, мы можем приступить к работе.

Следующие фрагменты кода демонстрируют, как с помощью Riverpod можно написать простой "Hello world":

Flutter + flutter_hooks
Flutter
Dart only

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

// Мы создаем "provider", который будет хранить значение (т.е. "Hello world").
// Использование provider позволяет нам имитировать/переопределять хранимое значение.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // Нам необходимо обернуть все приложение в "ProviderScope", чтобы иметь
    // возможность читать провайдеры.
    // Здесь будут хранится состояния наших провайдеров.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Примечание: MyApp является HookConsumerWidget из 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: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Запустим данный код с помощью flutter run.
После чего мы увидим "Hello world" на устройстве.

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

// Мы создаем "provider", который будет хранить значение (т.е. "Hello world").
// Использование provider позволяет нам имитировать/переопределять хранимое значение.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // Нам необходимо обернуть все приложение в "ProviderScope", чтобы иметь
    // возможность читать провайдеры.
    // Здесь будут хранится состояния наших провайдеров.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Наследуйтесь от ConsumerWidget из Riverpod вместо 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: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Запустим данный код с помощью flutter run.
После чего мы увидим "Hello world" на устройстве.

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

// Мы создаем "provider", который будет хранить значение (т.е. "Hello world").
// Использование provider позволяет нам имитировать/переопределять хранимое значение.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  // В данном объекте хранятся состояния наших провайдеров.
  final container = ProviderContainer();

  // Благодаря "container", мы можем узнать/прочесть значение нашего провайдера.
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}