Riverpod + StateNotifier + Freezed + DDD in Flutter — Fetching Data from the API
Hello, my friends. In this article, I’m gonna teach how you can fetch some data from the API (I will use “rickandmortyapi” since it’s nice).
I strongly suggest that you need to read my first Medium article, in there, I showed the Riverpod basically, so you may need it. If you do not understand while you read, then you can also check the video tutorial on my YouTube channel. There are nice videos to understand Riverpod very well. Also, you can check the video tutorial for this article above. Now, we can start our main topic.
First things first, implement the necessary packages to your pubspec.yaml file:
After adding packages, let’s move the code section…
Folder Structure
For this project, we will use DDD architecture again. I love this architecture since it’s so tidy. Here you can see the folder structure:
Note: We have an infrastructure folder at this time, In my first article there was no infrastructure folder since we did not use it.
Let’s start with the infrastructure folder.
Infrastructure Folder
In this folder, we have the api_service folder as well.
Here we just create ApiService class, and also one function to get/fetch data from the API. The aim of this file is just to fetch data (I do not use toJson or fromJson, since I use the “Dio” package.
After the Infrastructure folder, we can move to our Providers folder, we will create the necessary Provider for the ApiService class.
Providers Folder
Firstly, I need to say here I will show providers only belong to ApiService class. So, for this title, I will just show api_provider.dart file, and characters_datas_provider.dart file.
Here it’s our api_provider.dart file. It has just one line of code. We use a normal Provider because we want to just get the ApiService class, and no more.
Just use Provider for simple things like the above.
Next, we have characters_datas_provider.dart file. Here we use FutureProvider since we want to fetch data, and it’s async code. Its type is a list of CharacterModel. We will see, what is it soon. It is in the Domain folder.
We use the ref.read not ref.watch function since it’s future, not a stream. I created an empty list because after getting characters, or data from the API let’s say, I’m just adding the data to the list in the type of CharacterModel. Finally, after adding data, I just return my list, and that’s it.
Use FutureProvider for the Future process. I also used the autoDispose method, since I do not want to dispose it manually.
I told you above, we have one more provider which is the search_provider.dart file actually, and I will explain it when it will be necessary.
Domain Folder
Before starting the Application folder, we need to create a domain folder. I’m sure that your code gives some errors like there is no CharcaterModel class etc. So, let’s fix it. Also, we will use it in the application folder.
After creating our model, let’s run the build runner’s code.
flutter packages pub run build_runner watch — delete-conflicting-outputs
After running this code, it will create a freezed file for us.
Application Folder
To start creating business logic, we need 3 things: State, Events, and StateNotifier.
Let’s start with creating a state.
Here it’s our state. After creating an Event file, we will run the build runner’s code, so wait for it.
Here is also our event file. We have just 2 events, when we search for something, we need it, also when we click the search button, then we also need another event name is updateListItems. Now, run the below code to create freezed files.
flutter packages pub run build_runner watch — delete-conflicting-outputs
So the last thing for the Application folder, we also need to create our StateNotifier, then we can update the state.
And that’s it, folks. Now we can move to the last folder, which is in the presentation folder. We also need to create search_provider, to reach the above files (search state, events, notifier, etc.)
Search Provider
Here we use again StateNotifierProvider with the specific state. Also, we use a watch instead of a read since our Internet speed can be slow, so it means, when we wait, it can be null. Moreover, you may realize that I did not just return the SearchNotifier, I return SearchNotifier with the specific function and also its event.
I want to fetch data when I call the searchProvider. So, let’s give an example:
Imagine that you closed the app. After opening it for the first time, you will fetch it. Another example can be this: Imagine you have 3 pages in your application. The first page is the homepage, like my Rick and Morty application. The others are related to the user’s profile for example. So, you are going to go to the profile pages. After that, you want to come back to the home page. Now, you may want to update data, which are coming from the API. So, after settings up everything, then we can also use two dots for creating our StateNotifier and after that call a specific function.
Presentation Folder
Actually, here I want to handle just Consumer, ConsumerWidget, and ProviderScope widgets because the purpose of this tutorial is not widgets. It is related to Riverpod. So, let’s start coding.
main.dart file
If you use Riverpod, then you have to wrap all the widgets with ProviderScope. Do not forget.
search_bar.dart file
Here you may realize that we did not use ConsumerWidget. We just used Consumer. You can use both of them.
Here is our Consumer part of the SearchBar widget.
Also, you can use ref.refresh(PROVIDER) method, to refresh the state. I explained more details in the tutorial video.
rick_and_morty_items.dart file
In this file, we extend our class with ConsumerWidget. We did not use StatelessWidget, because we want to watch our state above the build. I said that above, it can be null, so when it’s null, then we showed the specific text: “There are no any characters” for example.
