No backend? No problem. Use mock data for any Flutter project
Hey you! Yes, you. Have you ever experienced inconvenience while developing an app while your backend wasn’t ready yet? Or did the backend guys mess something up again? Then mock data is what you need. But what’s the proper way of using it? Let’s take a closer look.
The solution
In the course of this article, you will learn to do the following things:
- Represent your test data as JSON files and include them in your project.
- Create a mock interceptor for your HTTP client.
- Inject the interceptor using dependency injection based on the current environment.
JSON mocks
To begin with, I hope you know what a JSON file is. Yes? Great! Well.. we will need one for each backend endpoint we would normally try to communicate with that would return a body response. For example, let’s say we want to mock the login endpoint located on our backend server under the user/login path. Here are the necessary steps to do that:
- Create a json folder for our mocks in assets/.
- Then create a folder called user in assets/json/.
- Create a login.json and put it inside the user folder.
- Put the desired response body of the endpoint inside the .json file. For our purposes we will just define an access token that would be returned when the user successfully logs in:
Next, open your pubspec.yaml file and add the necessary imports for each created folder:
Be happy that you accomplished so much already :)
The mock interceptor
Moving on, we will need a better HTTP client than this classic one. We need one that supports interceptors. We will use the popular dio package for that. Start by including the package into your pubspec.yaml file:
If it’s your first time using the package, please make yourself familiar with its documentation as I’m not going to cover the general usage for this class but focus on its interceptor capabilities.
Now create the MockInterceptor class. Its main purpose will be monitoring the occurrence of different requests, finding the corresponding .json file for them, and returning a successful response. It starts by loading the required file from the root bundle. Then we decode the contents of the file as a JSON and finally return a dio response instance will the 200 result code, corresponding to a successful response. Of course, here you can place all sorts of different logic that should be taken into account when trying to perform a given request.
Now that we have our interceptor, let’s move on to how to handle injecting it based on the current development environment for our app.
Injecting the mock interceptor
We will use the magic of dependency injection to handle the usage of our data mocks. If you have no experience with this subject take a look at our dedicated article about it. We start by registering an interceptor list instance for both our development and production environments. In the case of production, we can leave it empty or populate it with other kinds of interceptors. For the development environment, we include the MockInterceptor class based on the current environment’s useMockData flag for a quick way of activating and deactivating our mock data.
Next, in our Dio class dependency registration, we add all the interceptors. Our dependency manager will take care of resolving the correct interceptor list for us.
And now we create the required dio requests and test if our mocks work just like we wanted them to do. Again refer back to the documentation if you are not familiar with how to use the dio package.
Conclusion
I hope you found this article useful. Handling mock data seems like a petty subject but it can be a lifesaver when we consider the reality of everyday development processes. Now even without a backend ready you can plan it’s structure beforehand which means the later integration phase will be much smoother and mostly pain-free. Also, at the mock stage, you will be able to catch any design problems and mistakes before the backend tries to implement them. As you can see mocks can significantly improve the overall development process.
Deviniti is your guide to the universe of digital transformation and enterprise software. Check out who we are and what we can do on our website.
If you want to learn more Flutter tips and tricks, make sure to check out other articles available on Deviniti Technology-Driven Blog:
