INDUSTRIAL TRAINING REPORT

in partial fulfillment for the award of the degree

of

Bachelor of Technology In
Computer Science & Engineering
in

Department of Computer Science & Engineering

BHARTIYA INSTITUTE OF ENGINEERING &

TECHNOLOGY,
SIKAR
BIKANER TECHNICAL UNIVERSITY

INDUSTRIAL TRAINING REPORT

Submitted by

MOHAMMAD SAHIL BEHLIM

20EBTCS017

Submitted to

MR. PANKAJ GOTHWAL

(Ass. Prof.)
i
 ABSTRACT

This report encapsulates a detailed exploration of the flutter framework and an ecommerce demo
project which have some list of products with their price and descriptions, documenting a
thorough journey through theoretical insights and practical applications. The report delves into
the essential principles, tools, and techniques that define flutter as a dynamic and ever-evolving
method.An overview of flutter framework is totally improved by its performance.

The Flutter Report explores the framework's benefit on mobile app development. Flutter,
knownfor its cross-platform capabilities, facilitates the creation of visually appealing and
consistent applications on iOS and Android. This report delves into Flutter's architecture,
emphasizing its widget-based approach and Hot Reload feature, fostering rapid development
cycles. The report highlights Flutter's extensive widget library and its role in crafting responsive
and engaging user interfaces.

Additionally, it discusses the framework's integration with various plugins, enabling seamless
access to device functionalities. Case studies showcase successful applications built with Flutter,
demonstrating its versatility across industries. The report concludes with insights into Flutter's
community support, continuous updates, and its potential role in shaping the future of cross-
platform development.

ii
 CONTENTS

1. Introduction 01
1.1. Purpose
1.2. Objectives

2. Android Application Development & Requirements 03

2.1. Ecommerce Application Development
2.2. Android App Development
2.3. Functional Requirements
2.4. Non-Functional Requirements
2.5. GUI

3. Technology 07
3.1. Flutter
3.2. Android
3.3. Dart Language
3.4. Google Firebase
3.5. Android Studio

4. Technical Implementation 12
4.1. Planning
4.2. MVVM
4.3. Flutter Firebase Working
4.4. Firebase Configuration for Android

5. Code Explanation 15
5.1. Assistance from the Open Sources and Friend

iii
 5.2. Whole Application Background Function Calling

6. System Requirements
6.1. Hardware Requirements
6.2. Software Requirements

7. Design and Architecture

7.1. Overview
7.2. Architecture style
7.3. Design patterns

8. User Interface Design

8.1. Authentication
8.2. Home Screen
8.3. API Calling

9. Features and Functionalities

9.1. User Registration
9.2. User Profile Management
9.3. Menu Display
9.4. Rating and Review System

10. Testing and Quality Assurance

11. Implementation

12. Conclusion & Further Work

iv
 Chapter 1
INTRODUCTION

In this thesis, the Flutter technology is utilized to develop a fodei food application. It is a
technique of buying foods and services through the internet that is growing in popularity and
effectiveness for online. This offers a number of benefits, the most significant of which is that it
is inexpensive and convenient.

1.1 Purpose:
Fodei is designed with the core purpose of revolutionizing the way people interact with food-
related services. It leverages the power of Flutter, Google's UI toolkit, to create a seamless and
intuitive user experience across various platforms, including Android, iOS, and web. The
application aims to cater to the needs of both food enthusiasts and businesses in the food industry
by offering a range of features and functionalities.

One of the primary goals of Fodei is to simplify the process of discovering and exploring new
cuisines, restaurants, and recipes. Through its user-friendly interface and advanced search
algorithms, Fodei allows users to easily browse through a vast collection of dishes based on their
preferences, dietary restrictions, and location. Whether someone is looking for a cozy café
nearby or a trendy restaurant offering vegan options, Fodei provides personalized
recommendations tailored to their tastes.

Additionally, Fodei serves as a platform for culinary enthusiasts to connect, share, and discover
new recipes. Users can create their profiles, upload photos of their culinary creations, and engage
with a community of like-minded individuals. This social aspect of Fodei not only fosters
creativity but also encourages learning and exploration in the culinary world.

For businesses in the food industry, Fodei offers a range of tools and services to enhance their
online presence and reach a wider audience. Restaurants, cafes, and food vendors can create
detailed profiles showcasing their menus, special offers, and customer reviews. They can also
leverage Fodei's marketing features, such as targeted promotions and sponsored content, to
attract new customers and increase sales.

Another key aspect of Fodei is its focus on promoting sustainability and healthy eating habits.
The application highlights eco-friendly restaurants, locally sourced ingredients, and nutritious
recipes to encourage users to make informed and mindful food choices. By partnering with

1
Dept. of CSE
sustainable food initiatives and organizations, Fodei aims to create a positive impact on the
environment and public health.

1.2 Objectives:
The objective of the Fodei food application developed in Flutter encompasses a multifaceted
approach aimed at revolutionizing the dining experience for users. Fodei sets out to seamlessly
integrate technology into the culinary world, offering a comprehensive platform that caters to the
diverse needs of food enthusiasts, restaurant owners, and delivery services.

At its core, Fodei seeks to enhance convenience for users by providing a user-friendly interface
that simplifies the process of discovering, ordering, and enjoying food. Through intuitive design
and robust functionalities, the application aims to streamline the entire food journey, from
browsing menus to making payments, all within a few taps on the screen.

Chapter 2

2
Dept. of CSE
 ANDROID APPLICATION DEVELOPMENT &
REQUIREMENTS

Android app development requires Java/Kotlin, Android Studio, XML, and SDK. Define clear
goals, user-friendly UI/UX, efficient coding, testing, and compatibility for a successful
application.

2.1 Food Application Development:

Food application development involves a meticulous process aimed at creating intuitive and
efficient platforms that cater to the diverse needs of users in the culinary realm. The development
journey typically begins with thorough market research and analysis to identify trends, user
preferences, and pain points within the food industry. This initial phase lays the foundation for
designing a user-centric application that addresses key challenges and offers innovative
solutions.

The next crucial step in food application development is conceptualization and planning. This
involves defining the application's objectives, features, target audience, and monetization
strategy. Collaborating with stakeholders, including chefs, nutritionists, restaurant owners, and
potential users, helps gather valuable insights and ensures that the application aligns with market
demands and industry standards.

Once the concept is solidified, the development team proceeds to the design phase, where user
interfaces (UI) and user experiences (UX) are meticulously crafted. The goal is to create an
aesthetically pleasing interface that is easy to navigate, intuitive to use, and optimized for various
devices and screen sizes. Prototyping and wireframing techniques are often employed to
visualize the application's layout, functionalities, and user flow before proceeding to the
development stage.

In the development phase, programming languages and frameworks such as Flutter, React
Native, or native languages like Java or Swift are utilized to build the application's backend and
frontend components. This involves coding features such as user authentication, menu
management, order processing, payment integration, real-time notifications, and data analytics.
Quality assurance and testing are integral parts of development to ensure the application is bug-
free, secure, and delivers a seamless user experience across different devices and platforms.

Finally, the deployment phase involves launching the application on app stores such as Google
Play Store and Apple App Store, implementing marketing strategies to promote user adoption,
gathering user feedback for continuous improvement, and iterating based on user insights and

3
Dept. of CSE
industry trends. Ongoing maintenance, updates, and feature enhancements are crucial to keep the
application relevant, competitive, and aligned with evolving user expectations and technological
advancements in the food industry.

2.2 Android App Development:

Android app development is the process of creating mobile apps for devices using the Android
operating system. Languages like C, object-oriented languages (like Java), and the SDK
(Android Software Development Kit) are used to create Android applications. Android was
initially introduced in 2009, and it is based on the Java programming language. In today's world,
Android dominates the whole portable app sector, with the majority of the market share and a
global clientele.

2.3 Functional Requirements:

The functional requirements for this application that are necessary to complete this project are as
follows:

• Application must start when client clicks on app icon

• Application must show the home page of the application first

• Application must provide the selected category’s content list for the client

• Client must be able to view the recipes

• Client must be able to view the recipes image

• Application must provide the selected recipe’s description for the client

• Client must be able to add the recipe to the cart

• Application must provide the customer’s information form for the client

• Client must send the provided credentials to the application

2.4 Non- Functional Requirements:

The non-functional requirements for this application that are necessary to complete this project
are as follows:

4
Dept. of CSE
• Application should have an interface to display products to the customer.

• Application should have an interface to display list of categories

• Application should be able to display list of categories, so customers easily click on them

• Application should be able to display a product’s description

• Application should have an interface for the customer to add a recipes.

2.5 GUI (Graphical User Interface):

The graphical user interface (GUI) of a food app developed in Flutter focuses on delivering a
visually appealing, intuitive, and seamless user experience. The home screen typically features a
clean layout with prominent sections for browsing restaurants, exploring menu categories, and
accessing user profiles.

Using Flutter's customizable widgets and rich animation capabilities, the GUI incorporates
interactive elements such as swipeable carousels for featured dishes, search bars for quick
navigation, and filters for refining search results based on cuisine, price range, or dietary
preferences.

Each restaurant's page within the app showcases enticing food images, detailed descriptions,
ratings, and reviews to aid users in making informed choices. The ordering process is
streamlined with a user-friendly cart system, secure payment gateways, and real-time order
tracking.

Additionally, the GUI includes personalized recommendations, order history, and social sharing
options to enhance user engagement and satisfaction. Overall, the GUI of the food app in Flutter
prioritizes usability, aesthetics, and functionality to create a delightful dining experience for
users.

Chapter 3
TECHNOLOGY

5
Dept. of CSE
Technology: tools, systems, methods, and materials applied to achieve objectives, solve
problems, and enhance human capabilities, evolving rapidly.

3.1 Flutter:
This application is built on Flutter technology. Flutter offers several advantages because it is a
Google product. The following is a quick overview of flutter. The app development process is
revolutionized by Flutter. You can design, test, and publish stunning mobile, web, desktop, and
embedded apps by writing onetime code. Google built Flutter as an open-source project. It's used
to make hybrid apps for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web
from a single codebase.

classMyAppextendsStatelessWidget {
constMyApp({super.key});

@override
Widgetbuild(BuildContext context) {
returnMultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) =>AppProvider(),
)
],
child:MaterialApp(
debugShowCheckedModeBanner:false,
theme: themeData,
title:'Ecommerce',
home:StreamBuilder(
stream:FirebaseAuthHelper.instance.getAuthChange,
builder: (context, snapshot) {
if (snapshot.hasData) {
returnCustomBottomBar();
}
returnWelcome();
},
),
),
);
}
}

6
Dept. of CSE
You can develop and iterate quickly using Hot Reload. You'll observe changes very immediately
after updating the code, with no loss of state. Maintain every pixel to create unique, responsive
designs that look and feel great on every device.

Every component in flutter is referred to as a widget. It is entirely widget based. Stateless or

stateful widgets are available. There are several states in a stateful widget, not just one. They
have the ability to modify their state in response to user interest. A Stateless widget, on the other
hand, is a static widget that is utilized for static data or functionality. It is devoid of any state. We
need to utilize it in some circumstances because we work with static data.

Flutter is an open-source project, anybody may use and contribute to it at any level. It's better to
use it and offer your passion for Google technology by becoming a Google contributor. Flutter
has a massive user base since it is a Google product, and Google is the most widely used search
engine on the planet.

3.2Android:
Android is a multitasking mobile operating system that runs on smartphones, tablets, readers,
televisions, and even domestic robots. Google purchased and marketed this operating system,

7
Dept. of CSE
which was developed by 'Android Inc' and based on Linux. Android's introduction as an
operating system (OS) in 2008 was a spark, and it quickly became popular among smart gadgets.
Modern smartphones and tablets might be considered stash minicomputers thanks to this
operating system.

By 2020, the Android platform will have about 35 billion users worldwide, making it the most
popular mobile operating system on the planet. A large number of smart gadgets run on this
operating system (like phones, tablets, and smartwatches). Every company organization or brand
in the world nowadays need an e-commerce Android app in order to grow their business, money,
and popularity.

Android is a very adaptive and engaging system, and a basic acquaintance takes less than an
hour. Because there are so many essential programs accessible, any customer may easily
configure OS settings. You can modify everything past recognition: if you don't like the look,
symbols, or ringtone, simply go to the Google Play Store, download a significant program, and
quickly customize everything to your desire

3.3 Dart Language:

Dart is a client-oriented programming language that enables rapid app development across all
platforms. Its primary goal is to create one of the most productive languages on a variety of
platforms. Both the server and the user will benefit from it. The Dart SDK includes the Dart VM
compiler as well as the dart2js tool, which generates the JavaScript version of a Dart Script so
that it may be executed on sites that don't support Dart. It is a very similar object-oriented
programming language to C++. Dart is a popular programming language for creating single-page
websites and online apps.
var name ='Voyager I';
var year =1977;
var antennaDiameter =3.7;
var flybyObjects =['Jupiter','Saturn','Uranus','Neptune'];
var image ={
'tags':['saturn'],
'url':'//path/to/saturn.jpg'
};

Dart is designed to provide logic and, as a result, a beautiful user interface. For mobile, desktop,
and backend apps, compile specialized machine code. Alternatively, for web use, compile to
JavaScript.

8
Dept. of CSE
3.3.1 Benefits:

The first advantage is that it is a very easy language to pick up. If any of us are familiar with C or
C++, we can quickly learn this language because the grammar is comparable. The vast
community, which provides extensive documentation, is the second item to note. And because
it's a Google product, they make it as simple as possible. The third advantage is its excellent
performance. Dart-based programs are faster to execute than JavaScript-based programs. (Code
Carbon, 2020)

3.4 Google Firebase:

Firebase is a Google program that allows developers to create apps for a variety of platforms,
including iOS, Android, and web-based apps. Firebase is a quick tool for developing things that
would take a long time in a traditional database 15 system, such as bespoke APIs. Firebase has
built-in APIs that allow us to construct applications quickly. One of the nicest features of
Firebase is that it gives us tools for tracking business reports and experimenting with different
goods.

The Firebase database is a real-time database that allows clients to immediately access data.
Even if you are not connected to the internet, you can still use your program with all of your
prior data sets. Firebase allows users to use data in a secure and secured manner.

The Firebase database is a NOSQL database, similar to the MYSQL database used in PHP
applications. The real-time database API was created exclusively for rapid operations and
capabilities.

9
Dept. of CSE
3.5 Android Studio:
It's a Google-created integrated development environment (IDE). The goal of Android is to
speed up progress and make it easier for users to create high-quality apps for Android devices.
Commonly used operating frameworks, such as Mac and Windows, allow variations of this IDE.
It also provides a development kit and plugins for developers. cross-platform application support
(IDE).

10
Dept. of CSE
 Chapter 4
TECHNICAL IMPLEMENTATION

4.1 Planning:
The initial stage in our project's technological execution is to plan what we want to build that
will benefit our society. We've attempted to question everything that may be touched by the
program up to this point:

• Will the development take place in stages or all at once?

• How much time will it take?

• Will there be new security challenges?

Finally, we want to create an ecommerce software that allows users to purchase items without
having to go to an actual store or shop. This is an excellent concept for easing the difficulties
faced by many folks who are unable to go to the market to purchase goods. An entire store is
there at their fingertips; all they have to do is scroll and choose the things that best suit their
needs.

4.2MVVM (Model-View-View Model):

The app's current design is built on the MVVM paradigm, which employs a wellknown provider
pattern. Views in this design closely monitor the view Model and react to any changes that are
detected. We have a home-view that is watching Data View Model, and the Data View Model
has a reference to the model in our example.

In the Data View Model, we have a method for filling categories that is responsible for adding
categories to the list of categories and informing the listener, much like populating categories.
The Home-view has a Horizontal List View widget that monitors the category list and updates
the content of the list View whenever the list is modified.

4.3 Flutter Firebase Working:

When a client (iOS or Android) requests a firebase API, the client sends its query to the firebase
database, which then responds to the firebase API and the client (IOS or Android).

11
Dept. of CSE
In Flutter, this is a lib folder where we can handle all our app's screens. This folder also contains
the functioning section. This folder is responsible for 90% of our app development.

• Pubspec.yaml manages all our library files. This is a very private section of our
software. It is also space constrained.
• Two responsible libraries for firebase integration are 1. firebase_core: ^1.16.0 2.
firebase_auth: ^3.3.17

4.4Firebase Configuration for Android:

To use Firebase with Flutter, we must first create a Firebase console project. We've established a
project called Angel on Firebase. After that, we added packages for Android and iOS.. We
inserted a google json file for Android and an info plish file for iOS in the root directory of both
Android and iOS. This is how we set up our Firebase application for iOS and Android. We've
also included packages in the pub spec files for authentication.

We received the project id, which is essentially our project's unique identification. We also
issued a project number, which we may use to configure integrations with Firebase or other
third-party services. We also gained the public facing name, which will appear on emails sent to
users after they create an account in our application.

12
Dept. of CSE
13
Dept. of CSE
 Chapter 5
CODE EXPLANATION

5.1 Assistance from the Open Sources:

I received design assistance from one of my mates as well as other sources. The Shipping details
page, intro screens, and Model screen were created with the help of trainer, and the design was
pulled from site on the internet and integrated into one.

We got a reasonably decent open-source code from GitHub for designing part of the code and
used parts of the code from that open source and made adjustments to it by watching YouTube
tutorials to add some other components as well.

We used the cart component with the help of YouTube instead of the search bar on the top right
side of the application. We've also created a shipping detail section where we ask for buyer
information such as address, phone number, and so on. (The Flutter Way, 2020)

14
Dept. of CSE
5.2 Whole Application background Function calling:
When a user opens an app for the first time, we set a background function to call once when the
app is opened by a new user. It has 3 to 4 guides to keep users entertained. When the home
screen is opened, it calls the home screen widget, which then calls the state widget to receive
product data and display it in a grid on the home screen.

Navigator is a tool that allows us to navigate data by category. When a user taps on a product, we
acquire its array index and retrieve the desired object detail. When a user taps on a product
(which are taken from an open source), the product's details screen opens. On the detailed screen,
we match a product's id with the array and display data when the id matches the array index.

(UnSplash)

On the detail screen, we have fields for description, price, add to cart, and buy now. It will be
added to the cart when the user clicks on add to cart. When a user clicks the buy now button,
they will be taken to the checkout page. If the user is logged in, he or she can place an order; if
not, the user must first log in to their account, then register for an app, and then log in.

Illustrator offers robust typography tools for creating and manipulating text. Users can choose
from a wide range of fonts, styles, and effects to enhance their typographic designs.

Login:

Future<bool>login(
Stringemail,
Stringpassword,
BuildContextcontext,
) async {
try {
showLoaderDialog(context);
await _auth.signInWithEmailAndPassword(
email:email,
password:password,
);
Navigator.of(context).pop();
returntrue;
} onFirebaseExceptioncatch (error) {
Navigator.of(context).pop();
showMessage(error.code.toString());
returnfalse;
}
}

15
Dept. of CSE
SignUp:

Future<bool>signup(
Stringname,
Stringemail,
Stringpassword,
BuildContextcontext,
) async {
try {
showLoaderDialog(context);
UserCredentialuserCredential=
await _auth.createUserWithEmailAndPassword(
email:email,
password:password,
);
UserModeluserModel=UserModel(
id:userCredential.user!.uid,
name:name,
email:email,
image:null,
);
_firestore.collection('users').doc(userModel.id).set(userModel.toJson());
Navigator.of(context).pop();
returntrue;
} onFirebaseExceptioncatch (error) {
Navigator.of(context).pop();
showMessage(error.code.toString());
returnfalse;
}
}

When the user adds products to the cart, he or she will check the cart to see which items have
been added. He/she will inspect the items and proceed to checkout from here. When he/she taps
to check out again, the login session is checked, and ifhe/she is not logged in, they must first log
in before placing an order.

16
Dept. of CSE
We also display products underneath the details screen of each product, allowing the user to
select products from the same category. User interface processes are managed by libraries. We
just display a Thank You screen after the order is placed. Because our program has numerous
screens, we will discuss each screen's workflow as well as the packages that are included in order
to explain the code.

5.3 Home Screen:

As our Home screen has following categories Monitors, Moues, and Mobile Phones. Every
product is associated with a specific category. We have made a dart file name as Home.dart. In
this file our main home categories are managed. Then we make a file name as product_list. In
this file we make a class ProductModel.

In this class we are managing our all products, categories as well as cart. We are managing all
the stuff in a single file in order to reduce no of files and optimization of code. In this class we

17
Dept. of CSE
make a method for each functionality. In this class we make get purse function in order to get all
products in a purse. We make get shoe ad get shirts as well in a same logic.

We added loops for every category where are the products in a category are managed. If a
category has 10 numbers of products, then loop move 10 time in order to show all the products
for a specific category.

As we use provider patterns for this application, so the main class extends change notifier. By
using this provider pattern listen about the list that are prepared in this class. When any change
occur in this class then it will notify to provider about change. Basically, this is the best thing in
providers for managing data in application.

InitState Code:

@override
voidinitState() {
AppProviderappProvider=Provider.of<AppProvider>(context,listen:false);
appProvider.getUserInfoFirebase();
getCategoryList();

18
Dept. of CSE
 super.initState();
}

In our application we are using init function. Init function we are calling our ProductModel class.
Everything is prepared before running. Let’s suppose 24 you open an application. You can see
only 1 category products by default. When we click on other category notifier note the change
and send to the listener that is call in init() function. Then home screen data index is updated and
across index specific category products are call and display in a home screen.

SingleChildScrollView(
scrollDirection:Axis.horizontal,
child:Row(
children: categoriesList.map(
(networkImage) {
returnPadding(
padding:
constEdgeInsets.only(left:10,top:5),
child:CupertinoButton(
padding:EdgeInsets.zero,
onPressed: () {
Routes.instance.push(
context:context,
widget:CategoryView(
categoryModel:networkImage,
),
);
},
child:Card(
color:Colors.white,
elevation:3,
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(12),
),
child:SizedBox(
height:60,
width:60,
child:Padding(
padding:constEdgeInsets.all(5.0),
child:Image.network(
networkImage.image,
),
),
),
),
),
);
},

19
Dept. of CSE
 ).toList(),
),
),

5.4Login-Signup Screen:
In login and registration page we are using stateful widget. In Stateful widget we call its state. In
Its state we are using scaffold widget. Scaffold is a layout of our whole screen which gives us
many things like App Bar, Body and many more. We are using column widget to align in
vertically direction. In column we have a children. In Children we are using text fields. One for
email and other for password.

voidmain() async {
WidgetsFlutterBinding.ensureInitialized();
awaitFirebase.initializeApp(
options:DefaultFirebaseOptions.currentPlatform,
);
runApp(MyApp());
}

20
Dept. of CSE
We have used signInWithEmailAndPassword and for the registration we have used
createUserWithEmailAndPassword API’s.

When a user enters email and password. A query is generated which checks weather registered
on firebase database or not. If credential are match it return a true and we redirect it into the
screen where they enter detail.

When a user login to their account, we save its email and give it to unique key. When they press
logout, its key will be removed and when they try to login again we will give them a new key
again. In this way we authenticate our user.

We are managing session as well when a login to their account session start and when user
logout an application it will be over.

firebase_core:^2.24.2
firebase_auth:^4.15.3

21
Dept. of CSE
These packages are used in application to perform login and registration. Firebase core provide
us an access to the flutter database. Firebase core also allow us to perform initialization actions.
On the other hand, Firebase auth allow us to authenticate user when they perform registration or
Login. By using these packages, we can use firebase APIs for login or registration.

5.5Add to Cart Screen:

In Add to cart screen we are using stateful widget. In Stateful widget we call its state. In Its state
we are using scaffold widget. Scaffold is a layout of our whole screen which gives us many
things like App Bar, Body and many more. We are using column widget to align in vertically
direction. In column we have a children. In Children we are using list view. In list view widget
all the selected items are arranged.

addCartProduct();

Session check also included in add to cart functionality. If a user login to their account, then its
session started then they will purchase product by using add to cart functionality. It is very good
practice to use session in purchasing points to authenticate user.

Cart Model:

//// CART ////

List<ProductModel> _cartProductList = [];
List<ProductModel> _buyProductList = [];

UserModel? _userModel;

UserModelget getUserInformation => _userModel!;

voidaddCartProduct(ProductModelproductModel) {
_cartProductList.add(productModel);
notifyListeners();
}

voidremoveCartProduct(ProductModelproductModel) {
_cartProductList.remove(productModel);
notifyListeners();
}

List<ProductModel>get getCartProductList => _cartProductList;

We are fetching a data in our list view which index marked as true. In every item in list view, we
are making edit and delete button. Below list view we are using elevation button to proceed to
checkout. Elevation button has a on tap functionality. We set checkout page path in on tap
functionality.

22
Dept. of CSE
Figma allows designers to create and share design libraries, making it easy to maintain
consistency across different projects. Libraries store reusable assets, styles, and components for
efficient design workflows.

5.6Add to Favourite Screen:

Creating a Favorites screen in Flutter involves designing a user interface to display a list of
favorite items, handling user interactions, and persisting the state of favorites.

import'package:ecommerce_app/providers/app_provider.dart';
import'package:ecommerce_app/screens/single_fav_item.dart';
import'package:flutter/material.dart';
import'package:provider/provider.dart';

classFavouriteScreenextendsStatelessWidget {
constFavouriteScreen({super.key});

@override
Widgetbuild(BuildContextcontext) {
AppProviderappProvider=Provider.of<AppProvider>(context);
returnScaffold(
appBar:AppBar(
title:Text(
'Favourites',
style:TextStyle(color:Colors.black),
),
),
body:appProvider.getFavProductList.isEmpty
?Center(
child:Text('No Products'),
)
:ListView.builder(
padding:EdgeInsets.all(12),
itemCount:appProvider.getFavProductList.length,
itemBuilder: (context,index) {
returnSingleFavItem(
singleProduct:appProvider.getFavProductList[index],
);
},
),
);
}
}

Favourites Function:

23
Dept. of CSE
//// FAVOURITE ////
List<ProductModel> _favProductList = [];

voidaddFavProduct(ProductModelproductModel) {
_favProductList.add(productModel);
notifyListeners();
}

voidremoveFavProduct(ProductModelproductModel) {
_favProductList.remove(productModel);
notifyListeners();
}

List<ProductModel>get getFavProductList => _favProductList;

Favourite Button:

Chapter 6
24
Dept. of CSE
 DISSCUSSION

Developing an eCommerce app with Flutter offers several advantages. Flutter, a UI toolkit by
Google, enables cross-platform development, reducing development time and costs. Its hot reload
feature allows real-time code changes, enhancing productivity. Flutter's widget-based architecture
ensures a consistent user experience across platforms.

For an eCommerce app, Flutter's rich widget library can create visually appealing product
displays and intuitive shopping interfaces. Integration with backend services, payment gateways,
and APIs is seamless. Dart, Flutter's programming language, supports asynchronous
programming, essential for handling real-time updates, notifications, and managing user
interactions.

While Flutter simplifies development, it's crucial to consider backend infrastructure, security, and
scalability for a robust and successful eCommerce app.

25
Dept. of CSE
Chapter 7

FURTHER DEVELOPMENT

To further develop an eCommerce app using Flutter, you can focus on enhancing various aspects
of the application to improve user experience, functionality, and overall performance. Here are
some suggestions for further development:

1. User Authentication and Authorization:

 Implement secure user authentication using Firebase Authentication or other
authentication services.
 Set up user roles and permissions to control access to certain features or sections
of the app.

2. Product Management:
 Allow users to add, edit, and delete products.
 Implement product categorization and filtering for easier navigation.
 Integrate a product search feature.

3. Shopping Cart:
 Improve the shopping cart functionality, allowing users to easily add and remove
items.
 Implement a feature to save the shopping cart for later or create multiple carts.
 Show a summary of the cart on different screens.

4. Payment Integration:
 Integrate popular payment gateways like Stripe, PayPal, or Square for secure and
convenient transactions.
 Ensure compliance with PCI-DSS standards for handling payment information
securely.

26
Dept. of CSE
5. Order Management:
 Provide users with order tracking and history.
 Allow users to cancel or modify orders before they are processed.
 Send order confirmation emails or notifications.

6. User Reviews and Ratings:

 Implement a system for users to leave reviews and ratings for products.
 Display average ratings and reviews on product pages.

7. User Profile:
 Allow users to create and manage their profiles.
 Provide an option to save favorite products or create a wishlist.

8. Localization and Internationalization:

 Support multiple languages and currencies to make the app accessible to a global
audience.

9. Performance Optimization:
 Optimize the app's performance by reducing load times and optimizing image
assets.
 Implement lazy loading for product images and data.

10. Offline Support:

 Enable offline support so that users can browse products and view their cart even
without an internet connection.
 Implement synchronization when the connection is restored.

11. Security:
 Regularly update dependencies and libraries to ensure the latest security patches.

27
Dept. of CSE
  Implement secure communication protocols (HTTPS) for data transfer.

12. Analytics and Monitoring:

 Integrate analytics tools (e.g., Google Analytics) to track user behavior and gain
insights into app performance.
 Set up error monitoring to identify and fix issues proactively.

13. Social Media Integration:

 Allow users to share products on social media platforms.
 Integrate social media logins for a seamless registration process.

14. Responsive Design:

 Ensure that the app is responsive and works well on various screen sizes,
including smartphones and tablets.

Remember to thoroughly test your app on different devices and scenarios to ensure a smooth
user experience. Additionally, staying updated with the latest Flutter and Dart releases and
community packages can also contribute to the ongoing improvement of your eCommerce app.

28
Dept. of CSE
 Chapter 8
CONCLUSION

In conclusion, developing an eCommerce app with Flutter offers a versatile and efficient
framework for creating cross-platform applications with a single codebase. Flutter provides a
range of benefits that contribute to the success of an eCommerce project. Here's a summary:

1. Cross-Platform Development:

 Flutter allows you to build for both iOS and Android platforms using a single
codebase, reducing development time and costs.

2. Hot Reload:

 The hot reload feature in Flutter enables developers to instantly see the impact of
code changes, making the development process faster and more iterative.

3. Rich UI and Customization:

 Flutter offers a rich set of pre-designed widgets and allows for extensive
customization, facilitating the creation of visually appealing and brand-specific
user interfaces.

4. Performance:

 Flutter apps are compiled to native ARM code, providing near-native

performance. The framework's architecture helps in creating smooth and
responsive user experiences.

29
Dept. of CSE
‍

30
Dept. of CSE