Make An API Call with Riverpod and Freezed package
Introduction :
Riverpod is also a state management solution in a flutter. It a basically a Provider, but of a different type. It has some advantages over a provider in that it is compile safe, does not have any limitation as a provider have and does not also depend on flutter. Riverpod support multiple providers of the same type, combining asynchronous provider, adding providers from anywhere.
Before we start with the tutorials, we need to know what we are going to do
Table of content :
Using the freezed package along side with json serializable
Using StateNotifierProvider in Riverpod to change state of UI
Setup:
Before starting let us first start with the basics of installing up freezed and json serializable
Add this dependency to pubsec.yaml file:
dependencies:
freezed_annotation:
riverpod: ^0.12.2
flutter_riverpod: ^0.12.2
http:dev_dependencies:
build_runner: ^1.11.0
freezed: ^0.12.7
This installs five packages:
- build_runner, the tool to run code-generators
- freezed, the code generator
- freezed_annotation, a package containing annotations for freezed.
- flutter_riverpod and riverpod for the state management
- http or dio (I will be working http package but i really like using dio)
I will prefer that you go to pub.dev to get the latest packages
Lets code starting with the freezed model class:
I will be using the user model from json placeholder website. I believe its the easiest place to get an api to work with
Create a models folder which will have your user model in it with both, generated file from json serializable **.g.dart and **.freezed.dart from freezed.
Be very careful when naming the files else you will end messing with the gen files.
As you can see, the naming of the files are the same so you can easily make a mistake. After writing this, you will see a red line stating that both .g file and .freezed file doesnt exist. Dont worry because the error will go away once generate the files.
To generate the file, open your terminal (a new terminal if you are already running flutter in the current terminal opened ) and type:
flutter pub run build_runner build
or
flutter pub run build_runner watch
the 2nd command will be watching for any changes in the file and then rerun
You are all set if you dont have any error in the user_model file
Lets Go to Riverpod
Create a dependency injector for your http client. This will be created once and it will stay alive throughout the life cycle of the app.
//independent sources
final clientProvider = Provider<ApiClient>((_) => ApiClient(http.Client()));
This is a global variable and it can be placed anywhere but to be on a safer side, put it in a file and name it maybe providers
Lets go to the states
these are the possible states. You need to run the command stated above to generate the freezed file for the states
now the api client provider class
user statenotifier class with the global variable
final file
Lets Go to the ui
Lets go to the api page
we are done
For more info visit down the link:
