Управление состоянием Flutter с помощью Riverpod

Немного сложный пример речного стручка из реального мира во Flutter

Как я и обещал на прошлой неделе. Я покажу вам свой собственный окончательный путь решения для управления состоянием! АКА

Riverpod + StateNotifier + Hooks + Freezed

Риверпод классный! но хороших примеров не так много. только основы и все. На этот раз я попытался создать пример, который одновременно понятен и сложен. На этом примере я хочу научить вас, когда и как использовать Riverpod. Я максимально упростил процесс. Надеюсь, вам понравится!

Осторожность!!

Если вы не знаете, как использовать Riverpod, сначала ознакомьтесь с этой статьей, а затем вернитесь сюда!



Минималистское руководство по Riverpod
Одно из лучших решений для управления состоянием и внедрения зависимостей во Flutteritnext.io



Мотивация

Что мы будем делать в этом примере?

Мы просто получим некоторые данные из API, отсортируем и отфильтруем их в пользовательском интерфейсе.

В принципе, мы будем;

  1. Создавайте простых и сложных провайдеров и комбинируйте их
  2. Используйте объект AsyncValue и покажите асинхронное значение в пользовательском интерфейсе, используя метод when
  3. Кроме того, создайте freezed объектов для решения неизменяемых объектов.

Давайте начнем!

Создать службу API

Небольшое примечание
Мне не удалось найти подходящую модель API для использования функции фильтрации, потому что я сам добавил роли. Прости меня за это

Создайте неизменяемую модель, используя freezed и json_serializable

Если вы хотите узнать больше о FreezedПожалуйста, ознакомьтесь с этой статьей.



Как обрабатывать сложный JSON во Flutter
Для начала, обработка JSON во Flutter немного болезненна. Есть пара проблем, с которыми они столкнутся. Я знаю, что…iisprey.medium.com



Получить значение от Сервиса

Вы можете подумать, что такое AsyncValue. Это просто класс объединения, который помогает нам обрабатывать состояние нашего значения. Он поставляется с пакетом провайдера из коробки.

Я подробно объясню в своих следующих статьях, но пока это все.

Создание провайдеров сортировки и фильтрации

Получите полученный список от провайдера, отфильтруйте и отсортируйте их с помощью другого провайдера.

Показать все в пользовательском интерфейсе

А вот и мы!

Если вы думаете об этом примере как о приложении электронной коммерции, пример будет гораздо более осмысленным.

Бонус

Вот моя следующая статья о Riverpod



Механизм отмены/возврата с помощью Riverpod во Flutter
История о том, как легко реализовать механизм отмены-возвратаitnext.io



Последние слова

Я не riverpod гуру. Просто учусь и делюсь своим опытом, поэтому, если вы знаете, как лучше использовать riverpod, сообщите нам об этом!

Пример проекта GitHub

Вот ваш исходный код.



GitHub — iisprey/riverpod_example
Новый проект Flutter. Этот проект является отправной точкой для приложения Flutter. Несколько ресурсов для начала…github.com



Спасибо за чтение!

Это была длинная статья, и вы пришли сюда полностью! Ты замечательный! Пожалуйста, не забывайте хлопать (также, возможно, вы не знаете, что хлопки могут достигать 50 раз, просто щелкайте по ходу дела)