Flutter MVVM architecture with Riverpod.
A practical approach to MVVM architecture with Riverpod.
In my years of experience as a Flutter developer while working with a team I have seen large codebase totally messed up due to poor state management and bad structure.
Without any doubt for your code to be robust, scalable, maintainable and testable you must follow a good architecture approach, irrespective of the size of the application you are working on following a good approach always help in the long run. This doesn’t mean we should over engineer the codebase (as most developers do). You can follow a good structure and still maintain a simple codebase.
The fact is that the quality of your codebase and code structure can determine your level of maturity as a software developer.
There are many state management solutions in Flutter while some are too complex to learn and adapt to, others are easy to follow along.
In this article, we will be building a real world application using the MVVM architecture, this is the improved pattern I use in my production apps. I came up with this architecture after studying the Stacked architecture which I have been using for a while now. That been said let’s dive into coding.
Prerequisites
- Make sure you are familiar with Flutter Riverpod to follow along. kindly check out their documentation here.
- We will be using Open Weather API in this project. Please make sure you have your API key.
We will be using the following packages:
a. http for network request.
b. intl for formatting date.
c. location for accessing the user’s current location.
e. flash for displaying dialog message.
f. flutter riverpod for state management.
g. shared_preferences for storing page value.
Below is the screenshot of my folder structure.
Implementations
Inside the model folder create a new file weather_model.dart and paste these code.
Inside the service folder create a new folder weather_service.dart and paste the following code.
The code above is simply an abstract class with an implementation class. I used provider from the Flutter riverpod package to create an instance of the implementation class. This will enable us to access the class from anywhere in the app without creating an object of the class in every class. Let’s continue.
Inside the view folder create two folders landing_view and home_view these folders will contain our UI.
Take a deep breath or take cold water…😊😊
Inside the landing_view create two new files landing_view.dart and landing_view_model.dart.
Inside the landing_view_model.dart file paste the following code.
In the code above we are simply requesting for the user’s permission to access the device location and to enable the location service if it’s turned off and also, to handle loading state in the UI because it’s asynchronous, I used state notifier with a boolean type and expose it with stateNotifierProvider. Kindly check out the riverpod document.
Inside the landing_view.dart file paste the following code.
If you run the above code you should have something like this.
Inside the home_view create two new files home_view.dart and home_view_model.dart.
Inside the home_view_model.dart file paste the following code.
the code above is simple and straight forward. We are calling the getweather method from the weather_service.dart file also known as repository and also getting the user’s location with the location package. the getweathericons method will return the respective icons base on the weather condition.
Inside the home_view.dart file paste the following code.
Finally run the app.
If everything went well it will return the weather data else it will show an error screen with a retry button which will automatically refresh the UI. This is the power of Riverpod.
If we turn off our mobile data a dialog will pop up as shown below:
That is because I added the connectivity_plus plugin to listen to internet connection.
Kindly check out the full source code of this project below and play along with it as you wish.
NB: If you find it difficult to understand as a beginner pls give it more time and more practice moreover, you mustn’t follow my pattern just understand the concept behind it. I will be publishing more articles on MVVM architecture with Riverpod with a real world project approach from time to time so stay tune.
Please I will appreciate any feedback and corrections in comment section.
Thank you and keep coding!!!!!!!
