Давайте создадим приложение Todo
Примечание: Перед началом, если вы хотите увидеть ссылку на этот проект, вы можете посетить проект здесь. Также для этого проекта на YouTube я загрузил видео, так что вы также можете посмотреть его здесь.
Всем привет. В этой статье мы создадим приложение Todo с помощью Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD). Когда я пишу эту статью, я также загружаю видео, связанное с этой статьей. Так что, что хочешь, можешь делать, можешь и читать, и смотреть.
Обо всем по порядку, В этой статье я не буду все объяснять, так как есть видео. Я просто создаю архитектуру и пытаюсь научить создавать Riverpod с некоторыми другими вещами.
Хорошо, давайте начнем.
Приложение Todo
Я делаю приложение для дел, потому что оно простое, верно? Заявку COUNTER создавать не хочу, так как встречных заявок много, а больше видеть не хочу. Итак, я создам простое приложение для работы.
Также на моем GitHub есть еще один контент, rickandmortyapi, и он снова связан с Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD). Я также буду писать статьи и загружать видео, но это приложение важно для понимания того, как мы можем использовать Riverpod.
Во-первых, давайте посмотрим на нашу архитектуру (папки):
Здесь у нас есть папка приложения для бизнес-логики. Домен, презентация, возможно, инфраструктура и т. д. Они хорошо описаны ЗДЕСЬ (часть файловой структуры).
Далее, после создания ВИДЖЕТОВ (я имею в виду базовый пользовательский интерфейс), мы можем перейти к реальному вопросу:
Как мы можем одновременно использовать Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD).
Примечание. Для этого проекта вот файл pubspec.yaml (для пакетов, если вы хотите их использовать):
Первым делом создадим папку домена, в ней есть несколько моделей.
После создания модели нам нужно запустить следующий код:
flutter packages pub run build_runner build — delete-conflicting-outputs
…и ошибки уйдут.
Во-вторых, у нас есть файлы папки приложения.
Давайте также создадим их. Когда вы создаете эту архитектуру, вам нужно начать с создания файла состояния, потому что вы можете запутаться (Это просто предложение).
Вот наш файл todo_state.dart:
После этого создайте файл todo_event.dart:
После создания состояния задачи и события задачи нам нужно запустить следующий код:
flutter packages pub run build_runner build — delete-conflicting-outputs
Ошибки уйдут.
Теперь последнее, что нужно сделать, — это раздел уведомления о состоянии. Наше состояние todo, поэтому мы можем переименовать его в TodoNotifier.
Кроме того, создайте файл todo_notifier.dart:
Здесь нам не нужно запускать build runner бла-бла, он нам не нужен.
У нас есть уведомитель, состояние, события и модели. Теперь мы можем создать наш provider, а после этого мы можем получить доступ к этим состояниям, событиям и т. д. через Provider.
В папке провайдера создайте todo_provider.dart :
Здесь мы используем StateNotifierProvider, потому что хотим получить доступ к нашему уведомителю, а также к его состоянию. Итак, мы создали StateNotifierProvider с нашими TodoNotifier и TodoState. Как видите, он также возвращает TodoNotifier().
Последнее, что нам нужно сделать, вызвать наше состояние, отправить события, используя нашего провайдера, потому что мы почти закончили!
Давайте переместим папку main.dart.
Если вы хотите использовать дерево Riverpod, вы должны обернуть все вещи ProviderScope().
Просто наш файл main.dart находится здесь:
Далее мы можем переместить папку презентации.
Вот наш app_widget (основной файл):
Конечно же, не забудьте импортировать нужные вещи!
Более того, у нас есть home_page:
У нас есть переменная final todoList. Мы используем метод ref.watch, чтобы получить STATE, а не METHOD. Если вы хотите получить доступ к своему уведомителю, у которого есть ваши методы и функции, вам нужно использовать код yourprovider.notifier. Для состояния используйте только ref.watch(yourProvider). Иногда также может быть полезен метод select.
Например, мы используем метод select, потому что хотим смотреть только todoList, а не все состояние.
В файле home_page.dart у нас есть и другие части, такие как секции TodosActionPart и TodosPart.
В разделе TodosActionPart у нас есть кнопка и textfield. Мы не используем onChanged, так как у нас есть TextfieldController, и мы держим наш текст здесь.
Когда мы используем Riverpod, если мы используем кнопку или onTap, или onClick, это не имеет значения, мы не можем использовать watch. Не используйте его. Ничего не слушаем, просто нажимаем кнопку например, и все. Для получения дополнительной информации перейдите по ссылке riverpod.dev.
Мы используем provider.notifier для доступа к уведомлению. Затем мы вызываем нашу функцию, имя которой mapEventsToState. Сначала мы добавляем событие TodoTitleChanged, а затем добавляем событие AddTodo.
Для файла todos_part.dart мы используем то же самое.
Это все для меня. Также вы можете посмотреть мои приложения, созданные с помощью Riverpod, здесь.
Спасибо за чтение, следите за обновлениями!
