CERTIFICATE

This is to certify that the industrial training entitled Mobile App Development is the
bonafide work carried out by Arpita Maheshwari student of B.Tech. in Computer
Science & Engineering at Jaipur Engineering College and Research Centre, during the
year 2022-23 in partial fulfillment of the requirements for the award of the Degree of
Bachelor of Technology in Computer Science & Engineering under my guidance.

Name of Guide - Dr. Vijeta Kumawat

Designation - Associate Professor

Place: Jaipur

Date: 30-NOV-2022

1
 VISION OF CSE DEPARTMENT

To become a renowned Centre of excellence in computer science and engineering and make
competent engineers & professionals with high ethical values prepared for lifelong learning.

MISSION OF CSE DEPARTMENT

1. To impart outcome based education for emerging technologies in the field of computer science
and engineering.
2. To provide opportunities for interaction between academia and industry.
3. To provide platform for lifelong learning by accepting the change in technologies
4. To develop the aptitude of fulfilling social responsibilities.

2
 PROGRAM OUTCOMES (POs)
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2. Problem analysis: Identify, formulate, research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural
sciences, and engineering sciences.
3. Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research
methods including design of experiments, analysis and interpretation of data, and synthesis
of the information to provide valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7. Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9. Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member
and leader in a team, to manage projects and in multidisciplinary environments.
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in
independent and life-long learning in the broadest context of technological change.

3
 PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The PEOs of the B.Tech (CSE) program are:

1. To produce graduates who are able to apply computer engineering knowledge to provide
turn-key IT solutions to national and international organizations.
2. To produce graduates with the necessary background and technical skills to work
professionally in one or more of the areas like – IT solution design development and
implementation consisting of system design, network design, software design and
development, system implementation and management etc. Graduates would be able to
provide solutions through logical and analytical thinking.
3. To able graduates to design embedded systems for industrial applications.
4. To inculcate in graduates effective communication skills and team work skills to enable
them to work in multidisciplinary environment.
5. To prepare graduates for personal and professional success with commitment to their ethical
and social responsibilities.

PROGRAM SPECIFIC OUTCOMES (PSOs)

● PSO1: Ability to interpret and analyze network specific and cyber security issues in real world
environment.
● PSO2: Ability to design and develop mobile and web-based applications under realistic
constraints.

4
 COURSE OUTCOMES (COs)
On completion of project Graduates will be able to-
● CO1: Generate the report based on the Projects carried out for demonstrating the ability to
apply the knowledge of engineering field during training
● CO2: Demonstrate Competency in relevant engineering fields through problem
identification, formulation and solution.

MAPPING: CO’s & PO’s

Subject Code Cos Program Outcomes (POs)

PO- PO- PO- PO- PO- PO- PO- PO- PO- PO- PO- PO-
1 2 3 4 5 6 7 8 9 10 11 12
3 3 2 2 2 1 1 2 2 3 3 3
3CS7-30 CO-1
Industrial Training 3 3 3 3 3 1 1 2 2 3 3 3
CO-2

5
 ACKNOWLEDGEMENT

It has been a great honor and privilege to undergo training at Techienest Pvt. Ltd., Jaipur. I am
very grateful to Mr. Mukul Sir gave his valuable time and constructive guidance in preparing the
report for training. It would not have been possible to complete this report in such a short period of
time without their kind encouragement and valuable guidance.

I wish to express our deep sense of gratitude to our Training Guide Dr. Vijeta Kumawat , Deputy
HOD & Associate Professor Department of CSE Jaipur Engineering College and Research Centre,
Jaipur for guiding us from the inception till the completion of the Industrial Training. We sincerely
acknowledge her for giving her valuable guidance, support for literature survey, critical reviews and
comments for our Industrial Training.

I would like to first of all express our thanks to Mr. Arpit Agrawal, Director of JECRC
Foundation, for providing us such a great infrastructure and environment for our overall
development.

I express sincere thanks to Dr. V. K. Chandna, Principal of JECRC Foundation, for his kind
cooperation and extendible support towards the completion of our seminar.

Words are inadequate in offering our thanks to Dr. Sanjay Gaur, HOD of CSE department, for
consistent encouragement and support for shaping our seminar in the presentable form.

Also our warm thanks to Jaipur Engineering College and Research Centre, who provided us this
opportunity to carryout, this prestigious seminar and enhance our learning in various technical
fields.

Arpita Maheshwari

20EJCCS052

6
 ABSTRACT

As we are all aware that technology is emerging day by day and it has affected all of us. Nowadays
having a smartphone in our pocket is just like a trend. People use smartphones for various purposes
like playing games, listening to music, watching live matches and movies, and for some other
activities. All these activities or the task that is performed in a smartphone is done through the
application. These applications are created by the professional who is known as “developers”. Now,
while creating an application the developer has to face a lot of problems, which we are not aware
of. One of the major problems that is faced by the developer while creating an application is
platform selection, which is the selection of either iOS or Android or both. This problem is also
known as a “cross-development problem”. For instance, if I need to create a calculator application
for a smartphone then firstly what I need to do is select the platform for which the application needs
to be created which means the application needs to be created for android or iOS because creating
an application for both the platform is very difficult for a single person and also very
time-consuming. Now the solution to the platform selection problem is a flutter, which is software,
developed by Google itself and is used to create mobile applications.

Now my research question is how does the flutter software solve the platform
selection/cross-development problem which is being faced by the developer while creating the
application. For this, I did an experiment where a code comparison of a simple hello world
application is done. This is an application where the user sees a simple text message when the user
runs the application. I wrote the program of this application in android, iOS, and in a flutter. Now
what I found out is that we can develop an application for both iOS and Android by just written the
code in flutter and no need to develop the application separately for Android and iOS. The flutter
software allows the developer to download the application in both the platform which is android
and iOS by just writing the code once, which also results in the save of time and money. Another
result which is also found through the experiment is that the applications which are developed
through flutter work much faster than the applications developed separately. The language in which

7
the code is written in a flutter software is known as “Dart” and it is easy to learn and write the code
in a flutter.

Flutter is one of the software which will be the future of mobile application development, as it

allows the user or developer to create multiple applications without any restriction or without facing

any challenges, and it has solved the cross-development problem by the developers.

8
 TABLE OF CONTENTS

Certificate----------------------------------------------------------------------------------------- i
Vision and Mission------------------------------------------------------------------------------- ii
Program Outcomes (POs)----------------------------------------------------------------------- iii
Program Education Objectives (PEOs) ------------------------------------------------------ iv
Program Specific Outcomes (PSOs)----------------------------------------------------------- v
Course Outcomes (COs)------------------------------------------------------------------------- vi
Mapping: COs and POs-------------------------------------------------------------------------- vi
Acknowledgement--------------------------------------------------------------------------------- vii
Abstract---------------------------------------------------------------------------------------------- viii
1. INTRODUCTION------------------------------------------------------------------------------ 11
1.1 Features Of Flutter -------------------------------------------------------------------------- 13
1.2 Purpose----------------------------------------------------------------------------------------- 13
1.3 Project Scope --------------------------------------------------------------------------------- 15
2. HISTORY------------------------------------------------------------------------------------------ 16
3. WHY USE FLUTTER—-------------------------------------------------------------------------18
3.1 Fast Development —-------------------------------------------------------------------------18
3.2 Expressive + Flexible UI —-----------------------------------------------------------------18
3.3 Native Apps For Android And IOS —-----------------------------------------------------18
3.4 Hot Reload —---------------------------------------------------------------------------------18
3.5 High Performance —-------------------------------------------------------------------------18
3.6 Using DART As a Programming Language —-------------------------------------------19
3.7 Reduce The Third Parties —----------------------------------------------------------------19
3.8 The Flutter API Is Very Consistent —------------------------------------------------------19
3.9 The Customizable Kit Of Widget—---------------------------------------------------------19
4. PRINCIPLE OF FLUTTER —-----------------------------------------------------------------20
4.1 Core Principle Of Flutter—----------------------------------------------------------------------20
4.2 Drawing Principle Of Flutter—------------------------------------------------------------------21

9
4.2.1 Flutter Data Structure Using Rendering—------------------------------------------------------22
4.2.1.1 Widget Tree—---------------------------------------------------------------------------------------23
4.2.1.2 Element Tree—-------------------------------------------------------------------------------------24
4.2.1.3 Render Object Tree—------------------------------------------------------------------------------25
4.2.1.4 Layers—---------------------------------------------------------------------------------------------28
5. EFFICIENT TOOLING—-----------------------------------------------------------------------------29
6. WIDGET—------------------------------------------------------------------------------------------------30
6.1 Widget Tree—----------------------------------------------------------------------------------------31
6.2 Types of Widget—-----------------------------------------------------------------------------------31
6.3 Stateless Widget—-----------------------------------------------------------------------------------32
6.4 Stateful Widget—------------------------------------------------------------------------------------32
7. INSTALLATION IN WINDOWS AND MAC OS—---------------------------------------------33
7.1 In Windows—----------------------------------------------------------------------------------------33
7.2 In Mac OS—-----------------------------------------------------------------------------------------34
8. PROJECT—---------------------------------------------------------------------------------------------36
8.1 How To Start A Project?---------------------------------------------------------------------------36
8.2 Need of COVID-19 Tracker App—--------------------------------------------------------------38
8.3 App Unique Features—----------------------------------------------------------------------------39
8.4 APIs Used—-----------------------------------------------------------------------------------------39
8.5 How to Create a COVID-19 Tracker Android App—-----------------------------------------40
8.6 App Screenshots—---------------------------------------------------------------------------------46
9. CONCLUSION—--------------------------------------------------------------------------------------47
10. REFERENCES—-------------------------------------------------------------------------------------48

10
 1. INTRODUCTION
As technology has evolved over the last few years, every human being has developed accordingly.
Nowadays, having smartphones in their pocket is like a trend for every person. Moreover, to
continue this trend many mobile applications also prevail so that people can spend their leisure time
scrolling over the applications. Due to the desire of people to search for something new, a large
number of applications are present in the market in all categories which can be Health Care, Games,
Music, Shopping, and many more. In the current scenario, people can now watch live matches,
consult a doctor, learn new things through distance learning by just sitting at their homes through
applications. This has caused a massive increase in application development.

Luckily as there is a choice in the application selection, in the same way an individual can select the
cellphones of the different operating systems, which gives a person a different experience. But as
time is passing by, most operating systems are getting behind except Android and iOS. These two
are the leading operating system of cellphones used in the current scenario. Now to develop
applications for these operating systems, developers are needed. Many small and start-ups
companies are considering this as a piece of cake so that they can build their empire through
application development. But in reality, the development of an application is not easy, developers
face a lot of issues while developing an application. One of the major problems that are being faced
by the developer is cross-platform development. In this, the developers have to choose the
Operating System which means select either Android or iOS or both, and develop the application
accordingly . If an application is to be developed in both Android and iOS, then they have to code
in different platforms, need to learn different programming languages according to the respective
Operating System, different testing needs to be done which is a difficult task as well as
time-consuming and cost a lot of money.

To overcome the cross-platform problem, Google has developed a platform knows as Flutter which
is an open-source mobile user interactive framework, announced in the year 2017, and is ranked
34th among the software, which is used for the development of an application.

11
Flutter is an open-source mobile SDK developer can use to build native-looking Android and iOS
applications from the same code base. Flutter has been around since 2015 when Google introduced
it and remained in the beta stage before its official launch in December 2018. Since then, the buzz
around Flutter has been growing stronger. Flutter is now the top 11 software repos based on
GitHub stars. Moreover, we have already seen thousands of Flutter apps being published on
app stores. One of the most notable examples is the Xianyu app created by Alibaba team, used by
over 50 million people. Android provides a native framework based on Java language and
iOS provides a native framework based on Objective-C / Shift language. However, to
develop an application supporting both the OSs, we need to code in two different languages
using two different frameworks. To help overcome this complexity, there exists mobile
frameworks supporting both OS. These frameworks range from simple HTML based hybrid
mobile application framework (which uses HTML for User Interface and JavaScript for
application logic) to complex language specific framework (which do the heavy lifting of
converting code to native code). Irrespective of their simplicity or complexity, these
frameworks always have many disadvantages, one of the main drawbacks being their slow
performance. In this scenario, Flutter – a simple and high-performance framework based on Dart
language, provides high performance by rendering the UI directly in the operating system’s canvas
rather than through native framework. Flutter also offers many ready to use widgets (UI) to
create a modern application. These widgets are optimized for mobile environments and designing
the application using widgets is as simple as designing HTML. To be specific, the Flutter
application is itself a widget. Flutter widgets also support animations and gestures. The application
logic is based on reactive programming. Widget may optionally have a state. By changing the state
of the widget, Flutter will automatically (reactive programming) compare the widget’s state (old
and new) and render the widget with only the necessary changes instead of re-rendering the whole
widget.

12
1.1 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.

➢ High performance application.

➢Custom, Animated UI of any Complexity available

➢Open Source.

➢Hot Reload.

➢Minimal Code.

1.2 PURPOSE OF PROJECT

COVID-19 apps include mobile-software applications for digital contact-tracing - i.e. the process of
identifying persons ("contacts") who may have been in contact with an infected individual -
deployed during the COVID-19 pandemic.

Numerous tracing applications have been developed or proposed, with official government support
in some territories and jurisdictions. Several frameworks for building contact-tracing apps have
been developed. Privacy concerns have been raised, especially about systems that are based on
tracking the geographical location of app users.

13
Less overtly intrusive alternatives include the co-option of Bluetooth signals to log a user's
proximity to other cell phones. (Bluetooth technology has form in tracking cell-phones' locations.[)
On 10 April 2020, Google and Apple jointly announced that they would integrate functionality to
support such Bluetooth-based apps directly into their Android and iOS operating systems. India's
COVID-19 tracking app Aarogya Setu became the world's fastest growing application - beating
Pokémon Go - with 50 million users in the first 13 days of its release.

The development of COVID-19 apps, in response to the COVID-19 pandemic; are mobile software
applications that use digital contact tracing. It has enabled governments and their people to better
identify and track individuals who may have come into close contact with an infected individual.
Given the emergence of COVID-19 apps, it is currently synonymous with digital contact tracing,
however, if future diseases emerge then digital contact tracing will be distinguished separately.
Consequently, the moral and ethical implications of such applications and its immediate impact in
dealing with the crisis is the purpose of this paper. Its impact at a macro and micro level; on
business, politics, family, and health have all benefited from digital contact tracing.

To begin with, contact tracing is fundamental in controlling the spread of an infectious disease. The
Coronavirus is hurting the global economy; public and private institutions are reassessing how to
operate, schools and businesses are trying to keep workers safe by using online chat services for
video conferencing, all to minimize unnecessary contact to help prevent the spread of the disease.
Unfortunately, not everyone can maintain physical distances since many jobs require workers to
work alongside one another. A strong example of this are health workers such as doctors and nurses
who are regularly in close contact with patients. They have to be in order to treat them but the
recent explosion of infected cases along with reused equipment like masks are putting health
workers in a precarious position. The mass adoption of digital contact tracing by people help to
inform individuals and officials of when individuals have come in contact with an infected person.
One-way digital contact tracing helps control the spread of the disease is that knowing whose
infection helps identify where it has most likely spread too, then measures can be taken to
quarantine and treat infected individuals. In summation, it prevents people from unwittingly
spreading it those most at risk.

14
1.3 PROJECT SCOPE

Background & objectives: The potential benefits of mobile health (mHealth) initiatives to manage
the coronavirus disease 2019 (COVID-19) pandemic have been explored. The Government of India,
State governments, and healthcare organizations have developed various mobile apps for the
containment of COVID-19. This study was aimed to systematically review COVID-19 related
mobile apps and highlight gaps to inform the development of future mHealth initiatives.

Methods: Google Play and the Apple app stores were searched using the terms 'COVID-19',
'coronavirus', 'pandemic', and 'epidemic' in the first week of April 2020. A list of
COVID-19-specific functions was compiled based on the review of the selected apps, the literature
on epidemic surveillance, and national and international media reports. The World Health
Organization guideline on Digital Health Interventions was used to classify the app functions under
the categories of the general public, health workers, health system managers, and data services.

Results: The search yielded 346 potential COVID-19 apps, of which 50 met the inclusion criteria.
Dissemination of untargeted COVID-19-related information on preventative strategies and
monitoring the movements of quarantined individuals was the function of 27 (54%) and 19 (32%)
apps, respectively. Eight (16%) apps had a contact tracing and hotspot identification function.

How COVID-19 apps work & Why is it better than traditional tracing?

Digital contact tracing is meant to utilize electronics that can store and communicate information
regarding infected persons quicker than the traditional method. Examples of electronic technologies
that can use digital tracing include smartphones and smartwatches. By utilizing COVID-19 apps
governments and health officials can address the limitations of traditional tracing to quickly notify
the population. The perceived benefits of COVID-19 apps are increased effectiveness and
efficiency.

15
 2. HISTORY

Flutter was first announced 4 years ago in 2015 at the Dart Developer Summit. It was initially
called “SKY”. I think that would have been cooler. Flutter alpha (V-0.06) was released in May
2017.Later, Google launched the 2nd preview of Flutter back in September 2018.That’s when the
developers around the world started to feel the heat. Even before Flutter 1.0 was announced,
many Flutter apps came into the stores. Apps like – Alibaba, Google Ads, Tencent, reflect were
proof that Flutter could be so Awesome. Finally, Google launched Flutter 1.0, the stable version of
Flutter on 5th of December 2018. At this launch, Google released ‘The History of Everything”. A
timeline of the world from the Big Bang to the age of WWW. An app built with Flutter with a
single code base that can run in any Android or IOS device smoothly. This app has smooth
animations because Flutter can run apps with 120 Frames Per Second. (Others only can achieve a
maximum of 60 FPS). To build apps with Flutter, you need to know Dart as flutter runs on the Dart
virtual machine and flutter uses Dart as the Programming Language. Dart – A object oriented
programming language developed by Google Dart was first released in 2011 and the latest stable
version (Dart 2.2.0) was released in February 2019.Many sources mentions that Google
initially released Dart as an alternative to Java-Script. But, in the official Dart website, they deny it.
For dart beginners, dart devs say “You probably already know Dart, you just don’t realize it”. Why?
because dart is a lot like java, C# or js. If you know any of those languages, you only need to study

a few Syntax changes.

16
Figure 2.1 Brief History of Flutter

17
 3. WHY USE FLUTTER

3.1 FAST DEVELOPMENT

Flutter engineered for high development velocity. Stateful hot reload allows you to change your
code and see it come to life in less than a second without losing the state of the app. Flutter also
ships with a rich set of customizable widgets, all built from modem reactive framework.

3.2 EXPRESSIVE + FLEXIBLE UI

Flutter moves to a widget, rendering, animation and gestures into this framework to give you
complete control over every pixel on the screen. It means you have the flexibility to build a custom
design.

3.3 NATIVE APPS FOR ANDROID AND IOS

Flutter apps follow platform conventions and interface details such as scrolling, navigation, icons,
fonts, etc. That is why apps built with Flutter features on both APP STORE and GOOGLE PLAY
STORE.

3.4 HOT RELOAD

In flutter, very save on the app and just as you do on the web just hit a refresh and your codes also
refresh. Imagining that Facebook SDK it would be so humongous if it would have been designing
android and you hit a recompile. So many things have to recompile and it would probably take
days. Unmistakably, Hot reloading is tech which is kind of necessary when your applications or
product goes like incense crazy like Facebook.

3.5 HIGH PERFORMANCE

Flutter doesn’t require a Javascript bridge and the speed is much faster.

18
3.6 USING DART AS A PROGRAMMING LANGUAGE

Dart is an object-oriented programming language that is used for writing mobile application code
for Flutter and which contributes to the efficiency and effectiveness of app development flow. It is a
comfortable language and uses a lot of CSS parts as well. Dart is used for generational garbage
collection which helps in creating frames for short-lived objects. It also helps to allocate the
objects with a single pointer bump to avoid UI jank and shutter.

3.7 REDUCE THE THIRD PARTIES

When using flutter, you can get complete IOS experience or Android Experience. So they are
reducing the Third parties.

3.8 THE FLUTTER API IS VERY CONSISTENT

AnimationBuilder, FutureBuilder, StreamBuilder,…Once you understand them you have no

limit. Anything is a widget. A button can be used as a screen, a full page used as a button with
animation and transformation.

3.9 THE CUSTOMIZABLE KIT OF WIDGET

Flutter is built with a rich and customizable set of widgets for Android, IOS and Material Design.
The collaboration between Flutter and Google’s material design has rendered and easily created a
powerful UI experience. This helps to create a smooth, crisp and refined app experience as are
available with a native app.

19
 4. PRINCIPLE OF FLUTTER

4.1 CORE PRINCIPLE OF FLUTTER

Flutter includes a modern react-style framework, a 2D rendering engine, ready-made widgets, and
development tools. These components work together to help you design, build, test, and debug
apps. Everything is organized around a few core principles.

Figure 4.1.1 Architecture of Flutter

Traditional conventions, as long as the article about the principle of Flutter, this picture will be
placed at the beginning. Regardless of whether it is good or not, it is first put forward, and most of
them still rely on their own understanding. Because this picture is so easy to use. Putting this
picture out, it is still simple to understand what is Flutter from the whole, otherwise it is easy to fall
into the "blind person to touch the elephant" situation. The Flutter architecture uses a layered
design, which is divided into three layers from bottom to top, in this order: Embedder, Engine,
Framework.

20
1. Embedder：Operating system adaptation layer to realize rendering Surface settings, thread
settings, etc.

2. Engine : Realize functions such as FLutter rendering engine, text layout, event processing,
and Dart runtime. Including Skia graphics drawing library, Dart VM, Text, etc., among
which Skia and Text provide the ability to call the underlying rendering and typesetting for the
upper layer interface.

3. Framework：It is a UI SDK implemented with Dart. From top to bottom, it includes two
major style component libraries, basic component libraries, graphics drawing, gesture recognition,
animation and other functions.

As for more details, this picture will be better with the source code eating experience. But because
this article is not a source code analysis, this work will not start. Next, I will use the Flutter drawing
process as an example to explain how Flutter works. This can also help you better understand the
source code.

4.2 DRAWING PRINCIPLE OF FLUTTER

The Flutter drawing process is summarized as follows:

Figure 4.2

Drawing Principle

The first is the user operation, which triggers the update of the Widget Tree, and then builds the
Element Tree, calculates the redraw area and synchronizes the information to the
RenderObject Tree, and then implements component layout, component drawing, layer
composition, and engine rendering. As a pre-knowledge, let's take a look at the data structure
involved in the rendering process, and then analyze the specific aspects of rendering.

21
4.2.1 FLUTTER DATA STRUCTURE USING RENDERING

Figure 4.2.1

22
The key data structures involved in the rendering process include three trees and a layer, where
RenderObject holds the Layer. Let's focus on the relationship between the three trees.

Then the relationship between the corresponding three trees is shown below:

Figure 4.2.2

4.2.1.1 WIDGET TREE

Figure 4.2.1.1

The first tree is the Widget Tree. It is the basic logical unit of control implementation, and is how
users describe the interface UI have to be aware of is, Widget is immutable When the view
configuration information changes, Flutter will rebuild the Widget to update it, and it is simple and

23
efficient to build in a data-driven UI. So why is Widget Tree designed to be immutable? Flutter
interface development is a kind of responsive programming, advocating "simple is fast", and
re-creating the Widget Tree from top to bottom to refresh, this idea is relatively simple,
without additional relationship data changes will affect which nodes. In addition, the Widget is
just a configuration with a data structure, the creation is lightweight, and the destruction is
optimized, so you don’t have to worry about the performance problems caused by the entire tree
rebuilding.

4.2.1.2 ELEMENT TREE

Figure 4.2.1.2

The second tree, Element Tree. It is the instantiated object of Widget (as shown below, Widget
providescreateElementFactory method to create Element), which persists in the Dart context at
runtime. It carries the constructed context data and is the bridge connecting the structured
configuration information to the final rendering. The reason why it persists in the context of Dart
instead of rebuilding like Widget, is because the cost of re-creating and re-rendering of Element
Tree will be very large, so Element Tree to RenderObject Tree also has a Diff link to calculate the
minimum redraw area.

It should be noted that Element holds both Widget and RenderObject, but neither Widget nor
Element is actually responsible for the final rendering, they are just "ordering", and it is the
RenderObject that actually renders the configuration information

24
 Figure 4.2.1.2

4.2.1.3 RENDER OBJECT TREE

The third tree, RenderObject Tree, is the render object tree. RenderObject is created by Element and
linked toElement.renderObjectOn (as shown below), it accepts Element's information
synchronization. Similarly, it is also persistently stored in the context of Dart Runtime, and is
mainly responsible for implementing view rendering.

25
 Figure 4.2.1.3

The display process of RenderObject Tree in Flutter is divided into four stages:

1. layout

2. draw

3. synthesis

4. Rendering

Among them, the layout and drawing are done in RenderObject. Flutter uses a depth-first
mechanism to traverse the rendering object tree, determine the position and size of each object in
the tree, and draw them to different layers. After drawing, the task of compositing and
rendering is left to Skia.

So the question is, why are there three trees instead of two? Why do I need the Element Tree in the
middle, is it not possible to construct the RenderObject Tree directly from the Widget Tree?

It is possible in theory, but not practical. Because if you build the RenderObject Tree directly, it
will greatly increase the performance loss caused by rendering. Because Widget Tree is
immutable, but Element is mutable. In fact, the Element layer abstracts the changes of the
Widget tree (similar to React/Vue's VDOM Diff), and only synchronizes the parts that really need
26
to be modified into the RenderObject Tree, thereby minimizing the redraw area and
improving rendering effectiveness. It can be found that Flutter's ideas are largely based on the
front-end reactive framework React / Vue.

Figure 4.2.1.3.1

In addition, expand and add VDOM. We know that several advantages of Virtual DOM are:

1. Diff algorithm to ensure that as few DOM nodes as possible. This is reflected in Flutter's
Element Tree.

2. UI declarative programming, strong code maintainability. This can be reflected when Dart
writes UI components declaratively.

27
4.2.1.4 LAYERS

Finally, take a look at Layer, which is attached to RenderObject

(throughRenderObject.layer(Acquisition) is the carrier of drawing operations, and can also cache
the results of drawing operations. Flutter draws on layers that are not used separately, and then
overlays these layers with cached drawing results according to the rules to get the final
rendering result, which is what we call an image.

As shown in the code above, there are two attributes on the base class of
Layer_needsAddToScene with _ subtreeNeedsAddToSceneThe former indicates that the scene
needs to be added, and the latter indicates that the subtree needs to be added to the scene. Usually,
only when the state is updated, it needs to be added to the scene, so these two attributes can be
intuitively understood as "I need to update" and "Subtree needs to be updated."

Layer providesmarkNeedsAddToScene()Come and mark yourself as "need to update".

Derived classes call this method when their state changes, marking themselves as "needs to be
updated", such as the addition and deletion of child nodes of ContainerLayer, the
transparency of OpacityLayer, the change of PictureLayer, and so on.

28
 5. EFFICIENT TOOLING

$ flutter doctor

Checks your environment and displays a report to the terminal window

$ flutter upgrade

Updates both the Flutter SDK and your packages

$ flutter packages get

Checks your environment and displays a report to the terminal window

$ flutter packages upgrade Will retrieve the highest available version of the package

$ flutter format Automatically formats your code according to the Flutter-style

$ flutter analyze Analyzes your code and help you find possible mistakes\

$ pubspec.yaml

name: flutter_project

description: An amazing Flutter project using Firebase Auth

dependencies:

flutter:

sdk: flutter

firebase_auth: ">=0.1.2 <0.2.6"

29
 6. WIDGET

➢ In flutter, Widget is a way to declare and construct UI.

➢ If you are familiar with the Android or iOS

development, then you might make the immediate
connection with the views (on Android) or UIViews (on
iOS).

➢ But dear just like view, Widget is not just a piece of UI.
Widget is a lot more than just structural elements like
buttons, text, image, list or slider. A widget might
display Something, it might help define design, it might
help with layout, it may handle user interaction, etc.

➢ For example, Padding is a widget, Margin is a widget, Center is a widget, Layout rows and
columns are also widgets.

➢ So you can consider that a widget is a blueprint. Flutter uses these blueprints to create views

6.1 WIDGET TREE

➢ If you already have fun with flutter code then you might notice that infinite Parent-Child tree.
Yaa I agree, the first time it just scares out any beginner, but dear we all pass from the same stage in
which you are right now. Just give it some time, do a lot of practice and Just believe, just like
others, you can do it as well.

➢ Widgets are arranged into a tree of parent and child widget.

➢ Widgets are nested inside of each other to form your app.

➢ The Entire widget tree forms a layout that you see on the screen.

30
 Figure 6.1

6.2 TYPES OF WIDGETS

➢ Flutter has a rich set of in-built widgets like text, buttons, slider, lists, layouts, gesture detector,
animations, etc. The Flutter team works really hard to create a set of widgets that helps you in
almost every situation. And they are continuously adding more widgets as developers needs.

➢ But apart from built-in widgets, you can create your own widgets according to your needs.

31
➢ Flutter divides widgets into two categories:

➢ Stateless Widgets.

➢ Stateful Widgets.

6.3 STATELESS WIDGET

➢ In simple words, if a widget doesn’t do anything it's Stateless Widget. They are static in
nature.

➢ Stateless widgets don’t store any state. That means they don’t store values that might change.

➢ You can also say that stateless widgets are “DATALESS” widgets. As they don’t store any
real-time data.

➢ For example, if you have a simple Text widget on the screen, but it doesn’t do anything then its
Stateless Widget.

6.4 STATEFUL WIDGET

➢ In simple words, if a widget does anything then its Stateful Widget.

➢ A Stateful widget is dynamic in nature. That means it can keep track of changes and update the
UI based on those changes.

➢ The user can interact with a stateful widget. For example, If you press a button and it performs
any task it’s a Stateful Widget, If you are moving a slider and it does anything then its a Stateful
Widget, If you swipe an item from a list and item gets deleted then that list a Stateful Widget.

➢ CheckBox, Radio, Slider, InkWell, Form, and TextField are an example of stateful
widgets.

➢ If you are in doubt, then always remember this rule.

➢ If a widget changes, it’s a Stateful Widget

➢ If a widget is not changing, it’s a Stateless Widget.

32
 7. INSTALLATION IN WINDOWS AND MAC OS

7.1 IN WINDOWS

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/windows and download the latest

Flutter SDK. As of April 2019, the version is 1.2.1 and the file is
flutter_windows_v1.2.1-stable.zip.

Step 2: Unzip the zip archive in a folder, say C:\flutter\

Step 3: Update the system path to include flutter bin directory.

Step 4: Flutter provides a tool, flutter doctor to check that all the requirements of flutter
development are met.

$ flutter doctor

Step 5: Running the above command will analyze the system and show its report as shown below:

Figure 7.1 Doctor Summary

The report says that all development tools are available but the device is not connected. We can fix
this by connecting an android device through USB or starting an android emulator.

Step 6: Install the latest Android SDK, if reported by flutter doctor

Step 7: Install the latest Android Studio, if reported by flutter doctor

33
Step 8: Start an android emulator or connect a real android device to the system.

Step 9: Install Flutter and Dart plugin for Android Studio. It provides start-up template to create
new Flutter application, an option to run and debug Flutter application in the Android studio itself,
etc.,

Flutter plugin – Installation

➢ Open Android Studio.

➢ Click File > Settings > Plugins.

➢ Select the Flutter plugin and click Install.

➢ Click Yes when prompted to install the Dart plugin.

➢ Restart Android studio.

7.2 IN MAC OS

To install Flutter on MacOS, you will have to follow the following steps:

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/macos and download the latest Flutter

SDK. As of April 2019, the version is 1.2.1 and the file is flutter_macos_v1.2.1- stable.zip.

Step 2: Unzip the zip archive in a folder, say /path/to/flutter

Step 3: Update the system path to include flutter bin directory (in ~/.bashrc file). > export
PATH="$PATH:/path/to/flutter/bin"

Step 4: Enable the updated path in the current session using below command and then verify it as
well.

source ~/.bashrc

source $HOME/.bash_profile

echo $PATH

34
Flutter provides a tool, flutter doctor to check that all the requirements of flutter development are
met. It is similar to the Windows counterpart.

Step 5: Install latest XCode, if reported by flutter doctor

Step 6: Install latest Android SDK, if reported by flutter doctor

Step 7: Install latest Android Studio, if reported by flutter doctor

Step 8: Start an android emulator or connect a real android device to the system to develop an
android application.

Step 9: Open iOS simulator or connect a real iPhone device to the system to develop iOS
application.

Step 10: Install Flutter and Dart plugin for Android Studio. It provides the startup template to create
a new Flutter application, option to run and debug Flutter application

➢ in the Android studio itself, etc.,

➢ Open Android Studio.

➢ Click Preferences > Plugins.

➢ Select the Flutter plugin and click Install.

➢ Click Yes when prompted to install the Dart plugin.

➢ Restart Android studio.

35
 8. PROJECT

8.1 HOW TO START PROJECT?

To create a Flutter app, follow the following steps.

1. Open Visual Studio Code and install the extensions for Flutter for its code intelligence and
formatting.

2. For that, you will find the Extensions tab on the left side as in the screenshot. You can see the 4th
option from the left vertical menu, which is the Extension tab. Click on it and search for Dart and
install it. Then search Flutter and install it and then Material Icon Theme (For Material Icons in
Flutter) and install it.

Figure 8.1.1 Extension Installation

36
3. Now, you are ready with the tools needed for app development

4. Now, we need to create a Flutter app. For that, go to View => Command Palette (Check out the
screenshot below).

Figure 8.1.2 Command Palette

5. Type “flutter”, and select Flutter: New Project.

6. Enter a project name like myfirstapp, and press Enter.

7. Create or select the parent directory for the new project folder.

8. Wait for the project to be created and you are good to go. Your first flutter app has been created
with a default counter template. ::)

9. The startup file of the app is main.dart under the lib folder and you need to almost work in lib
folder for the app. You need to work in other folders sometimes when you need to configure
settings and plugins but that is limited.

10. Now run your project to a connected external device or an emulator or simulator. Run the
command flutter run or in VS Code open Debug=>Start Debug(F5)

11. If you want to run apps on an external device connect it with a laptop or desktop and for android
developer mode needs to be on. You will find that Visual Studio code automatically tries to detect
the external device. You can see in the following screenshot that visual studio code detected my
device. Please see the bottom of visual studio code.

Figure 8.1.3

37
12. On successful launch you can see the counter app running on your device or emulator or
simulator.

CONCLUSION

Flutter framework is handy and easy to start mobile development. Visual Studio and Android
Studio both have full IDE support that makes for a better development experience.

8.2 NEED OF COVID-19 TRACKER APP

Covid-19 has put the world to a standstill. Doctors, healthcare workers and personnel of many other
essential services are fighting at the frontline to tackle this global pandemic. Although we are not
fighting the battle at the frontline, as students of statistics this is our humble attempt at partaking in
the struggle.

We have created an app to track COVID-19 where we have displayed the data from the world as a
whole and also country wise. The data is categorized into three components: confirmed cases,
deaths and recovered. The values are given for both daily and cumulative type. We have tried our
best to keep the display simple yet visually appealing. We have used line charts and pie charts and
also an exquisite race chart for display. All the above-mentioned charts are interactive and are
customized to give the user a clear idea of the intended meaning of the values as all the categories
are separated by different colors, this not only made the graphs more appealing to the eyes but also
helped in distinguishing different aspects.

There are two sections dedicated to graphs, one for India and the other for the entire world, graphs
for India are under Graphs under India Tracker and those for the world are under Graphs under
Home. The entire site is designed to make it as user friendly as possible.

We didn't just stop at displaying the data but went ahead and made predictions for values of total
confirmed cases, deaths and recovery for both India and the world.

38
8.3 APP UNIQUE FEATURES

1. Track daily coronavirus cases across the world.

2. Keep tabs on the increase or decrease in the number of cases in your district.
3. Amaze your friends and family by prognosticating the number of corona cases in any country at
the end of the day.
4. COVID-19! is a flutter-based Corona tracker mobile app.
5. This android application acts as a portal for the public to keep track of COVID-19, alongside
collecting data for further analysis. All the contents are handpicked and filtered to the best extent to
ensure that sources are reliable with minimal hoaxes, in the best interest of the public.
6. Fetch Covid cases and latest news related to COVID-19 from APIs.
7. Cache data in local storage, use when no internet connection is available.
8. Error handling for Server failure and Cache failure.
9. Flutter Bloc state management.
10. Test Driven Development (TDD).
11. Follow ResoCoder’s Clean Architecture.
12. COVID-19 Cases Tracker- The app enables users to easily track COVID-19 around the world.
Users can easily search a country using the search button and track the cases. There is also a daily,
weekly and monthly covid cases filter.

8.4 APIs USED

1. Covid case data are taken from https://api.covid19api.com/summary.

2. News are fetched from newsapi.org.
3. Create a new file named api_key.dart inside the lib folder.
4. Paste the following line with your API key - const String NEWS_API_KEY =
'YOUR_API_KEY';
5. Also we can take APIs from pub.dev website.

39
8.4 HOW TO CREATE A COVID-19 TRACKER ANDROID APP

Figure 8.4.1 Covid-19 Tracker App

Step1: Opening a new project

● Open a new project just click on File option at topmost corner in left.

● Then click on new and open a new project with whatever name you want.

● Now we're gonna work on Empty Activity with language as Java. Leave all other
options untouched.

● You can change the name of the project as per your choice.

40
 Figure 8.4.2 Configure Project

Step 2: After creating a new project, let’s first define dependencies in the pubspec.yaml file. For
this project, we only need the http package for calling web services.

http: ^0.12.0+4.

After doing this we have to start the coding part, This is how our main.dart file looks like. We have
added a MaterialApp widget inside StatefulWidget, we have linked the home property of
MaterialApp widget with Home class which we will add in the next step.

41
Figure 8.4.2 Pubspec.yaml

Figure 8.4.3 Main.dart

42
Now, let’s come to the Home page section. This is where we have used TabBar to show pages in
tabs. There are three tabs included in this app for three different pages, you can add as many as you
want according to your need.

Here in codes, the Home tab is linked with Total class.

India tab is linked with India class (for showing Indian data in more depth exclusively, you can
remove it if you don’t want to show this page).

The Global tab is linked with the Global class in the app. We will be creating these three classes in
the next steps.

Figure 8.4.4 Home.dart

Now, we will create a Total class for the Home tab as given below. Here I have used RapidAPI for
getting live data of corona cases. I’m getting Image Tips from a different host and total stats from a
different host.

These are the links.

https://rapidapi.com/astsiatsko/api/coronavirus-monitor

https://rapidapi.com/Gramzivi/api/covid-19-data

43
You need to use your own x-rapidapi-host and x-rapidapi-key, you will get from above-given links.
These APIs are free to use.

Figure 8.4.5 App Look

Figure 8.4.6 Total.dart File

44
 Figure 8.4.7 Total.dart File

Figure 8.4.8 Total response.dart File

45
8.5 APP SCREENSHOTS

App Working

46
 9. CONCLUSION

During the process of overcoming the problem of cross-development, the analysis through code

comparison states the result that it is possible to code in one language which is a dart and develop

the application for both Android and iOS operating systems. The syntax of the dart is easier than

java or swift which are used for mobile application development.

The execution speed of the program is faster in a flutter as compared to the other development

software, which means when a program is running, it takes less than to work. Dart also has a very

simple programming structure, which is easy to learn, read, and understand.

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 applications in the near future.

47
 10. REFERENCES

[1] Mascot, B., 2016. Career: Bit Mascot. [website] Bit Mascot. Available at:

<https://www.bitmascot.com/top-10-challenges-faced-mobile-app-developers/>.

[2] Technologies, T., 2019. Why Should Android App Developers Consider Flutter. [Blog] Think

<https://www.tftus.com/blog/why-mostly-android-developer-consider-flutter-app-development/>.

[3] Kumar, D., 2019. “Flutter” To Build Ios & Android Apps. [Blog] Medium. Available at:

<https://levelup.gitconnected.com/flutter-to-build-ios-android-apps-f8786d6fe987>,.

[4] Dart dev. n.d. Dart Programming Language. [website] Available at: <https://dart.dev/>.

[5] Martin, S., 2019. Why Flutter Has Become The Best Choice To Develop A Startup Mobile App

<https://medium.com/flutter-community/why-flutter-has-become-the-best-choice-to-develop-a-start

up-mobile-app-in-2020-5785ea153b13#:~:text=Firstly%2C%20Flutter%20allows%20developers%

20to,to%20work%20on%20 multiple%20 interfaces.> .

[6] Sharma, A., 2020. Kotlin Vs Flutter: Who Will Rule The Cross-Platform App Market?. [blog]

<https://appinventiv.com/blog/kotlin-vs-flutter-cross-platform-app-development/>.

48