Mastering State Management in Flutter with Riverpod : Part - 2

Welcome to our tech blog, where we delve into the fascinating world of Flutter and its advanced state management solutions. In the last part of the Riverpod series, we covered the basics of Riverpod and providers in Riverpod. In this blog, we are going to build a complete Flutter application using Riverpod. So if you haven’t read the first part, I highly recommend it. The application source code is on GitHub.

So we are going to build a music application which has three screens. First, we have a screen where we list down all the songs, Second we have song details screen where we show lyrics and last one is the error screen. This is the same application we built in the Flutter BLoC series. In this project, I have used GoRouter for the navigation which I have already covered in a separate blog. We are not going to focus on building UI and navigation in this blog. We are only going to focus on State management-related things. So let’s first import the necessary packages -

flutter_riverpod: ^2.0.2
fpdart: ^0.4.0
connectivity: ^3.0.6
dio: ^4.0.6

Step 1: Wrap your root application with ProviderScope

Step 2: Service file for APIsAPI's

Here we have created three functions for each of the APIs using the Dio package. For error handling, we are using fpdart package. For that, we have created a typedef to avoid big syntax -

Either is a keyword from the fpdart package that we imported. It allows us to return different data types from a single function. In our case, the getSongs() function will either return an HTTP Response or an error string.

Step 3: Model classes for Song and lyrics

Step 4: Home Page Controller

Let’s build the first page where we will list down all the songs. So create a home_controller.dart file where we are going to create our first provider -

Let’s first discuss the controller and then we will cover the provider. In the HomeController class, we have an instance of our SongService class that we created and we have the loadSongs() function which on success stores the songs in the List but an error throws an Exception.

First, we created a provider for HomeController so that by using ref we can use HomeController in the application from anywhere.

Now we have created a FutureProvider because we are dealing with a network and we need to handle all the loading, loaded and error cases. So for such situations, FutureProvider is best suited. Now we have business logic sorted out, let’s connect it with UI.

Step 4: Home Page UI

I have created separate widgets for the error page and loading screen, you can check out the GitHub repository for that.

Step 5: Song & Lyrics Page Controller

Now with the same approach let’s create our Lyrics screen but in this, we need to do two API calls on one single page.

We have again done the same thing with controllers and providers but in these FutureProviders we have taken the input of id which is required for the API.

Step 6: Song Details Page UI

Note: Make sure to wrap your widget with ConsumerWidget to update the UI when the provider updated its data.

Step 7: Connectivity Provider

We have completed the features of the application but we want to add a simple connectivity check to show the user that he/she is not connected to the internet. So we create a connectivity controller -

This class is extended with a StateNotifier of type boolean as we want to only use one value from the class. So for creating a provider for this class we also need to create a StateNotifierProvider. This class just listens to the connectivity stream and updates its state value when there is a change in connection. We use this provider with UI like this -

And with that, we have completed our Flutter Music Application using Riverpod.

Congratulations on completing our blog and Flutter music app project with Riverpod! Subscribe to our newsletter for upcoming blogs.

Keep Fluttering 💙💙💙