Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
25 views41 pages

Janvi Internship2

Download as docx, pdf, or txt
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 41

Acknowledgement

It is our pleasure to present this project of “Gym Management System”.


At this moment, first of all we would like to thank the respected Head of
the Department of our Computer Department Ms. Megha Jogiya who
gave us more detail on project.We are also thankful to our guide Ms.
(Joyti Tamankar) and many more things are guided to our project.And
finally, our sincere thanks to my batch-mate, who had provided us with innumerable
discussions on many technical litiesand friendly tips.Without his cordialand friendly support , this activity
might be much tougher.
We are also thankful to our Parents , Friends and Others for their opinions and
support in the system.

GPG(I I
Abstract

ONLINE GYM MANAGEMENT SYSTEM ABSTRACT . The project titled as “Online Gym
Management System” is develop using front end as PHP and back end MYSQL tool.

Gyms are become the essential part of our lives and providing best exercise. In this web application
admin can manage the customer an easier and more convenient way. This project also maintains the
Customer details, to provide the valuable reports regarding progress of the gym member. Admin can
login with their username and password. Admin can add and update Trainer details and work out details.
Customer will register and login with their username and password.Customer can view exercise and work
out timing details etc.

The system has the capability of suggesting the best workout schedules that suit to the members while
keeping the harm full workouts away depending on the members’ physical condition. The system also
capable of notifying the delayed payments and pending services of exercise machines. High level of
customization is embedded in to the system where administrator can control the access and appearance of
the system. System is developed as a web based application, so the accessibility is high around the world.

GPG(IT) II
List of Figures
Figure 4.1: Archiectural Diagram......................................................................................................7

Figure 5.1: Data Flow Diagram........................................................................................................10

Figure 5.2: Signup Dart.....................................................................................................................20

Figure 5.3: Login Dart.......................................................................................................................29

Figure 5.4: All products view............................................................................................................30

Figure 5.5 Collection View.................................................................................................................30

Figure 5.6 My fashion App View......................................................................................................31

Figure 5.7 Transaction View.............................................................................................................31

GPG(IT) III
List of

Table 3. 1: Internship Plan....................................................................................................6

GPG(I I
Table of

Acknowledgement......................................................................................................................I
Abstract......................................................................................................................................II
List of figure….............................................................................................................................III
List of Table….............................................................................................................................IV
Table of Contents.......................................................................................................................V

Chapter 1: Introduction................................................................................................................1
1.1 Internship Summary...........................................................................................................1
1.2 Purpose...............................................................................................................................2
1.3 Scope..................................................................................................................................2
Chapter 2: Details of Technology / Platform...............................................................................3
2.1 Details of Technology........................................................................................................3
2.2 Details of Platform.............................................................................................................5
Chapter 3: Project Management...................................................................................................6
3.1 Internship Plan....................................................................................................................6
Chapter 4: System Design............................................................................................................7
4.1 Widgets...............................................................................................................................7
4.2 Google Firebase..................................................................................................................8
4.3 Training Firebase Hosting..................................................................................................9
Chapter 5: Implementation.........................................................................................................10
Chapter 6: Conclusion................................................................................................................32
References..................................................................................................................................33

GPG(I V
2161503160 Flutter App Using Andriod

Chapter 1: Introduction
1.1 Internship Summary

Flutter is an extremely trending framework from Google that was released only in 2017. And
today, Flutter has become the most popular cross-platform mobile framework, according to a
2021 developer survey from Statista. Based on this survey, a stunning 42 percent of software
developers worldwide used Flutter. Flutter allows you to build beautiful native mobile apps
for both iOS and Android with only one programming language - Dart.

That means that you, as a developer do not need to learn Swift/Objective-C and Kotlin/Java in
order to write apps for iOS and Android, but instead, use the revolutionizing framework from
Google and learn only one language - Dart and create stunning apps for both platforms.

The "Online E-commerce Application" has been developed to override the problems usual in the
practicing manual Application. This software is supported to eliminate and in some cases reduce
the hardships faced by this existing Application. Moreover this Application is designed for the
particular need of the company to carry out operations in a smooth and effective manner.

Dart platform Flutter apps are written in the Dart language and make use of many of the language's more
advanced features. On Windows, macOS and Linux via the semi-official Flutter Desktop Embedding
project, Flutter runs in the Dart virtual machine which features a just-intime execution engine. While
writing and debugging an app, Flutter uses Just In Time compilation, allowing for "hot reload", with
which modifications to source files can be injected into a running application. Flutter extends this with
support for stateful hot reload, where in most cases changes to source code can be reflected immediately
in the running app without requiring a restart or any loss of state.This feature as implemented in Flutter
has received widespread praise. Release versions of Flutter apps are compiled with ahead-of-time (AOT)
compilation on both Android and iOS, making Flutter's high performance on mobile devices possible.

Flutter engine Flutter's engine, written primarily in C++, provides low-level rendering support using
Google's Skia graphics library. Additionally, it interfaces with platformspecific SDKs such as those
provided by Android and iOS.The Flutter Engine is a portable runtime for hosting Flutter applications. It
implements Flutter's core libraries, including animation and graphics, file and network I/O, accessibility
support, plugin architecture, and a Dart runtime and compile toolchain. Most developers will interact with
Flutter via the Flutter Framework, which provides a modern, reactive framework, and a rich set of
platform, layout and foundation widgets. Foundation library The Foundation library, written in Dart,
provides basic classes and functions which are used to construct applications using Flutter, such as APIs
to communicate with the engine.

Widgets UI design in Flutter involves using composition to assemble / create "Widgets" from other
Widgets. The trick to understanding this is to realise that any tree of components (Widgets) that is
assembled under a single build() method is also referred to as a single Widget. This is because those
smaller Widgets are also made up of even smaller Widgets, and each has a build() method of its own.

This is how Flutter makes use of Composition. The docs say: " A widget is an immutable description of
part of a user interface." A human being will tell you it's a Blueprint, which is a much easier way to think
about it. However, one also needs to keep in mind there are many types of Widgets in Flutter, and you
cannot see or touch all of them. Text is a Widget, but so is it’s TextStyle, which defines things like size,
colour, font family and weight. There are Widgets that represent things, ones that represent
characteristics (like TextStyle) and even others that do things, like FutureBuilder and StreamBuilder.

GPG(I 1
2161503160 Flutter App Using Andriod

1.2 Purpose

The purpose of this project is to provide a comprehensive understanding of mobile app


development using the Flutter & Dart programming language. Flutter's unique approach of using
a reactive framework allows for fast and smooth rendering of user interfaces. With its built-in
widgets and rendering engine, Flutter enables developers to create visually appealing and highly
responsive applications, resulting in a superior user experience.

1.3 Scope

One area of potential growth for Flutter is desktop and web app development. With the release
of Flutter for the web, the framework has become a versatile tool for developing applications
that need to run on multiple platforms. The course first covers setting up your development
environment. You will learn how to use the free code editor Visual Studio Code to write a
Flutter application. a Then we will learn how to create screens and application logic. You will
learn how to use Firebase and Figma.

GPG(I 2
2161503160 Flutter App Using Andriod

Chapter 2: Details of Technology / Platform


2.1 Details of Technology

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. (Flutter, no date)

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.
(AppDividend, no date)

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.

Flutter outperforms other hybrid solutions in terms of cost. It's one of the many advantages of
flutter. Flutter developers may encrypt app data with both asymmetric and symmetric keys
using the iOS SecKey API and the Common Crypto library. Flutter code is written in Dart,
which has many cryptos and 13 encrypts libraries that employ various cryptographic hashing
and encryption techniques.

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 14 programming language to C++. Dart is a


popular programming language for creating single-page websites and online apps.
(Dart, no date).

 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.

 It is a very similar object-oriented 14 programming language to C++. Dart is a


popular programming language for creating single-page websites and online apps.
(Dart, no date).

GPG(I 3
2161503160 Flutter App Using Andriod

 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.

 Features of Flutter
Flutter framework offers the following features to developers:
 Modern and reactive framework.
 Uses Dart programming language and it is very easy to learn
 Fast development.
 Beautiful and fluid user interfaces.
 Huge widget catalog.
 Runs same UI for multiple platforms.

 Advantages of Flutter
Flutter comes with beautiful and customizable widgets for high performance and
outstanding mobile application. It fulfills all the custom needs and requirements. Besides these,
Flutter offers many more advantages as mentioned below:
 Dart has a large repository of software packages which lets you to extend the capabilities of
your application.
 Developers need to write just a single code base for both applications (both Android and iOS
platforms). Flutter may to be extended to other platform as well in the future.
 Flutter needs lesser testing. Because of its single code base, it is sufficient if we write
automated tests once for both the platforms.
 Flutter’s simplicity makes it a good candidate for fast development. Its customization
capability and extendibility makes it even more powerful.
 With Flutter, developers has full control over the widgets and its layout.
 Flutter offers great developer tools, with amazing hot reload.

 Disadvantages of Flutter
Despite its many advantages, flutter has the following drawbacks in it:
 Since it is coded in Dart language, a developer needs to learn new language (though it is easy
to learn).
 Modern framework tries to separate logic and UI as much as possible but, in Flutter, user
interface and logic is intermixed. We can overcome this using smart coding and using high level
module to separate user interface and logic.
.
 Flutter is yet another framework to create mobile application. Developers are having a hard
time in choosing the right development tools in hugely populated segment.

GPG(I 4
2161503160 Flutter App Using Andriod

2.2 Details of Platform

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,
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, no date)

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.

Android Studio is the official integrated development environment (IDE) for Google Android
Operating system, built on JetBrains' Intellij IDEA software and designed specifically for
Android Development. Android Studio was announced on May 16, 2013 at the Google. It
supports application development within the Android operating system, Android Studio uses a
Gradle-based build system, emulator, code templates, and Github integration. Every project in
Android Studio has one or more modalities with source code and resource files. These
modalities include Android app modules, Library modules, and Google App Engine modules
which is very helpful for us.

 Features:

 A flexible Gradle-based build system.


 A fast and feature-rich emulator
 A unified environment where you can develop for all Android devices.
 Live Edit to update composables in emulators and physical devices in real time.
 Code templates and GitHub integration to help you build common app features
and import sample code.

GPG(I 5
2161503160 Flutter App Using Andriod

Chapter 3: Project Management

In this section, we outline the strategic project plan that guided the development and execution
of our mobile app development. A well-structured project plan is essential for effectively
managing tasks, tracking progress, and achieving milestones in a systematic manner.

3.1 Internship Plan

Date Work
27-/7/2023 Introduction to flutter basics and installation
31/7/2023 Dart language
1-2/8/2023 Structure off flutter app and layout
4/8/2023 First hello world app
7/8/2023 Add icon to the app, navigation
8/8/2023 to Widgets
11/8/2023
14/8/2023 state management
17/8/2023 Login dart
18/8/2023 Signup dart
21/8/2023 Fashion app view dart
22/8/2023 Order confirmation dart
23/8/2023 Money transaction dart
24/8/2023 Rest API
25/8/2023 Unit testing and http testing
28/8/2023 Push app to AppStore and Google Play market
31/8/2023 Git and GitHub
2/8/2023 Fashion App

Table 3. 2: Internship Plan

GPG(I 6
2161503160 Flutter App Using Andriod

Chapter 4: System Design


4.1 Widgets
Widgets UI design in Flutter involves using composition to assemble / create "Widgets" from
other Widgets. The trick to understanding this is to realise that any tree of components
(Widgets) that is assembled under a single build() method is also referred to as a single
Widget. This is because those smaller Widgets are also made up of even smaller Widgets, and
each has a build() method of its own. This is how Flutter makes use of Composition. The
docs say: " A widget is an immutable description of part of a user interface." A human being
will tell you it's a Blueprint, which is a much easier way to think about it. However, one also
needs to keep in mind there are many types of Widgets in Flutter, and you cannot see or
touch all of them. Text is a Widget, but so is it’s TextStyle, which defines things like size,
colour, font family and weight. There are Widgets that represent things, ones that represent
characteristics (like TextStyle) and even others that do things, like FutureBuilder and
StreamBuilder.

Wigets Architecture

Figure 4.1: Represents the architecture diagram for our app.

GPG(I 7
2161503160 Flutter App Using Andriod
Platform specific widgets

Flutter has widgets specific to a particular platform - Android or iOS.


Android specific widgets are designed in accordance with Material design guideline byAndroid
OS. Android specific widgets are called as Material widgets. iOS specific widgets are designed
in accordance with Human Interface Guidelines by Appleand they are called as Cupertino
widgets.
Some of the most used material widgets are as follows:
• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• TextField
• Checkbox
• Radio
• Switch
• Slider
• Date & Time Pickers
• SimpleDialog
• AlertDialog

4.2 Google Firebase

Assessing Model Performance

Firebase's first product was the Firebase Real-time Database, an API that synchronizes
application data across iOS, Android, and Web devices, and stores it on Firebase's cloud. The
product assists software developers in building real-time, collaborative applications. In May
2012, a month after the beta launch, Firebase raised $1.1 million in seed funding from
venture capitalists Flybridge Capital Partners, Greylock Partners, Founder Collective, and
New Enterprise Associates. In June 2013, the company further raised $5.6 million in Series A
funding from Union Square Ventures and Flybridge Capital Partners. In 2014, Firebase
launched two products. Firebase Hosting and Firebase Authentication. This positioned the
company as a mobile backend as a service. In October 2014, Firebase was acquired by
Google. A year later, in October 2015, Google acquired Divshot, an HTML5 web-hosting
platform, to merge it with the Firebase team.

GPG(I 8
2161503160 Flutter App Using Andriod
Firebase Realtime Database

Firebase provides a real-time database and back-end as a service. The service provides
application developers an API that allows application data to be synchronized across clients
and stored on Firebase's cloud. The company provides client libraries that enable integration
with Android, iOS, JavaScript, Java, ObjectiveC, Swift and Node.js applications. The database
is also accessible through a REST API and bindings for several Java Script frame works such
as Angular JS, React, Ember.js and Backbone.js. The REST API uses the Server-Sent Events
protocol, which is an API for creating HTTP connections for receiving push notifications from
a server. Developers using the realtime database can secure their data by using the company's
server-side-enforced security rules.

4.3 Training Firebase Hosting

Firebase Hosting is a static and dynamic web hosting service that launched on May 13, 2014.
It supports hosting static files such as CSS, HTML, JavaScript and other files, as well as
support through Cloud Functions. The service delivers files over a content delivery network
(CDN) through HTTP Secure (HTTPS) and Secure Sockets Layer encryption (SSL). Firebase
partners with Fastly, a CDN, to provide the CDN backing Firebase Hosting. The company
states that Firebase Hosting grew out of customer requests; developers were using Firebase
for its real-time database but needed a place to host their content The process of creating our
custom dataset involved combining facial image data from various sources. Data selection,
cleaning, and curation were meticulously executed to ensure uniformity and reliability. By
creating a consolidated dataset, we aimed to tackle the variations and data quality concerns
observed in the individual datasets.

4.4 Crypto Transactions

Crypto currencies has become a widely used international mode of currency in the recent
years we decided to include the mode of buying and selling goods using crypto currency, and
we also plan to include the exchange of crypto transactions in our app. So, this app becomes
an all-in-one app for the consumer

GPG(I 9
2161503160 Flutter App Using Andriod

Chapter 5: Implementation

In this chapter, we delve into the practical implementation of our project. Building upon the
groundwork laid in the preceding chapters, we transition from the conceptual framework to the
tangible execution of our project, "Fashion app". This chapter provides a hands-on account of
how we designed, configured, and integrated the necessary components to make our application.

 Activity Diagram

1. Data Flow Diagram

Figure 5.1 : Data flow diagram

GPG(I 1
2161503160 Flutter App Using Andriod

2. Registration Page

 A signup page (also known as a registration page) enables users and organizations to
independently register and gain access to your system. It is common to have multiple
signup pages depending on the types of people and organizations you want to register.

CODE

 Main.Dart

import 'package:flutter/material.dart';
import 'package:my_fashion_app/screens/product_list_screen.dart';
import 'package:device_preview/device_preview.dart';
import 'package:my_fashion_app/firebase/login.dart';

void main() =>


runApp( DevicePrevie
w( enabled: true,
builder: (context) => MyApp(),
),
);

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
useInheritedMediaQuery: true,
locale: DevicePreview.locale(context),
builder: DevicePreview.appBuilder,
title: 'My Fashion App',
debugShowCheckedModeBanner: false,
home: MainScreen(),
);
}
}

class MainScreen extends StatefulWidget {


const MainScreen({Key? key}) : super(key: key);

@override
_MainScreen createState() => _MainScreen();
}

class _MainScreen extends


State<MainScreen> with
SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<Offset>
_buttonOffsetAnimation; late
Animation<Offset> _textOffsetAnimation;

GPG(I 1
2161503160 Flutter App Using Andriod
bool _isTextAnimated = false;

GPG(I 1
2161503160 Flutter App Using Andriod
@override
void initState() {
super.initState();

_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 1));

_buttonOffsetAnimation =
Tween<Offset>(begin: Offset(0, 1), end: Offset.zero).animate(
CurvedAnimation(parent: _animationController, curve: Curves.ease));

_textOffsetAnimation = Tween<Offset>(begin: Offset(0, 1), end: Offset.zero)


.animate(
CurvedAnimation(parent: _animationController, curve: Curves.ease));

_animationController.addListener(() {
if (_animationController.status == AnimationStatus.completed) {
setState(() {
_isTextAnimated = true;
});
}
});

_animationController.forward();
}

@override
void dispose() {
// Dispose the animation controller
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/back.png'),
fit: BoxFit.cover,
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SlideTransition(
position: _textOffsetAnimation,

child: Padding(

GPG(I 1
2161503160 Flutter App Using Andriod
padding: EdgeInsets.only(left:
30.0), child: Text(
'Brands and New Styles',
textAlign:
TextAlign.left, style:
TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 40,
fontWeight: FontWeight.bold,
fontFamily: 'arimo',
),
),
),
),
SizedBox(height: 50),
SlideTransition(
position: _textOffsetAnimation,
child: Text(
"Let's start to browse and purchase the latest fashion brands and styles.",
textAlign: TextAlign.center,
style: TextStyle(
color: _isTextAnimated
? Color.fromARGB(255, 255, 255, 255)
: Color.fromARGB(255, 255, 255, 255),
fontSize: 20,
fontFamily: 'arial',
),
),
),
SizedBox(height: 30),
SlideTransition(
position: _buttonOffsetAnimation,
child: ElevatedButton(
onPressed: () {
Navigator.push( cont
ext,
MaterialPageRoute(
builder: (context) => ProductListScreen()),
);
},
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 255, 255,
255), onPrimary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side: BorderSide(color: Color.fromARGB(255, 0, 0, 0)),
),
Padding:
EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0),
textStyle: TextStyle(fontSize: 20.0),
minimumSize: Size(300.0, 60.0),
),
child: Text(
GPG(I 1
2161503160 Flutter App Using Andriod
'Get
Start', style: TextStyle(
color: Color.fromARGB(255, 0, 0,
0), fontWeight: FontWeight.normal,
fontSize: 22,
fontFamily: 'arial'),
),
),
),
SizedBox(height: 20),
SlideTransition(
position: _buttonOffsetAnimation,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => LoginPage()),
);
},
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(0, 255, 255, 255),
onPrimary: Color.fromARGB(255, 255, 255,
255), shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side:
BorderSide(color: Color.fromARGB(255, 255, 255, 255)),
),
padding:
EdgeInsets.symmetric(vertical: 16.0, horizontal: 32.0),
textStyle: TextStyle(fontSize: 20.0),
minimumSize: Size(300.0, 60.0),
),
child: Text(
'Login',
style: TextStyle(
color: Color.fromARGB(255, 255, 255,
255), fontWeight: FontWeight.normal,
fontSize: 22,
fontFamily: 'arial'),
),
),
),

SizedBox(height: 20),
],
),
),
),
);
}
}

GPG(I 1
2161503160 Flutter App Using Andriod

 Signup.Dart

import
'package:flutter/gestures.dart'; import
'package:flutter/material.dart'; import
'login.dart';

class Signup extends StatefulWidget {


@override
_SignupState createState() => _SignupState();
}

class _SignupState extends State<Signup> {


final _formKey =
GlobalKey<FormState>(); String _email =
'';
String _password = '';
String _confirmPassword = '';
bool _obscureText = true;
bool _obscureTextt = true;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/backkk.png'),
fit: BoxFit.cover,
),
),
child: Center(
child: Container(
padding: EdgeInsets.all(16.0),
constraints: BoxConstraints(
maxWidth: 600.0,
maxHeight: MediaQuery.of(context).size.height,
),
child: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Form(
key: _formKey,

child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox( c
hild: Text(
'Create Account',
style: TextStyle(
color: Color.fromARGB(255, 255, 255,
255), fontWeight: FontWeight.bold,

GPG(I 1
2161503160 Flutter App Using Andriod
fontFamily: 'times new
roman', fontSize: 30),

GPG(I 1
2161503160 Flutter App Using Andriod
),
),
SizedBox(height: 40.0),
TextFormField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.email,
color: Colors.white,
),
labelText: 'Email',
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
),
style: TextStyle(
color: Colors.white,
),
onChanged: (value)
{ setState(() {
_email = value;
});
},
cursorColor: Colors.white,
),
SizedBox(height: 16.0),
TextFormField(

decoration: InputDecoration(
labelText:
'Password',
labelStyle: TextStyle(
color: Colors.white,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: OutlineInputBorder(

GPG(I 1
2161503160 Flutter App Using Andriod
borderRadius: BorderRadius.circular(25.0),

GPG(I 1
2161503160 Flutter App Using Andriod
borderSide: BorderSide(
color: Colors.white,
),
),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
suffixIcon: IconButton(
icon: Icon(
_obscureText
? Icons.visibility_off
: Icons.visibility,
color: Colors.white,
),
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
),
),
obscureText: _obscureText,
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
),
cursorColor: Color.fromARGB(255, 255, 255,
255), onChanged: (value) {
setState(() {
_password = value;
});
},
),
SizedBox(height: 16.0),
TextFormField(

decoration: InputDecoration(
labelText: 'Confirm
password', labelStyle:
TextStyle(
color: Colors.white,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
GPG(I 2
2161503160 Flutter App Using Andriod
),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
suffixIcon: IconButton(
icon: Icon(
_obscureTextt
? Icons.visibility_off
: Icons.visibility,
color: Colors.white,
),
onPressed: () {
setState(() {
_obscureTextt = !_obscureTextt;
});
},
),
),
obscureText: _obscureTextt,
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
),
cursorColor: Color.fromARGB(255, 255, 255,
255), onChanged: (value) {
setState(() {
_confirmPassword = value;
});
},
),
SizedBox(height: 40.0),
ElevatedButton(
style: ElevatedButton.styleFrom(

primary: Color.fromARGB(255, 87, 7, 7),


shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 120.0,
),
),
child: Text(
'Sign Up',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'Arimo'),
),
onPressed: () {

GPG(I 2
2161503160 Flutter App Using Andriod
if (_formKey.currentState!.validate()) {
if (_email.isNotEmpty &&
_password.isNotEmpty &&
_confirmPassword.isNotEmpty) {
// All form fields are valid and non-empty. Show alert.
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Sign up
successfully'), actions: [
TextButton(
child: Text('OK'),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
LoginPage()),
);
},
),
],
);
},
);
} else {
// Some form fields are empty. Show snackbar.
ScaffoldMessenger.of(context).showSnackBar(

SnackBar(
content: Text('All fields are required'),
),
);
}
}
},
),
SizedBox(height: 30),
Center(
child: RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Already have an account? ',
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
fontSize: 16.0,
),
children: <TextSpan>[
TextSpan(
text: ' Log in',
style: TextStyle(

GPG(I 2
2161503160 Flutter App Using Andriod
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 87, 7, 7),
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.pushReplacement( contex
t,
MaterialPageRoute(
builder: (context) => LoginPage()),
);
},
),
],
),
),
),
],
),
),
),
),
),
),
);
}
}

OUTPUT

Fig

Figure 5.2: sign up dart

GPG(I 2
2161503160 Flutter App Using Andriod

3. Login Page

 First we will fetch saved {email,password}-(from ingerprint/saved)if exist and get


userdetails before going to homepage. in the backend side, first we will check if email
exist if does check password by converting it to hash and then match with password in db
then all this works then will send back token/expiry and this will be stored in flutter local
storage the next home page will be called login .

 CODE

Loging.dart

import 'package:flutter/material.dart';
import 'package:my_fashion_app/main.dart';
import 'package:flutter/gestures.dart';
import 'package:my_fashion_app/screens/product_list_screen.dart';
import 'signup.dart';

class LoginPage extends StatefulWidget {


@override
_LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage>


{ final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final String _email = 'mostafa.hassan@msa.edu.eg';
final String _password = '1234';
bool _obscureText = true;

@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/backc.png'),
fit: BoxFit.cover,
),

GPG(I 2
2161503160 Flutter App Using Andriod
),

child: Center(
child: Container(
padding: EdgeInsets.all(16.0),
constraints: BoxConstraints(
maxWidth: 600.0,
maxHeight: MediaQuery.of(context).size.height,
),
child: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox( c
hild: Text(
'Login',
style: TextStyle(
color: Color.fromARGB(255, 255, 255,
255), fontWeight: FontWeight.bold,
fontFamily: 'times new
roman', fontSize: 30),

),
),

SizedBox(height: 40.0),
SizedBox( he
ight: 20.0,
child: Text(
'Welcome back! its good to see you
again', style: TextStyle(
color: Color.fromARGB(255, 255, 255,
255), fontFamily: 'times new roman',
fontSize: 16),
),
),
SizedBox(height: 40.0),
TextFormField(
controller: _emailController,
decoration:
InputDecoration( prefixIcon:
Icon(
Icons.email,
color: Colors.white,
),
labelText: 'Email',
labelStyle: TextStyle(
color: Colors.white,
),
GPG(I 2
2161503160 Flutter App Using Andriod
border: OutlineInputBorder(

borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
),
style: TextStyle(
color: Colors.white,
),

cursorColor: Colors.white,
)

SizedBox(height: 16.0),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
labelStyle: TextStyle(
color: Colors.white,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,

GPG(I 2
2161503160 Flutter App Using Andriod
),

),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
suffixIcon: IconButton(
icon: Icon(
_obscureText
? Icons.visibility_off
: Icons.visibility,
color: Colors.white,
),
onPressed: () {
setState(() {
_obscureText = !_obscureText;
});
},
),
),
obscureText: _obscureText,
style: TextStyle(

color: Colors.white,
),
cursorColor: Colors.white,
onChanged: (value) {},
),
SizedBox(height: 10.0),
Align(
alignment: Alignment.centerRight,
child: RichText(
text: TextSpan(
text: 'Forgot Password? ',
style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 255, 255, 255),
),
recognizer: TapGestureRecognizer()
..onTap = () {
ScaffoldMessenger.of(context).showSnackBar( Snack
Bar(
content: Text('Forget
Password'), backgroundColor:
Color.fromARGB(255, 94, 255, 0),
),
);
},
),
),

GPG(I 2
2161503160 Flutter App Using Andriod
),

SizedBox(height: 10.0),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 87, 7, 7),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 120.0,
),
),
child: Text(
'Login',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'Arimo'),
),

onPressed: () {
if (_emailController.text == _email &&
_passwordController.text == _password) {
showDialog(
context: context,
builder: (BuildContext context) {

return AlertDialog(
title:
Text('Login in successfully as:' +
_email), actions: [
TextButton(
child: Text('OK'),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
ProductListScreen()),
);
},
),
],
);
},
);
} else {
ScaffoldMessenger.of(context).showSnackBar( Sn
ackBar(
content: Text('Invalid email or password.'),

GPG(I 2
2161503160 Flutter App Using Andriod
backgroundColor: Colors.red,

),
);
}
},
),
SizedBox(height: 20.0),
Divider(
thickness: 2,
color: Colors.white,
),
SizedBox(height: 20.0),
Text(
'Or continue
with', style:
TextStyle( fontSi
ze: 16.0,
color: Color.fromARGB(255, 255, 255, 255),
),
),

SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 2.0,

),
borderRadius: BorderRadius.circular(25.0),
color: Colors.white,
),
child: GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Login With Google
ID'), backgroundColor:
Color.fromARGB(255, 104, 99, 99),
),
);
},
child: Image.asset(
'assets/google.png',
height: 50.0,
width: 50.0,
),
),
),
SizedBox(width: 16.0),
GPG(I 2
2161503160 Flutter App Using Andriod
Container(

decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 2.0,
),
borderRadius: BorderRadius.circular(25.0),
color: Colors.white,
),
child: GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Login With Apple
ID'), backgroundColor:
Color.fromARGB(255, 104, 99, 99),
),
);
},

child: Image.asset(
'assets/apple.png',
height: 50.0,
width: 50.0,
),
),
),
],
),
SizedBox(height: 20.0),

RichText(
text: TextSpan(
text: 'Not a member?
', style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 255, 255, 255),
),
children: [
TextSpan(
text: 'Register
now', style:
TextStyle( fontSize
: 16.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 87, 7, 7),
),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.push( contex
t, MaterialPageRoute(
builder: (context) => Signup()),

GPG(I 3
2161503160 Flutter App Using Andriod
);

},
),
],
),
),
SizedBox(height: 20.0),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Color.fromARGB(255, 87, 7, 7),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
padding: EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 50.0,
),
),

child: Text(
'Go to Home',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'Arimo'),
),
onPressed: () {
Navigator.pushReplacement( cont
ext,
MaterialPageRoute(builder: (context) => MainScreen()),
);
},
),
],
),
),
),
),
),
),
);
}
}

GPG(I 3
2161503160 Flutter App Using Andriod

OUTPUT

Figure 5.3: Login dart

4. Order Page

1. firstly we will add the product to the cart and add that product to the cart. On adding to the
cart we will add this product to flutter secure storage so that we will know that this product is
already added to the cart so we won’t add the product again.After that a request will go to
backend to add the product to the cart.On the backend part we will first see if any unplaced order
is already present for the current user. If any order is present we will add the current product to
that unplaced order.otherwise we will first create an unplaced order and then we will add this
product to that unplaced order.

2. on the cart page firstly we will fetch all the unplaced products of the user from the server. On
the server side we will first see if any unplaced order is present for the current user. If present we
will then fetch all the order-products by that orderid.Again on the frontend after getting these
unplaced products we will fetch the quantity of the order (if available) from the storage. [If a
user changes the quantity of the product then we will initially change this quantity on the
flutter_secure_storage.It is just to make the least no. of requests]. If a user wants to remove the
product from the cart a request will go to the backend. On the backend side we will first get the
unplaced order by orderid and then remove the particular product.

3. On clicking checkout a request will be sent to the backend.On the backend part we will first
get the unplaced order by user id. After getting the order-id we will first change the quantity of
every product and after that we will categories these products according to their shops and create
new orders as per different shops. After placing these orders we will delete the unplace order.

GPG(I 3
2161503160 Flutter App Using Andriod

4. On the store side first the store will get the order status as pending. After clicking on that
order the order will automatically be accepted. After that store has two options either to cancel
the order or to click on ready to pick up. Here if the store clicks on ready to pick up an otp will
be sent to the user. The user then when picking up the order will show the otp to the shopkeeper
and they will confirm the otp by clicking on confirm otp

5. If present we will then fetch all the order products by that orderid.Again on the frontend after
getting these unplaced products we will fetch the quantity of the order (if available) from the
storage. [If a user changes the quantity of the product then we will initially change this quantity
on the flutter_secure_storage.It is just to make the least no. of requests]. If a user wants to
remove the product from the cart a request will go to the backend.

OUTPUT

Figure 5.4: All products view Figure 5.5: Collection view

GPG(I 3
2161503160 Flutter App Using Andriod

Figure 5.6: My fashion app view Figure 5.7: Drawer view

GPG(I 3
2161503160 Flutter App Using Andriod

Chapter 6: Conclusion

In conclusion, Flutter framework does a great job by providing an excellent


framework to build mobile applications in a truly platform independent way. By
providing simplicity in the development process, high performance in the resulting
mobile application, rich and relevant user interface for both Android and iOS
platform, Flutter framework will surely enable a lot of new developers to develop
high performance and feature-full mobile application in the near future.

GPG(I 3
2161503160 Flutter App Using Andriod

References
1. https://www.udemy.com/course/mobile-app-development-with-
flutter/learn/lecture/29684148#content
2. https://en.wikipedia.org/wiki/Flutt-er_(software)

GPG(I 3

You might also like