Coding an E-Commerce App Backend in Flutter

It is not everyday you get a chance to work on an e-commerce app. Not get a chance to work on, but make one from scratch and roll it out into production.

Flutter is something we have been using for quite some while now. Though not an expert in it, being able to figure out stuff in it is easy given the large number of resources available online. Well, UI resources. It is really hard to find proper backend code. Using API’s is easy. That is basically the backend putting forward values for you to grab and display or send some values instead.

Hard work is when you need to make the backend all by yourself using firebase and firestore. I am the rookiest noob when it comes to anything firebase. I have had a hard time getting the SDK integration right and with the new AndroidX error it has been a horror.

Getting started

That’s basic

This was totally useless for me to show but putting it here nonetheless.

Lets talk about the folder structure.

Create this specific folders and files

If you are a experienced Flutter Developer, you’ll know this is not the convention but for a simple logical demonstration of the project, this folder structure does the job just fine. After the logic is set up you can throw in all sorts of state management systems in the app. In this article we are going to discuss about the simple “product” feature, which is the most basic entity in an app like this.

The YAML File 🔥

Since I’ve been writing this project for a company, show casing all of its source code could get me in jail 😂

But yeah the pubspec.yaml file should not be a problem I guess. I hope.

Some dependencies removed which you will not require for this article

So lets discuss the logic flow. When the user opens the app, he either sees the login page or the home page. Now what is the logic?

Lets get a basic understanding of the workflow for that part

Simple Logic though we will not write it like this in the main app

I can’t start with the main.dart file because there will be a lot of imports that won’t make sense. Hence I’ll use the bottom up approach of making this app. Lets start from the models. Which essentially defines the database schema of the application. Well, here only the product table will be given. And when I say table, it is in terms of SQL. We are using a NoSQL database that is firebase. So here products is nothing but a collection.

Open the file you created that is product_model.dart that is inside `src/models/product_model.dart`. Making a model is super easy, barely an inconvenience.

The model class

We have two constructors. One is the default one which lets you create a product with passed in parameters. The other one, which is a named constructor lets you create a product when you pass data in the infamous JSON format. Dart ❤️

The CRUD operations handler 🛠️

We have a database, okay! Now how do we communicate with it? Well we use the firebase plugins to do that. Worship abstractions.

The sample CRUD handler class. Some imports will not work as we have not defined them yet

Done? Yeh, we are 90% through.

Is it clean? NO! Not at all. If we create multiple classes for CRUD, we have several imports and as the codebase grows in size, it becomes complicated for us to handle so many functions. So we instead create a universal Service class which tracks and works with all the other CRUD classes.

One stop easy function calling.

How to use it? Well here is a sneak peek into that part.

Sneak 100?

Displaying the data of products in a page. Well we obviously need a page where we load all the products from our firebase database and display it. Duh!

How do we go about it? Well it’s fairly basic. We fetch the data using a getData() function and store it in a Stream variable aptly named products.

Enough talk show me the code!!!

Yeah, all I’ve been doing in this article is showing the snippets of the code because I can’t open source it.

Wait.

There you go!

Yes, yes the code is pretty ugly. But hold up tight we are almost done. No more eye sour, I promise.

What have we done so far? Well we made the database schema for the products. Handled the product CRUD operations. Like we can create it, read it, update it and delete it. Well for now we have done much less but you get the idea right? I hope you do. Let me show what kind of function you can call after taking the details of a product from the user. Taking in the data from the user? Use a normal TextField Widget unless you want some voice recognization stuff in the app.

Press ‘F’ to upload.

Done, but not dusted yet.

We are done with the very basics of the logic to help you get started. Lets finish the main.dart which is going to be very very simple again but the user thing? well since we are using firebase as the backend service we can use the following logic to check user persistence in the app.

The current user helps check if the app is already using a logged in user or not

Okay, now that we are done with the User Management.

We can work on top of it and make some new and more flexible functions, but here we are fighting and trying to hide the scars.

main.dart

This is going to be the most complicated part of the app yet. So brace yourselves for a journey to the unknown world of dart source code.

Woof! Lost a part of my soul writing this.

So that is it I guess. A very basic workflow of an ecommerce application in flutter.

The things that we are missing out in this article

1. The review system
2. The purchase mechanism
3. The cart system

Well, I am still here. So I’ll give you something to calm down 🤗.

For going forward with the review system, it is as simple as creating a review_model.dart with a ReviewModel class with parameters like rating and comment. For the cart system, you do the same thing. with a boolean parameter like productAdded and productCount. The purchase mechanism is a whole another story and you can use stripe.

As soon as I am fired I’ll open source the code 😈 😈

Promise

wait, it’s dart

Future!

To see if I was fired or not, stalk me up on Github ❤