National University of Loja

School of Energy, Industries and

Non-Renewable Natural Resources

Career:
Electromechanical Engineering

Subject:
Programming Language

Creation of mobile applications using Flutter

Authors:
Jordy Alexander Perero Vargas
Bladimir Israel Gonzalez Soto

Teacher:
Ing. Edwin Bladimir Paccha Herrera

Date:
December 2023
´Index

1. Introductionon
´ 3

2. Abstract 4

3. Generalities from Flutter. 5

3.1. Concept the History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2. Applications created with FLUTTER.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Advantages Disadvantages of using Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4. Anánalysis of popularity: The use of Flutter compared to its competitors in the market of
application development. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

4. Programmingon
´ through the Dart language 7
4.1. What What is the Dart language and what is its relationẃith Flutter. . . . . . . . . . . . . . . . . . . . . 7
4.2. Types of data and its functionón.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.3. Sentences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4. Functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4.1. Qué it is a functionón. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4.2. Anatom´ıa of the functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.4.3. Functions Arrow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.4.4. Functions aónimas:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.4.5. Body of the function: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.5. Classes and objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.5.1. Definitionsón from a class: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.5.2. Creationón of objects: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.5.3. Inheritance:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . .
4.5.4. Encapsulationón. . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . .
4.6. Example of application developmentón mḿobile app using Flutter. . . . . . . . . . . . 11
. . . . .
Citations Bibliographya
fias. . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . .

´Index of figures
1. Percentage usage diagram of Flutter compared to its competitors. . . . . . . . . . . . . . 7

2. Class example. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3. Example of class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1
 4. Example of a class. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . .

5. Class example. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. . . . . . . . . . . . . .

´Table Index
1. Advantages of using Flutter.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2. Data types in Dart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2
1. Introduction

Flutter is an open-source cross-platform application development framework developed by

sponsored by Google.
You can create customizable user interfaces using widgets that adapt to different
platforms and screen sizes. It also provides tools to see changes in the code almost in real time.
instant, without losing the application state.

This allows you to create applications for mobile devices, web pages, and desktop with a single base.
of code. Use a programming language Dart, object-oriented and easy to use.
Dart is a programming language used for general purposes. Based on classes and interfaces.
OOP. Executable directly from the browser, and, in case it is running in a
server, the process is carried out from JavaScript through the Dart2js transpiler.

Some examples of the applications created with this platform are:

APP Xianyu (Alibaba).- The e-commerce giant uses Flutter for the development of its
development of mobile apps.

Google's subapplications.-Google uses Flutter to create its functions and applications for use.

Reflectly.- It is an application that simulates being a personal diary, it includes an AI to help the
users to reflect on their thoughts and feelings.

3
2. Abstract

Flutter is an open source cross-platform application development framework developed and supported by
Google.
You can create customizable user interfaces, using widgets that adapt to different platforms and screens.
sizes. It also offers tools to view code changes almost instantly. instantly, without losing the state of the
application.

This allows you to create applications for mobile devices, web pages, and desktops with a single codebase.
It uses an easy-to-use, object-oriented Dart programming language.
Dart is a programming language used for general purposes, based on classes and interfaces or OOP.
Executable directly from the browser, and, if it is running on a server, the process is carried out from
JavaScript using the Dart2js transcompiler.

Some examples of applications created with this platform are:

APP Xianyu (Alibaba).-The ecommerce giant uses Flutter to carry out its mobile APP developments.

Google sub-applications.- Google uses Flutter to create its functions and applications.

Reflectly.-It is an application that simulates being a personal diary, it includes an AI to help users
reflect on their thoughts and feelings.

4
3. Generalities of Flutter.

3.1. Concept and History

Flutter is an open-source framework belonging to Google that allows you to create applications for
Android, iOS, and web with a single codebase. It originated in 2015 under the name Sky, which was
a software development kit project (SDK, for its acronym in English). But it obtained the
Flutter was named in the year 2018, and version 3 was released on October 12, 2022.

It was launched on the Dart Developer Summit platform that same year, claiming that it was capable of
render at 120 frames per second.

Make the most of the operating system's performance where it runs, thanks to the capable Dart language.
to be directly compiled for the operating systems of any device.

Before the existence of this language, developers needed to use different technologies and languages.
for Android and iOS, which made the creation and maintenance of mobile applications costly.
To solve this problem, multiplatform solutions such as Phonegap, Cordova, Ionic, or React were created.
Native, which coexist with Flutter in mobile application development.

3.2. Applications created with FLUTTER.

Flutter has been gaining popularity due to the ease of allowing developers to write a
code that can be used on multiple platforms, including Windows, Mac, Linux, Google Fuchsia and
the web pages. Here is a list of some applications created with Flutter.

1. Alibaba and its APP Xianyu: From mainland China, the great giant of electronic commerce is
using Flutter for the development of its mobile apps. Xianyu (Idle Fish), allows
users enjoy guaranteed transactions by Alipay without the need to open the store, and the
Sellers can publish their products in just 30 seconds.

[Link] Road Studios This APP allows artists from Abbey Road's Topline to record their
songs, among its functions it allows sharing files, singing over other songs by others
artists, import songs, lyrics, etc. I used Flutter to develop your Topline application,
which allows artists to record their musical ideas and lyrics on the go.

[Link] like McDonalds, Wayfair, Fermilab, Stanford and many more use this
platforms, which they use to solve common challenges of construction, implementation and
enterprise application support.

5
 4. Google and its Google Ads APP. It is considered a reliable source of income for the browser.
an online advertising platform, allows advertisers to pay per click or per impression of their
ads to promote your services through search results.

5. Bayerische Motoren Werke AG In October 2019, a select group of engineers in Munich

to discuss how it advances with Flutter. They realized that Flutter would allow them to adopt a
more flexible organizational structure based on domains.

6. Reflectly: Despite only having two engineers, they managed to create the application and launch it.
market for iOS like Android in just 2 and a half months, thanks to the advantages it provides.
Framework.

These are some examples of applications created with the Flutter Framework.

3.3. Advantages and Disadvantages of Using Flutter

Table 1: Advantages and Disadvantages of Using Flutter.

Advantages Disadvantages
Immediate responses. Learn the Dart language.
Native performance. Very young framework.
Reduction of development time. It is focused only on mobile
Improved performance
Lower development costs

[]

3.4. Analysis of Popularity: The Use of Flutter Compared to Its Competitors

in the application development market.

Since its inception, Flutter has been well received in the programming market, this can be seen in the
the adoption that Flutter had by large renowned companies such as Google and Alibaba, in addition to
to have a growing community in the industry as well as in technology for application development
multiplatform, which has contributed to its acceptance in the market. In the following diagram we will be able to
an approximate percentage of people using Flutter compared to its competitors.

6
 Figure [Link] usage diagram of Flutter compared to its competitors

4. Programming using the Dart language

4.1. What is the Dart language and what is its relationship with Flutter.
Dart is a general-purpose programming language created by Google in 2011, using a format of
Similar code programming in C can be used for the construction of desktop applications,
web pages or online services.

The relationship between Flutter and Dart is very close, as Dart was specifically designed to address the
challenges of modern application development. With its focus on simplicity, performance and
productivity, Dart provides developers with a solid foundation to work on projects of
Flutter. The clear and concise syntax of Dart, along with an optional static typing system, contributes to
the creation of clean and maintainable code.

The availability of established libraries, tools, and learning resources has facilitated the
adaptation and expansion of Flutter and Dart in the application development industry.

In conclusion, this relationship is a clear example of how the combination of a development framework
Innovative and efficient programming language can enhance the creation of modern applications
high quality.

7
4.2. Data types and their function.
Table 2: Data types in Dart.

Data types General description.

Null It represents the absence of value.

int Integers.

double Floating point numbers.

String String chains.

List Lists or data arrays.

Set Unordered collections of unique items.

Map Associations of keys and values.

Runes UNICODE points of a string.

Symbol Represents an operator or identifier.

4.3. Sentences
1. Conditional statements: Supports conditional statements such as if, else if, else.
[Link] statements: Supports for, while, and do-while loops
3. Control flow statements: include the break and continue statements to control the
flow within loops.
[Link] statements: This includes the try, catch, finally, throw statements for
exception handling.
5. Declaration Statements: Supports declaration statements to define variables, functions,
classes, etc.

4.4. Functions.
4.4.1. What is a function?
A function is a block of code that must be organized, perform a single task, and must be
related to the class we are working on, they should also be mostly reusable, this
it will reduce the amount of code that is written.

4.4.2. Anatomy of functions.

They are usually created with the syntax that will be presented next:
Where:
You void the one that returns the function, it usually should return a numerical value, but in this case it does not.
It will have, that's why the Void function is used.

8
printName function, we place (String name) inside parentheses, to explain the type of
parameter that will be received by the function and its name, which are variables that are available inside
from the function.

[Link] Functions:
They can only have one line of code, and instead of a parenthesis, it will have an arrow =?. This type of
Functions help us keep our functions small and readable.

4.4.4. Anonymous functions:

This function is called at the moment and passed to other functions as if it were a parameter.

4.4.5. Body of the function:

The body of the function, the logic we want it to follow.

4.5. Classes and objects.

4.5.1. Definition of a class:
To create a class in Dart, you can use the keyword class, followed by the name of the class. Here is
a simple example: In this example, the Person class has two properties (name and age), a constructor

Figure [Link] example.

that initializes those properties, and a method (greet) that prints a greeting.

4.5.2. Creation of objects:

To create an object of a class, simply use the class constructor. Here is an example: In this

Figure [Link] example.

For example, a person object is created from the Person class and then the greet method of the object is called.

9
4.5.3. Inheritance:
Dart also allows inheritance. You can extend an existing class to create a new class that
here her properties and methods. Here is an example: In this example, the Student class inherits from the

Figure [Link] example.

Create a Person class and add a new property (university) and a new method (study).

4.5.4. Encapsulation:
Dart allows encapsulation to protect the members of a class. You can use the underscore to
make a property or method private within the class. For example: In this example, '[Link]

Figure [Link] example.

private and is only accessible within the Animal class. These are just basic concepts. Dart offers many
more object-oriented features, such as interfaces, mixins, and more. You can explore the documentation
Dart official to get more details and examples: Dart Documentation

10
4.6. Example of developing a mobile application using Flutter.
1. Flutter Installation: You can download Flutter from the official Flutter website, it is quite
simple, and the page provides detailed instructions to carry out the process in different
operating systems.
2. Configuration of a development environment: You can use any text editor or environment of
Integrated development environments (IDEs) that have been most used to date include Android Studio, Visual
CodeyIntelliJ IDEA Studio
3. Creation of a Flutter application: Open your text editor or IDE and create a new project. This
You will create a basic directory structure for your application and generate some code files.
from the start.

4. User interface design: The next step is to design the user interface (UI) of your
application, uses a language called 'Flutter Widgets' to build the application's UI. The
Widgets are building blocks of the user interface and can be combined to create pairs.
create complex and beautiful designs. You can use the predefined widgets of Flutter or create your own
customized widgets.
5. Add functionality: The next step is to add functionality to the application, it can be
make by writing the following code.
6. Testing and debugging the application: Before publishing your application, you must test it to ensure
that it works correctly and that there are no errors or problems. Flutter provides tools
of integrated testing and debugging that you can use to test and debug your application.
7. Application publication: Once you have tested and debugged your application, the next step is
publish it in an app store. You can publish your application in the app store of
Google Play for Android devices and in the App Store for iOS devices.

11
4.7. Bibliographic References
1. A. Quickly learning Flutter: 65 application examples
2. 'Flutter and Dart for developing mobile applications in Spanish'
3. Creation of a Flutter application:
Flutter for the Web
5. Course to create my first web page with Flutter
DART Tutorial - IONOS
7. "Programming Language Dart - IONOS"
8. ("[Link] :text=Uses ¨
9. "[Link]
10. "[Link]

12