Flutter

Chapter two
Introduction to flutter

Lecturer [Link] Abshir Afrah

2
The origin of Flutter

3
Comparing Flutter to
existing frameworks

4
Other cross-platform
approaches

5
Why use flutter?
2
What is Flutter?
Flutter is a application development framework from
Google for creating cross-platform mobile applications (in
iOS and Android). As mentioned on the official website
(https:// [Link]/), it aims to make the development as
easy, quick, and productive as possible. Things such as
Hot Reload, a vast widget catalog, very good
performance, and a solid community contribute to
meeting that objective and makes Flutter a pretty good
framework.

3
What is Dart?
Dart is a client-optimized programming language
developed by Google and launched in the year 2011.
The programming language syntax is similar to Java &
C++ and you can use it to build mobile, desktop,
server, and web applications. The Dart code compiles to
native or JavaScript in order to run in the browser.

4
Why Flutter uses
Dart?
Flutter uses Dart as Dart allows Flutter to avoid the need for
a separate declarative layout language like JSX and XML. The
layout of Dart is declarative and programmatic, and it makes
it easy for developers to read and visualize it very quickly
and effortlessly. In addition to that, it makes it easy for
Flutter to provide additional tooling as the layout is in one
language and commonplace.
Most of the Dart features are similar to that of static and
dynamic languages, and it makes it easy for developers to
learn and understand Dart easily and quickly.
5
6
The origin of Flutter
The origin of Flutter was similar to that of a lot of famous
software. It was developed at Google. Initially, Flutter was an
experiment, as the developers at Google were trying to
remove a few compatibility supports from Chrome, to try to
make it run smoother. After a few weeks, and after many of
the compatibility supports were removed, the developers
found that they had something that rendered 20 times faster
than Chrome did and saw that it had the potential to be
something great.
Google had created a layered framework that communicated
directly with the CPU and the GPU in order to allow the 7
What is a widget?
Everything in Flutter can be created using widgets.
Orientation, layout, opacity, animation... everything is just a
widget. It is the main feature of Flutter, and everything from
a simple button to an animation or gesture is done using
widgets. And this is great because it allows the users to
choose composition over inheritance, making the
construction of an app as simple as building a Lego tower. All
you do is just pick up widgets and put them together to
create an application.

8
Cont..
There are a number of fundamental widgets that will help
you build an application with Flutter. All these widgets are
cataloged in the Flutter Widget Catalog. Because everything
in Flutter is made up of widgets, the more you learn how to
use, create, and compose them, the better and faster you
become at using Flutter. We will be going into much more
detail about widgets and the widget catalog in Chapter 3,
Widgets, Widgets Everywhere.

9
Comparing Flutter to
existing frameworks
When speaking of mobile application development, there
are many different approaches that we can find, but, in the
end, everything comes down to either a native or a cross
platform approach. Let's see how different approaches look
and work when compared to Flutter. We will first take a look
at the native platforms, and then, before looking at the
cross-platform approach, we will take a look at the WebView
system, and finally we will see where Flutter fits into this
mix
10
Native platforms
Native frameworks such as Android and iOS SDKs
are rock solid. They are the most stable choice for
mobile application development. They have lots of
available apps that are deeply tested and have a
large community and openly available tutorials.
The following diagram displays the working of
native mobile application development
frameworks:

11
12
drawback
As we can see in the preceding diagram, the app in this
framework talks directly to the system. This makes the native
framework the most powerful choice in terms of functionality.
However, it does have a DRAWBACK: you need to learn two
different languages, Kotlin or Java for Android, Obj-C or Swift for
iOS and the SDKs. These languages are used to write two different
apps with the same functionalities. Every modification must be
duplicated on both platforms, and the process might not be that
smooth. It is not a good choice for a small team or for someone
who needs speed in their development process.

13
Other cross-platform
approaches
Let's take an example of another cross-
platform approach to see what could be the
shortcomings of it. Xamarin is the Windows
answer to cross-platform development,
which in my opinion is not so convenient,
especially in terms of productivity and
compiling time.
14
Flutter's approach
Flutter performs much better in comparison to other
solutions, because the application is compiled AOT
(Ahead Of Time) instead of JIT (Just In Time) like the
JavaScript solutions. It also eliminates the concept of
the bridge and does not rely on the OEM platform. It
does allow custom components to use all the pixels in
the screen. What does this mean? It basically means
that the app displays the same on every version of
Android and iOS
15
Why use Flutter?
Flutter is a good option for cross-platform development
due to its many features and a few things that it does
differently than other approaches, as we have seen. It
is not only a good option for the developers, but also
for users and designers; let's take a look at why this is:
● For users, Flutter makes attractive user interfaces
for apps, and this enhances the usage of these apps
by the users.

16
Cont..
● For developers, Flutter makes it easy for the new
developers to enter the world of building mobile apps, as it
is very easy to build apps with Flutter. Flutter not only
reduces the time for development of applications, but it also
reduces the cost and complexity of creating an application.
● For designers using Flutter, an application can be created
using the original design that was conceived for the
application, without compromising on any aspect of it.
Therefore, the original vision of the designer is not changed
at the time of development

17
Installing Flutter
Let's get started with our main application and get Flutter
installed onto your system. Depending on the operating
system you are using, you can follow the given steps to
install Flutter on your system. We will take a look at installing
Flutter on Windows, Mac, and Linux

18
Installing Flutter on
Windows
1. Download Flutter from
[Link]
releases/stable/windows/flutter_windows_v1.[Link].
2. Extract the downloaded file and place it in your desired
folder on your system.
3. Locate and run flutter_console.bat to start the installation.

19
Installing Flutter on
Mac
1. Download Flutter for Mac from
[Link]
infra/releases/stable/macos/flutter_macos_v1.[Link].
2. Extract the downloaded file and place it in your desired folder on your
system using the $ export PATH=`pwd`/flutter/bin:$PATH command.
3. Run $ flutter doctor to verify that everything is set up in the right way.
4. We then need to download and set up [Link]; you can download it from
[Link] We will use the following commands:
bash, curl, git 2.x, mkdir, rm, unzip, and which.
5. Finally, we will need to download and install Git: [Link]
download/mac

20
Creating First
Project

21
Thanks!
Any questions?
You can find me at:
● [Link]

22