Flutter E-commerce App

Dec 28, 2022

content_copy

1. Purpose of the application.

Online Shopping App Flutter – In this article we discuss how to develop shopping applications like grocery, mobiles, e-commerce using flutter dart. These days everybody likes to get their services online. So they need one basic application for promoting their products online.

In application we will cover basic flow for the shopping application

Product listing
Product details
Add/Remove to cart
Add/Remove from favourite
Cart list

2. Why flutter ?

Flutter is an open-source mobile SDK. Using Flutter we can create multiple platform applications using single code like Android, iOS, Web application, Desktop application. Flutter provides native app-like performance in a single code base across all platforms.

3. Usage packages to develop the application

To create an online shopping application used below flutter packages.

get : Used for the state management in entire application
Shared preference: Used to store data in local storage.
Sqflite: Used to store sql data in the application storage

4. Application Flow

In this application we will set static data which one saved into a sqlite database using the package. Once data stored in sqlite DB will use that data to show in the UI. Whenever a user launches the application for the first time that time we are storing data into sqlite database.

After saving data into sqlite database we will fetch data in the UI side using getx library.

In lib/pages/HomePage.dart initialize the controller file. On init it will check the user flag & save data into application storage. In the HomePage.dart file we fetch data into getx library to show in the UI.

Using the getx library we can redirect a page with one line of code. Getx library provides lots of features like Translation, Toast, Navigation. Change theme-mode, Middleware etc…

Here is the code for material navigate & getx navigate.

Whenever data updates in getx storage it will re-render the UI automatically. It will also work for the nested pages.

On particular products click the open details page where we are showing product details & allow the option to add product into cart / mark as favourite.

When the user clicks on the Add to cart / favourite button it will update UI and also update records into sqlite database for future reference.For cart listing also manage from the getx library & create a separate table for the manage record into sqlite database.

‘Shopping’ table used for product listing & ‘cart_list’ table for shopping cart items.

On cart page showing list as below image in which user can remove item from cart list on the button click. On remove click it will remove items from the database & also update count in the home page app bar which one manages using getx.