SECRET OF CSS

State Management in Flutter Using Riverpod, StateNotifier, Freezed, and DDD | by Alper Efe Şahin | Jun, 2022


Let’s build a Todo app

1*RYnQhSv Nbn7NCARW1Xr6Q

Note: Before starting, If you want to see this project’s link, you can visit the project here. Also for this project, On YouTube, I have uploaded a video, so you can also watch it from here.

Hello everyone. In this article, we will create a Todo application with Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD). When I write this article, also I am uploading a video related to this article. So, what you want, you can do, you can both read, or watch it.

First things first, In this article I will not explain all the things, since there is a video. I just create the architecture, and I try to teach how to create Riverpod with some other things.

Okay, let’s get started.

I am doing a to-do application, because it’s simple, right? I do not want to create the COUNTER application, because there are lots of counter applications, and I do not want to see any more. So I will create a simple to-do app.

Also on my GitHub, I have one more piece of content, which is rickandmortyapi, and it is related to again Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD). I also will write articles and upload videos, but this to-do application is important to catch how we can use Riverpod.

Firstly, let’s see our architecture (folders):

1*07Mu4JnZLKvDJSS LCg7VQ

Here we have the application folder, for the business logic. Domain, presentation, maybe infrastructure, etc. They are explained nicely HERE (file structure part).

Next, after creating WIDGETS (I mean basic UI), we can move to the real question:

How we can use Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD) at the same time.

Note: For this project, here is the pubspec.yaml file (for packages, If you want to use them):

First things first, let’s create a domain folder, it has some models.

After creating the model, we need to run the below code:

flutter packages pub run build_runner build — delete-conflicting-outputs

…and the errors will go.

Secondly, we have the application folder’s files.

Let’s also create them. When you create this architecture, then you need to start with creating a state file, because you can be confused (It is just a suggestion).

Here is our todo_state.dart file:

After that, create the todo_event.dart file:

After creating the todo state, and todo event, we need to run the below code:

flutter packages pub run build_runner build — delete-conflicting-outputs

The errors will go.

Now, the last thing is the state notifier section. Our state is todo, so we can rename it with TodoNotifier.

Moreover, create a todo_notifier.dart file

Here, we do not have to run build runner blah blah, we do not need it.

We have notifier, state, events, and models. Now, we can create our provider, and after that, we can reach these states, events, etc. via Provider.

In the provider folder, create todo_provider.dart :

Here we use StateNotifierProvider because we want to reach our notifier, and also its state. So we created StateNotifierProvider with our TodoNotifier and TodoState. As you can see, it returns TodoNotifier() as well.

The last thing we need to do, calling our state, send events, using our provider because we are almost done!

Let’s move the main.dart folder.

If you want to use Riverpod tree, then you must wrap all the things with ProviderScope().

Simply, our main.dart file is here:

Next, we can move the presentation folder.

Here is our app_widget (core file):

Of course, do not forget to import the right things!

Moreover, we have home_page:

We have the final todoList variable. We use ref.watch method to get our STATE, not METHOD. If you want to reach your notifier, which has your methods, and functions, then you need to use the yourprovider.notifier code. For state, use just ref.watch(yourProvider). Sometimes select method also can be useful.

For example, we use the select method, because we just want to watch todoList, not all the state.

In the home_page.dart file, we have also other parts, such as TodosActionPart and TodosPart sections.

In the TodosActionPart section, we have a button and textfield. We do not use the onChanged, since we have TextfieldController, and we hold our text here.

When we use Riverpod, If we use a button or onTap, or onClick, It does not matter, we cannot use watch. Do not use it. We do not listen to anything, we just click the button for example, and that’s it. For more information, visit the riverpod.dev link.

We use provider.notifier to reach notifier. Then, we call our function, which name is mapEventsToState. First, we add the TodoTitleChanged event, and next, we add the AddTodo event.

For todos_part.dart file, we use the same things.

That’s all for me. Also, you can glance at my applications which were created with Riverpod from here.

Thank you for reading, stay tuned!



News Credit

%d bloggers like this: