Building E-commerce app with Flutter bloc pattern-3

Flutter bloc + Firebase

Hi developer, In the previous module we have seen how we can perform email password authentication using firebase, and we have learned about how we can use the bloc library to implement state management.

Now in this module, we shall design the shop page that shows the details of the products, and from this screen, the users can select the products and add them to the cart. On this screen, there will be a product tile that will display the product details i.e. product name, product quantities, product price, and a widget that users can use to add the particular products to the cart. Also, we will design a widget that will display the total number of items added by the user in the cart, and on tapping this widget the user will be navigated to the place order screen.

Here is the screenshot of the screen that we will design:

Figure:1 HomeScreen Screenshot

So let's begin,

Product Model:

Firstly we will design a model class for the product widget. This model will contain all the properties that the product will contain as follows.