A PROJECT REPORT

ON

STOCK MARKET FLUTTER APPLICATION

DEVELOPMENT

REPORT SUBMITTED IN PARTIAL FULLFILLMENT OF THE

REQUIREMENTS FOR THE DEGREE OF
BACHELOR OF TECHNOLOGY
IN
ELECTRONICS AND COMMUNICATION ENGINEERING
BY
PRATYUSH GUPTA
(Roll No.: UI17EC16)
GUIDED BY:
Mr. ANKIT ADESARA

ELECTRONICS AND COMMUNICATION ENGINEERING

DEPARTMENT

MAY, 2021
 INDIAN INSTITUTE OF INFORMATION TECHNOLOGY (IIIT),
SURAT – 395007
Indian Institute of Information Technology, Surat
Electronics and Communication Engineering Department

CERTIFICATE

This is to certify that candidate Pratyush Gupta bearing Roll No: UI17EC16 of B.TECH.
IV, 8th Semester has successfully carried out the work on “Stock Market Flutter Application
Development” for the partial fulfilment of the degree of Bachelor of Technology (B.Tech.) in
March, 2021.

Faculty Supervisor: Name: _Mr. Ankit Adesara__ Sign: __________

Examiner 1 Name: ___________________________ Sign: ______________

Examiner 2 Name: ___________________________ Sign: ______________
Examiner 3 Name: ___________________________ Sign: ______________
 (Seal of the Institute)

Declaration
This is to certify that
(i) this report comprises my original work towards the degree of Bachelor of Technology in
Electronics and Communication Engineering at IIIT, SURAT and has not been submitted
elsewhere for a degree.
(ii) due acknowledgement has been made in the text to all other material used.

Signature of Student
(Pratyush Gupta)
 Acknowledgement

First, I would like to thank the Training and Placement Unit of IIIT Surat for successfully
arranging the internship program for us. I would also like to thank Bug Clipper for providing
me with the opportunity to work with them and creating such a wonderful environment for
learning both hard and soft skills.

I am really fortunate to have Mr. Punnet Sharma as my mentor for my internship. His
exemplary guidance, constant encouragement and careful monitoring throughout the internship
are so great that, even my most profound gratitude is not enough.

I would also like to thank Mr. Ankit Adersa, faculty supervisor for guiding me and devoting
his precious time and efforts throughout the internship.

Last but not the least, I would like to thank our honourable director Mr. J.S. Bhatt for providing
all students the opportunity to have an industry-oriented semester and helping the students to
learn the ins and outs of the technology industry.
 Abstract

The primary goal of the project is to bring the stock market (NSE and BSE) on to the smart
phones of an individual.

This project basically deals with developing an e-trading flutter application for a brokers and
trader across India. It provides the user a list of stocks and categories to choose from. A list
view and grid view layout is there to render the data coming from stock market The system
uses a 3-tier approach, with a backend database, middle tier with flutter, and an application for
the customers.

Through this application the user can select any stock whose data they want to see through their
smartphone or laptop. As for e-trading each second is important, so our main concern is on the
persistent connection and clear visualization of data.

In order to develop this application, several technologies are used. All the necessary details and
data are provided in this report.
 Index

Certificate……………………………………………………………………………………2

Declaration……………………………………………………………………………..……3

Acknowledgements………………………………………………………………………….4

Abstract……………………………………………………………………………………...5

Index…………………………………………………………………………………………6

List of figures……………………………………………………………………………......7

List of principal symbols and acronyms……………………………………….....................8

Chapter 1.INTRODUCTION………………………………………………………………..9

Chapter 2.TOOLS AND TECHNOLOGY………………………………………………….10

Chapter 3.ABOUT PROJECT ………………………………………………………………11

Chapter 4.DESIGN…………..………………………………………………………………17

Chapter 5.IMPLEMENTATION…………………………………………………………….21

Chapter 6.WORK PLAN…………………………………………………………………….27

Chapter 7.TESTING………………………………………………………………………….28

Chapter 8.CONCLUSION AND FUTURE WORK…………………………………………29

References……………………………………………………………………………………30
 List of Figures
Figures Page

Figure 1. Use Case Diagram – User……………………………………………………….....17

Figure 2. Use Case Diagram – SignalR Protocol………………………………………….....19

Figure 3. Alert Flow Diagram..…..…………………………………………………….…….20

Figure 4. Sign in Page…………………………………………………………………….….21

Figure 5. Home Page………………………………………………………………………....22

Figure 6. Market Depth Page……………………...………………………………………....23

Figure 7. Alert Page…………………………………………………………..…………...…24

Figure 8. Add Stock Page……………………………………………………..…………...…25

Figure 9. Language Dialog…………………..………………………………………...……..29

Figure 10. Referral Page…………………..…………….…………………………...………30

Figure 11. Ticker Headline Page……………………………………………………...……..33

Figure 12. Ad from Admin Page………..…..………………………………………...……..34

Figure 13. Price Selection Page…………………..…………………………………...……..35

Figure 14. Add stock updated Page…………………..……..………………………...……..36

Figure 15. Message Page…..………………..………………………………………...……..37

Figure 16. Login Page……..………………..………………………………………...……..39

Figure 17. Home Screen with List View Page…………………..…………………....……..30

Figure 18. Home Screen with Grid View.…..………………………………………...……..40

Figure 19. Market Depth Screen……..……..………………………………………...……...41

Figure 20. Add Stock Screen………………..………………………………………...……..41

Figure 21. Alert Screen………….…………………..………………………………...……..42

Figure 22. Edit Stock Screen Page…………………..………………………………...……..42

 List of Principal Symbols and Acronyms

1. ADB – Android Debug Bridge

2. AVD – Android Virtual Device
3. IDE – Integrated Development Environment
4. IT – Information Technology
5. OS – Operating System
6. UI –User Interface
7. UX – User Experience
8. SDK – Software Development Kit
9. VM – Virtual Machine
 Chapter 1
INTRODUCTION

1.1 ABOUT THE COMPANY:

BUGCLIPPER is a technology focused and professionally driven IT service company.
It is situated at Mumbai, Maharashtra.
BUGCLIPPER TECHNOLOGIES PRIVATE LIMITED is a Private incorporated
on 04-09-2014. It is classified as a Non-govt company and is registered at RoC-
Mumbai. Their state of registration is Maharashtra. Its authorized share capital is
500000.00 and its paid-up capital is 103780.00.

1.2 MY ROLE:
I am hired as a Application developer trainee in the month of January. My work is to
develop Flutter application for the clients after analysis of their business and according
to their requirements and provide them with the best possible solution through the
application.

1.3 MY PROJECT:
In the first month of the internship, I was mainly taught about android development in
flutter and practiced the same.

After a month, I worked on a project from one of our clients. The project is to develop
an “e-trading application” for brokers and traders across the India.
 Chapter 2
TOOLS AND TECHNOLOGY

2.1 Operating System:

Windows OS

2.2 Software:

1. Android Studio

2. Visual Studio

3. Android software development kit

4. Android Debug Bridge

5. SDK Manager

6. AVD Manager

7. XCode

8. VS Code

9. Visual Studio for Windows

10. Github

2.3 Android Emulator

2.4 IOS Emulator

2.6 Programming Language:

1. Flutter

2. Dart

3. Java

4. Swift

2.7 Firebase Database

2.8 Firebase Messaging
 Chapter 3
ABOUT THE PROJECT

3.1 MOTIVATION
In India, A majority of Indians don’t know much about e-trading platform or how to invest
money at correct time. Therefore, they avoid investing their money in equity markets.

In fact, out of a population of 1.3 billion, there are only 18 million investors in the equity
market. The main reason behind this fear is the scams which are attached to it, among them
the most popular is the Harshad Mehta Scam of 1992.

Moreover, there are already some existing apps but people are not aware of them, because
of the poor marketing and also the improper visualization of data which we have decided
to overcome through clear visualization of data, with proper graphs and patterns. In this
way people can have better understanding of stock market and can analyze market depth
more accurately.

3.2 PROPOSED SYSTEM

The proposed system is to build an android application for brokers, traders and market
enthusiast. It provides real time stock market data from NSE and BSE without ay delay. Besides
this our main concern is to provide such tools to the user that can help them visualize market
depth easily, through bar graphs, line graphs and pie charts. User can also have any tip and
news related to the market through their smartphone only. Moreover, they can set alert if they
want to get notified on price hike or inflation.

3.3 DRAWBACKS OF EXISTING SYSTEM:

Following are the drawbacks of the existing system:
1. Lack of persistent connection.
2. users’ needs to understand market without any graphs or trends.
3. Much delay noted in getting notification.
4. Consumes a lot of time in analysing market depth and pivot point.
5. Not user-friendly UI and UX wise.
6. No recorded data.
7. Application not available for web and windows.
8. No message on connectivity lost.

3.4 ADVANTAGES OF PROPOSED SYSTEM:

Following are the advantages of the proposed system:

1. Persistent connection with two-layer backup support.

2. Graphs and patterns for better understanding of market depth.
3. User friendly.
4. All the previous data gets recorded.
5. Easy switch between list view and grid view layout without reconnecting.
6. Application available in web, iOS and windows.
7. Proper connectivity check and get message on connectivity lost.
8. Subscription based model with minimum pricing.

3.5 SPECIFIC REQUIREMENTS:

3.5.1 Software Requirements:

i. Functional Requirements: This application needs to be downloaded from the play store.
The application will be available free of cost. To use the application, the user needs to
 register and login to the application. Once logged in to the application all the features
can be accessed.

ii. Data Requirements: For this project, the main data required is the login information as
well as the device IMEI information. Without this information the application cannot
process the API calls.

iii. Performance Requirements: The application should respond fast to user’s interaction.
The application should be scalable so that new features can be added in the future and
hence the application can be expanded. The tolerance rate of the application should be
at a higher level in case of network issues, connectivity issues, and when the application
crashes or stops.

3.5.2 Hardware Requirements:

The application can be installed in any android or iOS device in such a way that it has some
basic software and hardware requirements. It should have the function to access in-built
software; say internet permissions, and potential security issues such as virus or any malware
detection. Moreover, minimum SDK version should be 18 i.e. above android lollypop and
target SDK version should be 30 i.e. android 11. For Web, it supports chrome, Edge and Safari
but doesn’t support Mozilla Firefox.
3.6 TOOLS AND TECHNOLOGY:

3.6.1 Flutter:

Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating
systems such as iOS and Android, while also allowing applications to interface directly with
underlying platform services. The goal is to enable developers to deliver high-performance
apps that feel natural on different platforms, embracing differences where they exist while
sharing as much code as possible.

During development, Flutter apps run in a VM that offers stateful hot reload of changes without
needing a full recompile. For release, Flutter apps are compiled directly to machine code,
whether Intel x64 or ARM instructions, or to JavaScript if targeting the web. The framework
is open source, with a permissive BSD license, and has a thriving ecosystem of third-party
packages that supplement the core library functionality.

Benefits of Flutter

Flutter is a cross-platform development tool. That means software developers can use the same

code base for building an iOS and Android app. Cross-platform development is the best

method for saving time and resources throughout the development process.

Excellent performance

Flutter offers outstanding performance for two reasons. First, is uses Dart, which compiles into

native code. Second, Flutter has its own widgets, so there’s no need to access OEM ones. As a

result, there’s less communication between the app and the platform. These two features of

Flutter ensure fast app startup times and fewer performance issues in general.

Quick development thanks to hot reload

3.6.3 Android Studio IDE:

Android Studio is exclusively designed for developing Android applications. It consists of all
Android SDK tools to design, develop, maintain, test, debug and publish our app. The IDE is
designed very efficiently which makes the developer’s job easy. It also supports the IntelliJ
IDE, the main idea behind this IDE is that it automatically senses the variables, methods,
classes, built-in functions or it could be anything else when we press the first letter of it. After
the completion of project, the whole application could be put as an APK file, in which we can
run that APK file in any device and use the application.

3.6.4 Android Software Development Kit (SDK):

One of the main tools used in developing android applications, as it packages many core
features into one SDK and it can be used in the application easily. This helps us to avoid writing
lot of code, and building applications faster.

3.6.5 Android Debug Bridge (ADB):

Android SDK uses ADB tool as a connection device which allows us to connect the Android
Devices or Emulator with the machine via USB. After developing or while developing
applications, we can connect with the device to check how the application runs. Later, we can
debug and run the applications.

3.6.6 SDK Manager:

It is one of the main tools to maintain the updates of all the installed components required to
run the project. It also notifies us when the project is not compatible with device or any other
compatibility issues and to download any component that is required.

3.6.7 AVD Manager:

It is used to create virtual devices of any desired API level to support higher level SDK’s incase
our device does not support. Using emulators to test the application is difficult as it might be
little slower when compared to real device.

3.6.7 XCode:

Xcode is Apple's integrated development environment (IDE) for macOS, used to develop
software for macOS, iOS, iPadOS, watchOS, and tvOS. It was first released in 2003; the latest
stable release is version 12.5, released on April 26, 2021, and is available via the Mac App
Store free of charge for macOS Big Sur users.[2] Registered developers can download preview
releases and prior versions of the suite through the Apple Developer website.[3] Xcode includes
Command Line Tools (CLT), which enable UNIX-style development via the Terminal app in
macOS.[4] They can also be downloaded and installed without the main IDE.

It is used to create virtual devices of any desired API level to support higher level SDK’s incase
our device does not support. Using emulators to test the application is difficult as it might be
little slower when compared to real device.

3.6.8 VS Code:

Visual Studio Code is a lightweight but powerful source code editor which runs on your
desktop and is available for Windows, macOS and Linux. It comes with built-in support for
JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages
(such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

VS Code also integrates with build and scripting tools to perform common tasks making
everyday workflows faster. VS Code has support for Git so you can work with source control
without leaving the editor including viewing pending changes diffs.

VS Code is an open-source project so you can also contribute to the growing and vibrant
community on GitHub

3.6.8 Visual Studio:

Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It

is used to develop computer programs, as well as websites, web apps, web
services and mobile apps. Visual Studio uses Microsoft software development platforms such
as Windows API, Windows Forms, Windows Presentation Foundation, Windows
Store and Microsoft Silverlight.
Visual Studio includes a code editor supporting IntelliSense (the code
completion component) as well as code refactoring.

Visual Studio supports 36 different programming languages and allows the code editor and
debugger to support (to varying degrees) nearly any programming language, provided a
language-specific service exists. Built-in languages include C,[7] C++, C++/CLI, Visual Basic
.NET, C#, F#,[8] JavaScript, TypeScript, XML, XSLT, HTML, and CSS. Support for other
languages such as Python,[9] Ruby, Node.js, and M among others is available via plug-
ins. Java (and J#) were supported in the past.

3.6.8 Github:

GitHub, Inc. is a provider of Internet hosting for software development and version
control using Git. It offers the distributed version control and source code management (SCM)
functionality of Git, plus its own features. It provides access control and several collaboration
features such as bug tracking, feature requests, task management, continuous
integration and wikis for every project.[4] Headquartered in California, it has been a subsidiary
of Microsoft since 2018.[5]

3.6.8 IOS Simulator:

The Apple iOS Simulator, which ships as part of Xcode, is a tool for developing and
prototyping your mobile app. While the iOS Simulator can be used to test your app’s basic
behaviour, it is severely limited as a testing platform. In order to effectively test your app across
real world scenarios, it is essential to use real mobile devices.

3.6.8 Firebase Database:

Android also supports inbuilt database which is Android SQLite to develop any small
applications and perform any CRUD (Create, Update, and Delete) operations. As it is not
flexible enough to support substantial number of data, for complex applications we are using
other external database.

3.6.9 Firebase Messaging:

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you
reliably send messages at no cost. Using FCM, you can notify a client app that new email or
other data is available to sync. You can send notification messages to drive user re-
engagement and retention. For use cases such as instant messaging, a message can transfer a
payload of up to 4KB to a client app.
 Chapter 4

DESIGN

4.1 USE CASE DIAGRAM:

4.1.1 User:
The given below diagram depicts that a user or a customer performs the following activities
shown. The activities include logging in into the account, registering into the application,
creating watchlists, adding stocks, edit stocks, set alerts.

Register

Login

USER
Watch List

Add Stock

Edit Stock
 Figure 1. Use case diagram –user

4.2 SIGNALR PROTOCOL:

What is SignalR?

ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of adding
real-time web functionality to applications. Real-time web functionality is the ability to have
server code push content to connected clients instantly as it becomes available, rather than
having the server wait for a client to request new data.

SignalR can be used to add any sort of "real-time" web functionality to your ASP.NET
application. While chat is often used as an example, you can do a whole lot more. Any time a
user refreshes a web page to see new data, or the page implements to retrieve new data, it is a
candidate for using SignalR. Examples include dashboards and monitoring applications,
collaborative applications (such as simultaneous editing of documents), job progress updates,
and real-time forms.

SignalR also enables completely new types of web applications that require high frequency
updates from the server, for example, real-time gaming.

SignalR provides a simple API for creating server-to-client remote procedure calls (RPC) that
call JavaScript functions in client browsers (and other client platforms) from server-side
.NET code. SignalR also includes API for connection management (for instance, connect and
disconnect events), and grouping connections.
 Figure 2. SignalR diagram

4.3 AlERT/ NOTIFICATION FLOW DIAGRAM:

The given below diagram illustrates the process where a user can add alert from market depth
by choosing LTP, Buy Price, Sell Price and tag like Greater than, Less than or Equal To .
 Market Depth

Alert Dialog

ALERT
Set Price

Choose Filed

Alert Page

Figure 3. Alert Flow Diagram

 Chapter 5
IMPLEMENTATION

5.1 USER LOGIN:

To use this application, the user must download the application from the play store. The
application requires a Sign in process with username and password if already registered.

If the given mail id is not valid then it displays an error message.

If the password is too short or wrong then it displays an error message.

Figure 4. Sign In page

5.3 HOME PAGE:

After login the user is sent to the home page of the application where they can view a list of
Stocks of a selected watchlists. There is an option to choose view and edit and add stocks.

The home page consists of a drawer to access different features.

There is a search bar provided to the user to search any stock in edit and add stocks page.

Figure 5. Home page

5.4 MARKET DEPTH PAGE:

The market depth page displays all the required information about the Stocks such as buy
quantity, sell quantity, volume, ATP, LTP, and many more data.

It has the option to add Alert and margin.

 Figure 6. Market Depth Page

5.5 ALERT PAGE:

The alert page display all the alerts added for a particular stock.
 Figure 7. Alert Page

5.5 ADD STOCK PAGE:

The add stock page consists of list of all the available stocks, among them the user can select
or deselect the stocks.
 Figure 8. Add Stock Page

5.5 PICTURE IN PIRCTURE SUPPORT:

Android 8.0 (API level 26) allows activities to launch in picture-in-picture (PIP) mode. PIP is
a special type of multi-window mode mostly used for video playback. It lets the user watch a
video in a small window pinned to a corner of the screen while navigating between apps or
browsing content on the main screen.
The PIP window appears in the top-most layer of the screen, in a corner chosen by the
system. You can drag the PIP window to another location. When you tap on the window two
special controls appear: a full-screen toggle (in the center of the window) and a close button
(an "X" in the upper right corner).

Your app controls when the current activity enters PIP mode. Here are some examples:

• An activity can enter PIP mode when the user taps the home or recents button to
choose another app. (This is how Google Maps continues to display directions while
the user runs another activity at the same time.)

5.6 LANGUAGE DIALOG BOX:

1. Language section consists of a dialog box, from which the selected language is passed in
the database.
2. By default, the selected language is English. When user logged in for the first time or until
he/she changed the other language.
3. when user selects the language, suppose Hindi, locale of the application will get changed to
hi, i.e., India and selected language id is passed in database through a language api.
4. Frontend of the language selection feature is shown below
5. Now, data of the stock market will come in the selected language.

English – us
Hindi - hi
 Figure 9. Language Dialog

5.7 REFERRAL SCREEN:

1. Purpose of this feature is to extend the membership of the user if its

subscription/membership gets expired and they want to extend their use period.
2. Through first screen mentioned below, user can share his/her referral code, either by
copying it through clipboard or by sharing it through WhatsApp or any other sharing
application.
3. Recipient user will have to enter this code in “get referral benefit” page to get the referral
benefit.
4. After entering code, user will press the get referral benefit button, on which an api will get
triggered, that will verify whether the entered code is correct or not, or is it has been used
already or not. If the entered code is valid, membership will get extend else error will pop up.
5. In order to achieve this feature, Json Web Token (JWT) is used, it is the unique alpha
numeric string, whose expiration date can be decided by the admin according to the
subscription plan and the JWT Token gets automatically expired after the subscription expiry
date.
6. On receiving the correct referral code, this JWT Token will get activated again for the few
days to provide referral benefit.

What is JSON Web Token?

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-
contained way for securely transmitting information between parties as a JSON object. This
information can be verified and trusted because it is digitally signed. JWTs can be signed
using a secret (with the HMAC algorithm) or a public/private key pair
using RSA or ECDSA.

When should you use JSON Web Tokens?

Authorization: This is the most common scenario for using JWT.

Information Exchange: JSON Web Tokens are a good way of securely transmitting
information between parties.
 Figure10. Referral Page

5.8 WHAT’SAPP LIVE CHAT:

1. User can click on this button and send direct message to the admin, on its WhatsApp but
for the limited number of times.
2. In order to achieve this feature, admin mobile number is fetched from the database and a
WhatsApp link is generated in which we have to append a query string, which includes
sender’s phone number, recipient’s phone number (which will be fixed in our case) and the
encoded message that is to be send.

How to link to WhatsApp from a different app

There are several ways to have your iPhone application interact with WhatsApp:
universal links, custom URL schemes, share extension, and the Document Interaction
API.

Universal links
Universal links are the preferred method of linking to a WhatsApp account.

Use https://wa.me/<number> where the <number> is a full phone number in

international format. Omit any brackets, dashes, plus signs, and leading zeros when
adding the phone number in international format.
Examples:
Use: https://wa.me/15551234567
Don't use: https://wa.me/+001-(555)1234567
Universal links can also include a pre-filled message that will automatically appear in
the text field of a chat.
Use https://wa.me/whatsappphonenumber/?text=urlencodedtext where wh
atsappphonenumber is a full phone number in international format and URL-
encodedtext is the URL-encoded pre-filled message.
Example: https://wa.me/15551234567?text=I'm%20interested%20in%20you
r%20car%20for%20sale
To create a link with just a pre-filled message,
use https://wa.me/?text=urlencodedtext
Example:
https://wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing`

Custom URL Scheme

Opening whatsapp:// URL with one of the following parameters, will open our app
and perform a custom action.
URL Parameters Opens

app - The WhatsApp Messenger application

send New chat composer

 URL Parameters Opens

text If present, this text will be pre-filled into message text input field
on a conversation screen.

5.9 TICKER HEADLINE:

1. A message will continuously render below the AppBar, in a small container, to the user,
that will be moving from one end of the screen to another end.
2. The purpose of this feature is to show any important message or to redirect the user to
some another url related to stock market, on just by clicking the link.
3. This feature is achieved through by using tween animation in flutter, which takes an offset
from (-1,0) to (1,0) and repeat the animation after completion, so it will get bind in indefinite
loop. Listview is used instead of fixed size container, to avoid overflow of text and its axis is
set to horizontal.
 Figure 11. Ticker HeadLine Page

6.0 AD FROM ADMIN SIDE:

1. Admin of the application can send text, image or video as an advertisement that will be
shown to user as a sticky circular button that is movable and can be adjusted according to the
user convenience.
2. On click of this button, ad will pop up from bottom and cover the screen till App Bar and
show text, image or video as send by the admin.
3. Video format must be in .MP4 format and image must be in .jpg or .png format.

Figure 12. Ad from Admin Side Page

6.1 PRICE SELECTION SCREEN:

1. User can go to settings page and can select which price i.e., among this list of 10 prices, for
example – High Price, Open Price, Last Traded Price, Close Price, Low Price, Buy price, Sell
price, Average Traded price, Which 6 prices he/she wants to see.
2, That selected list of 6 prices will get rendered on the Home Screen.
3. The Selected price will get stored in local Storage (Shared Preferences) of a phone.
4. User can select maximum 6 prices in List View and 3 prices in Grid View.

Figure 13. Price Selection Page

6.2 ADD STOCK PAGE:

1. Earlier in Add Stock Page, first user has to select the category, then new page will get
pushed and the selected symbol will come in list.
2. For the user convenience, we have updated the UI Screen of Add Stock page in Tab View.
3. Now the user just has to swipe the screen and can easily see the selected symbol, in
categorize and sorted manner.

Figure 14. Add Stock Page

6.3 NEWS SCREEN:
1. In this WebSocket connection is used to get the live news related to the stock market.
2. User can save the important news, they want to keep for future use.
3. Bookmarked news will come from database, through APIs in news section.
4. user can attach some topic for which he/she specifically want to be get updated.

WebRTC
With WebRTC, you can add real-time communication capabilities to your application that
works on top of an open standard. It supports video, voice, and generic data to be sent
between peers, allowing developers to build powerful voice- and video-communication
solutions. The technology is available on all modern browsers as well as on native clients for
all major platforms. The technologies behind WebRTC are implemented as an open web
standard and available as regular JavaScript APIs in all major browsers. For native clients,
like Android and iOS applications, a library is available that provides the same functionality.
The WebRTC project is open-source and supported by Apple, Google, Microsoft and Mozilla,
amongst others. This page is maintained by the Google WebRTC team.

Major components of WebRTC include several JavaScript APIs:

• getUserMedia acquires the audio and video media (e.g., by accessing a device's

camera and microphone).[20]

 • RTCPeerConnection enables audio and video communication between peers. It

performs signal processing, codec handling, peer-to-peer communication,

security, and bandwidth management.[21]
• RTCDataChannel allows bidirectional communication of arbitrary data between

peers. It uses the same API as WebSockets and has very low latency.[22]

The WebRTC API also includes a statistics function:

• getStats allows the web application to retrieve a set of statistics about WebRTC

sessions. These statistics data are being described in a separate W3C document.[23]

The WebRTC API includes no provisions for signaling, that is discovering peers to connect
to and determine how to establish connections among them. Applications use Interactive
Connectivity Establishment for connections and somehow manage sessions, possibly relying
on any of Session Initiation Protocol, Extensible Messaging and Presence Protocol, Message
Queuing Telemetry Transport, Matrix (protocol), or another protocol. Signaling may depend
on one or more servers.
 Figure 15. Message Page

6.4 IOS DEVELOPMENT:

Features which are mentioned for the android, are also developed for the iOS, Some plugins
which are only for android have been replaced with the plugins that are supported by iOS.
For iOS development XCode IDE is used and debugging is done on simulator.
Firebase setup procedure is different for iOS and for this, I have been using an iOS
development account which is provided by the company.

6.5 WINDOWS DEVELOPMENT:

All above mentioned features which are developed for android and IOS are also developed
for windows, some plugins that are used for android development is not supported by
windows like Connectivity Plugin( to check internet connectivity), Signalr Plugin, that is
used to get the live price od stocks from NSE and BSE.

So, in place of connectivity plugin, Connectivity Plus plugin is used that support windows.
In place of signalr plugin, I have developed this plugin using http and WebSocket.
In Windows, basic backend which are developed for android is used for windows but the
frontend screens are changed and developed from scratch.

Login Screen
User should enter his/her credentials to use application. If not registered they have to create
their account. Validation of each field is done, and if the membership gets expired an
appropriate message is shown.

Figure 16. Login Screen Page

Home Screen with List View

In Home Screen, Signal R for windows is used to make connection to the server and get real
time data of stocks. Proper colours schemes are used to make user understand when the price
is going high or low. User can create his own watchlists and add the stocks whose price they
want to see. User can also decrease or increase font size according to his convenience.
 Figure 17. Home Screen with ListView

Home screen with Grid View

User can click on the eye icon can select the layout in which they want to see price. For
instance, Grid view or List View. In grid view, user can see only three prices whereas in list
view user can see six prices of any stock.
 Figure 18. Home Screen with GridView

Market Depth Screen

In order to see more details like, buy quantity, sell quantity, open price, close price, average
trade price, High price and low price etc of the stock, user can click on that stock and market
depth page will get pushed.

Figure 19. Market Depth Screen

AddStock Screen

Similar to android, windows too have add stock feature to add stock in a particular watchlist.
In backend same function is called that is made for android, so that reusability of code can be
achieved. For frontend, UI is adjusted according to screen height and screen width, and to
achieve responsiveness in UI, Orientation Builder widget is used in code, which tells about
the portrait and landscape view of an application.

Figure 20. Add Stock Screen

Alert Screen
Alert screen in windows application is used to, set the alert to receive an automatic
notification whenever the stock price reaches the set price. In this screen all the set alerts are
shown.
 Figure21. Alert Screen

EditStock Screen
In EditStock screen user can drag drop, reshuffle and can also delete any stocks according to
its convenience. Same backend code is used as in android, few dependencies are changed and
frontend is redesigned according to windows screen layout.

Figure 22. Edit Stock Screen

Message Screen
In message screen user will receive all message whether it is related to any tips or stock news.
Along with text message, admin can send voice message through notification and that audio
file will be played.

Figure 23. Message Screen

 Chapter 6
WORK PLAN

1. 15th Jan – Start of the internship

2. 15th Jan to 31st Jan – Training week 1

2.1 Started the android development course in flutter by Angela Yu
2.2 Revised database management concepts
2.3 Revised virtual machines concepts

3. 1st Feb to 7th Feb – Training week 2

3.1 Study MVC structure.
3.2 Developed widgets in flutter
3.3 Build basic user interface

4. 8th Feb to 14th Feb – Training week 3

4.1 Study about the user experience and management
4.2 Learnt networking and signalr technology
4.3 Learnt dependency management using flutter

5. 15th Feb to 21st Feb – Training week 4

5.1 Learnt flutter inspector
4.2 Learnt using components and transitions
5.3 Build interface for various application as practice

6. 22nd Feb - Started e-trading android application development

7. 22nd Feb to 1st Mar –

7.1 Research work about the project

7.2 Gathered the details
 7.3 Study state management techniques in flutter
8. 2nd Mar to 8th Mar –
8.1 Developed Sign in screen
8.2 Developed Splash screen
8.3 Developed the Drawer bar
8.4 Developed different layouts

9. 9th Mar to 15th Mar –

10.1 Developed the home screen
10.2 Developed the stocks list page
10.3Connect with signalr server.
10.4Learn how to invoke methods on hub proxy in signalr

10. 16th Mar to 21st Mar –

10.1 Developed Add Stock Page

10.2 Developed Alert and Edit Stock page
10.3Developed the Log out option

11. 22nd Mar to 29 Mar

11.1 Developed Language dialog frontend
11.2 Developed Language dialog backend
12. 22th April to 30th April
12.1 Studied about JWT Token
12.2 Developed frontend screens
12.3 Developed backend of referral feature
13. 1st May to 7th May
13.1 Studied about what’s app live chat
13.2 Integrated what’s app live chat feature
13.3 Checked the proper functionality
14. 8th May to 15th May
 14.1 Studied about marquee plugins and tween animation in flutter
14.2 Developed marquee feature, by using tween animation in flutter.
14.3 Searched about Linktext plugin, and verified its working
14.4 Searched about draggable floating action button.
14.5 Developed the bottom sheet screen to show ad from admin
14.6 Studied about WebRTC
15. 16th May to 22nd May
15.1 Developed the stock price selection screen, using local storage
15.2 Studied about WebRTC
15.3 Developed the news section screen, integrated WebSocket and api
15.4 Updated the UI of addstock Screen in tabview
15.5 Developed the frontend for windows platform
15.6 Studied about alternative plugins that support windows
15.7 Tested Android application from various aspects.
15.8 Compiled the code for windows platform
15.9 Started development for iOS platform.
 Chapter 7
TESTING

7.1 FUNCTIONAL TESTING:

Functional testing is a process of testing all functionalities related to smooth login,
signup, logout, profile creation, deletion, updation and connectivity check etc. The main
function of these testing is to ensure the basic quality and working of bugs, that can put a
lasting impression on any user. It is to ensure that product is free from basic functionality
bugs and app may not harm user device. The following testing were done in this
process:-

1. Validate all login, signup fields.

2. Check internet connectivity by enabling and disabling mobile data and wifi
3. Print any platform error, if thrown.
4. Smooth signing process, in only few seconds.
5. Check whether database connection is properly setup.

7.2 USABILITY TESTING:

Usability testing ensures that the application’s frontend is made upto the requirement. It
also ensures that application is easy to use and rendering of UI is smooth without any
disruption. The following things are checked in this testing:

1. Font Size and Theme colour as per requirement.

2. Drag and drop is working correctly
3. Appropriate paddings and margin
4. Pages are synchronized
5. Local storage space is not much occupied by the application.

7.3 COMPATIBILITY TESTING:

Compatibility testing ensures that the application is compatible across all the platforms
like Android, iOS, Windows, Web, MacOS. First the app is checked on emulator and
simulator of different pixels to ensure that the app is responsive and changes layout in portrait
and landscape mode, after that the application is tested on a real devices among various
android and iOS versions. The following things are checked in this testing:

1. Application working fine in emulator or not, the emulator is chosen of different

pixels.
2. Application is tested on real devices with different OS versions.
3. Application is hosted on secure https connection, to check web compatibility.
4. Next, applications is tested in among various processors and its size is noted
5. Then application gets signature of a company and new version is released on various
stores
 Chapter 8
CONCLUSION AND FUTURE SCOPE

8.1 CONCLUSION:
In nutshell, App is an online trading platform for trader, brokers and market learner
enthusiast. It provides real time market data and visualize and analyze market depth
through graphs and charts. Set view according to your convenience and smooth
rendering of UI without any data leakage or cache storing, because a single second of
delay will lead to a lost of opportunities and deletion of app from the device.

8.2 FUTURE SCOPE:

This application needs to have a lot more feature in the future like:

1. Graphs and Charts

2. Settings
3. Filter and sorting
4. Application for iOS, MacOS
5. Testing of app on emulators of various pixels to ensure responsiveness an quality
working.

These features will help in improving the application and making it more users friendly.
 References
1. Market Pulse
https://play.google.com/store/apps/details?id=in.marketpulse&hl=en_IN&gl=US
2. Ticker MVM
https://play.google.com/store/apps/details?id=com.mvmrealtime.android&hl=en_IN&
gl=US
3. Edelweiss
https://play.google.com/store/apps/details?id=com.msf.emt.mobile&hl=en_IN&gl=U
S
4. SignalR
https://blog.3d-logic.com/2015/03/29/signalr-on-the-wire-an-informal-description-of-
the-signalr-protocol/
5. Provider
https://pub.dev/packages/provider
6. Getting started with WebRTC
7. Learning WebRTC