[ad_1]
Let’s Build a Todo App
Note: Before starting, if you want to see the link of this project, you can go to the project Here, Also for this project, I uploaded a video on YouTube, so you can watch it from here Here,
Greetings to everyone. In this article, we will build a Todo application with RiverPod + State Notifier + Freeze + Domain Driven Design (DDD). While I am writing this article, I am also uploading a video related to this article. So, you can do whatever you want, you can both read, or watch.
First things first, in this article I will not explain everything, because there is a video. I just make architectures, and I try to teach how to make RiverPods, among a few other things.
OK, let’s get started.
I’m doing a to-do application, because it’s easy, isn’t it? i don’t want to make COUNTER applications, because there are too many counter applications, and I don’t want to see any more. So I’ll make a simple to-do app.
Also on my GitHub, I have another material, which is rickandmortyapi, and this is again related to RiverPod + State Notifier + Freeze + Domain Driven Design (DDD). I will also write articles and upload videos, but this to-do application is important to know how we can use riverpod.
First, let’s look at our architecture (folders):
Here we have application folder for business logic. Domain, Presentation, Maybe Infrastructure, etc. they are well explained Here (file structure part).
Next, after creating the WIDGETS (I mean basic UI), we can move on to the actual question:
How can we use Riverpod + StateNotifier + Freezed + Domain Driven Design (DDD) at the same time.
Note: For this project, here is pubspec.yaml File (for packages, if you want to use them):
First things first, let’s create a domain folder, it holds some models.
After creating the model, we need to run the code below:
flutter packages pub run build_runner build — delete-conflicting-outputs
…and the errors will be gone.
Secondly, we have the files in the Applications folder.
Let’s make them too. When you create this architecture, you need to start with creating the state file, because you may get confused (this is just a suggestion).
here is ours todo_state.dart file:
After that, create todo_event.dart file:
After creating todo state and todo event, we need to run the below code:
flutter packages pub run build_runner build — delete-conflicting-outputs
Mistakes will go away.
Now, the last thing is the State Notifier section. Our state is Tudu, so we can rename it TodoNotifier,
Also, create a todo_notifier.dart file
Here, we don’t have to run Build Runner blah blah, we don’t need it.
We have notifiers, states, events and models. Now, we can make our providerAnd after that, we can access these states, events etc. Provider,
In the provider folder, create todo_provider.dart ,
here we use StateNotifierProvider Because we want to access our notifier and its status. so we made StateNotifierProvider with us TodoNotifier And TodoState, As you can see, it returns TodoNotifier() Too.
The last thing we need to do is call our state, dispatch events, use our provider because we are almost done!
lets go main.dart folder.
if you want to use Riverpod tree, so you have to wrap everything ProviderScope(),
just our main.dart The file is here:
Next, we can move the Presentation folder.
here is ours app_widget (core file):
Of course, don’t forget to import the right things!
In addition, we have home_page,
we have final todoList variable. we use ref.watch our method of receiving STATENo METHOD, If you want to access your notifier which contains your methods and functions, you need to use yourprovider.notifier code. For State, Just . use ref.watch(yourProvider), Sometimes the selection method can also be useful.
For example, we use select method, because we just want to see todoListNot all states.
In home_page.dart file, we also have other parts, like TodosActionPart And TodosPart section.
In TodosActionPart section, we have a button and textfield, we don’t use onChangedsince we have TextfieldControllerAnd here we put our text.
When we use Riverpod, if we use a button or onTapeither onClickIt doesn’t matter, we can’t use watch, Don’t use it. We don’t hear anything, we just click the button for example, and that’s it. For more information, see riverpod.dev Contact.
we use provider.notifier to access the notifier. Then, we call our function, named mapEventsToState, First, we add TodoTitleChanged event, and next, we add AddTodo Competition.
For todos_part.dart file, we use the same things.
That’s all for me. Also you can take a look at my applications that were created with Riverpod Here,
Thanks for reading, stay tuned!
[ad_2]
Source link
#State #Management #Flutter #Riverpod #State #Notifier #Freeze #DVD
