К содержимому
⚠️The documentation for version 2.0 is in progress. A preview is available at: https://docs-v2.riverpod.dev

Введение

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

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

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

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

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

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

После того, как вы определитесь с нужным пакетом, добавьте следующие строки в 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.1.1

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

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

Пример: Hello world

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

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

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 {

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" на устройстве.

Идем дальше: Установка сниппетов

Если вы используете Flutter и VS Code , попробуйте Flutter Riverpod Snippets

Если же вы используете Flutter и Android Studio или IntelliJ, можете попробовать Flutter Riverpod Snippets

img

Выберите следующий шаг

Изучить основные понятия:

Следовать руководству: