0. About the app
In this tutorial, we are going to build a small favorites app, our goal is just to understand the basic concepts of riverpod.
This will be a series of 2 parts, in this part we’re going to implement the list and add functionality by using riverpod. In the second part, we’re going to add the functionality for filtering the favorites, by combining multi providers’ values.
1. Prerequisites
You need Flutter to be installed on your device, and your favorite edtior or IDE.
If you do not have flutter installed yet, please follow the instructions in the official documentation.
2. Setup
First of all, you need to create a new project, you can do this by opening the terminal if you’re on macos, or cmd if you’re on windows.
then to create the project type flutter create riverpod_favorite_demo, then open the project in your favorite editor or IDE.
Now, let’s get started with the code part. the only package We’re going to use is flutter riverpod. To import it in your project, open pubspec.yamland paste the current dependency under dependencies :
You can refer to this file for comparsion.
3. Implement the main method
After we’ve added our dependency, now we can start the coding part. Go to main.dart, we’re going to start fresh, so delete everything.
Firstly, add material.dart dependency by typingimport 'package:flutter/material.dart'. Now we’re going to implement our main method:
Note: It is cricital to wrap your app withProviderScope in order for riverpod to work.
4. Implement MyApp
MyApp is a simple widget that defines the structure of the app using MaterialApp :
5. Implement Home
We’re going to create a new file and name it home.dart , which will hold the home screen. It is just a simple Scaffold which will hold an empty AppBar (does not serve any purpose, just for our screen to look cooler) and the body‘s value will be ProductsList , a widget which we’re going to implement in a sec:
6. Design the ProductList without favorite functionality
In this step, we’re going to implement ProductList, which returns a list of ProductItem , another widget which we’re going to be implementing in the next step. ProductList returns a ListView.builder contaings a list of ProductList . The data of the products will be fetched from the provider later on, but for now, we’re going to provide hard-coded data:
7. Implement ProductItem
ProductItem is a simple widget that returns a ListTile with the item’s title as the title parameter and a heart icon as the trailing parameter:
at this point, when you run the app, it should work correctly and your output should be as follows:
8. Modalize ProductItem
In this step, we’re going to start providing the info to the ProductItem using a class called ProductModel , which will hold the product’s title, the product’s favorite status, and the product’s id (will be used later on while integrating riverpod)
Create a file called product_model.dart :
NOTE: This code piece contains a factory constructor, to learn about it you can read the official documentation.
Now we will adopt the model in the ProductItem :
And now we will provide the models to ProductItem s from ProductList :
After this step, your output should be as follows:
9. Fetch the data from riverpod state
In this step, we’re going to implement the productsProvider which will hold the values of the products list, and adopt it in ProductList .
create a file named products_provider.dart :
Now we want to adopt the provider in the ProductList , we’re going to convert it from StatelessWidget to ConsumerWidget to be able to consume the values of the provider, using the ref provided in the build method:
After this step, your output should be as follows (same as the previous step):
10. Implement set to favorite on tap on the heart icon
First we’re going to start from products_provider , by adding a method that triggers the favorite state update:
In this snippet, we’ve used copyWith method which is not implemented for ProductModel yet, we’re going to implement it in a sec.
Now we’re going to invoke the setFavorite method on tapping on the heart icon, In order to do that we have to convertProductItem from StatelessWidget to ConsumerWidget and use its ref for invoking toggleFavorite :
here we did not invoke the toggleFavorite of the provider, instead, we invoked an unimplemented method in ProductModel , the goal here is to separate the logic and let the ProductModel decide what to do:
and tada! now we have a functioning Favorite list using riverpod!
— You can find the full code at the Github repo.
Best regards,
Adnan.
