Mobile Applications

(Development Concepts & Introduction)

Chapter 1

Dr. Mohamad Al-Dabbagh

1
 Outline
− General Introduction
− Mobile Development Concepts
− SDK
− API
− IDE
− Introduction to Flutter
− Flutter Architecture
− Advantages & disadvantages
q “Weolcome to Mobile Course” app

Dr. Mohamad Aldabagh 2

 Objectives
v What you will learn in chapter 1:
Ø What are mobile development concepts
Ø What is Flutter

Ø What is Flutter Architecture

Ø How Flutter and Dart work together

Ø What Flutter widget is

Ø What type of Flutter widgets are available

Ø What are Advantages and disadvantages of the Flutter

q How Create “Welcome to Mobile Course” app.

Dr. Mohamad Aldabagh 3

 Introduction
Year Name Services Size (cm) Weight
(Kg)
1983 Motorola DynaTAC Calling 30 1.13
8000X (called Brick)
1989 Motorola Microtac Calling 23 0.35
9800X
1992 Motorola International Calling (GSM) 19.5 0.5
3200
1993 Nokia 1011 Calling (GSM) 19.5 0.4
1994 IBM Simon Calling 20 0.5
1996 Motorola Strartac Calling 9.4 0.088
1996 Nokia 8810 Calling 14.4 0.145
2021 iPhone and Samsung What you see in them?

4
Dr. Mohamad Aldabagh
 Introduction
− They are applications that specially developed for handy devices,
such as mobiles, tablets, and iPad.
− The differences of applications are:
− Operating systems (OS).
− Complexity and simplicity
− Free and Paid App
− Used memory space.
− Graphical User Interface (GUI)

− There are a lot of mobile platform:

Dr. Mohamad Aldabagh 5

 Introduction
v What is Android?
− Android: is a mobile operating system developed by Google,
based on a modified version of the Linux kernel and other open
source software and designed primarily for touchscreen mobile
devices such as smartphones and tablets.

v What is iOS?
− iPhone OS: is a mobile operating system created and developed by Apple
exclusively for its hardware. It is the world's second-most widely installed
mobile operating system, after Android. It is the basis for three other operating
systems made by Apple: iPadOS, tvOS, and watchOS.

Dr. Mohamad Aldabagh 6

 Introduction
v What is Native App?
− A native app is one that is installed directly onto the smartphone and can work,
in most cases, with no internet connectivity depending on the nature of the app.
− Native apps are installed Google Play or Apple’s App Store.
− Features:
• Faster
• Can access to specific hardware (GPS)
• Can use device notification system.
v What is Web App?
− Web apps are not real applications; they are websites that, in
many ways, look and feel like native applications, but are not
implemented as such.
− They are run by a browser and typically written in HTML.
− Users first access them as they would access any web page: they
navigate to a special URL
Dr. Mohamad Aldabagh 7
 Introduction
v What is Hybrid App?
− Hybrid apps are part native apps, part web apps
− Like native apps, they live in an app store and can take advantage of some
device features available.
− Like web apps, they rely on HTML being rendered in a browser, with the caveat
that the browser is embedded within the app.
− Hybrid apps are also popular because …
− using HTML in Web UI views

Dr. Mohamad Aldabagh 8

 Mobile Development Concepts
v What is SDK?
− SDK (Software Development Kit): is a collection of software development
tools in one installable package. They facilitate the creation of applications
by having a compiler, debugger and perhaps a software framework.

− They are normally specific to a hardware platform and

operating system combination

− Some SDKs are required for developing a platform-specific app

− Android app (Java) è Java Development Kit

− iOS app è iOS SDK

Dr. Mohamad Aldabagh 9

 Mobile Development Concepts
v What is Flutter SDK?
− has the packages and command-line tools that you need to
develop Flutter apps across platforms.

v What’s in the Flutter SDK?

− Dart SDK, and Dart DevTools for testing, debugging, and profiling your app
− 2D rendering engine with excellent support for text
− Modern react-style framework
− Rich set of widgets implementing Material Design and iOS styles
− APIs for unit and integration tests
− Interop and plugin APIs to connect to the system and 3rd-party SDKs
− Headless test runner for running tests on Windows, Linux, and Mac
− flutter and dart command-line tools for creating, building, testing, and compiling your apps
Dr. Mohamad Aldabagh 10
 Mobile Development Concepts
v What is API?
− API (Application Programming Interface): is a
connection between computers or between computer
programs. It is a type of software interface, offering a
service to other pieces of software.
− Enables companies to open up their applications’ data and functionality to
external third-party developers.
− An SDK can take the form of APIs in the form of on-device libraries of
reusable functions used to interface to a particular programming language.
− Ex:

Dr. Mohamad Aldabagh 11

 Mobile Development Concepts
v What is IDE?
− IDE (Integrated Development Environment): is a software
application that provides comprehensive facilities to
computer programmers for software development.
− An IDE normally consists of at least a source code editor, build automation
tools and a debugger.
− Best IDE for Flutter:

− Android Studio is an IDE that will take care of all the complexities of compiling
our code and linking with the Flutter API. We can do everything we need inside
this single application,

Dr. Mohamad Aldabagh 12

 Flutter

Dr. Mohamad Aldabagh 13

 Flutter
v What is a Flutter?
− Flutter is Google’s portable UI framework for building modern, native,
and reactive applications for iOS and Android with one codebase only.
− Desktop, Web, embedded devices.
− Flutter is an open-source project.
− Flutter uses the Skia 2D rendering engine
that works with different types of hardware
and software platforms.
− Flutter is a framework for Dart programming language
− Dart is ahead-of-time (AOT) compiled to native code.
− Dart is also just-in-time (JIT) compiled

Dr. Mohamad Aldabagh 14

 Flutter
v What is a Flutter?

Flutter
Framework
Dart

Flutter
SDK

Flutter
Dr. Mohamad Aldabagh 15
 Flutter
v What is a Flutter?

Dr. Mohamad Aldabagh 16

 Flutter Architecture
− Flutter uses Dart to create your user interface.
− Flutter builds the UI to reflect the state of the app.

− Flutter is fast, 60 & 120 fps for capable devices.

− Flutter uses widgets to create the user interface

− Flutter uses its own rendering engine to draw widgets.

widgets
Dr. Mohamad Aldabagh 17
 Flutter Architecture
v Widgets

18
Dr. Mohamad Aldabagh
 Flutter Architecture
v What are widgets?
− Widgets are the building blocks of a Flutter app
− Each widget is an immutable declaration of
the user interface
− Widget Tree.

Dr. Mohamad Aldabagh 19

 Flutter Architecture
v How Flutter use Widgets?
− Flutter uses the widget as the configuration
to build each element
− The element is the widget that is mounted
on the screen
− Element Tree

Dr. Mohamad Aldabagh 20

 Flutter Architecture
v Widget Lifecycle
− Main types:
1. StatelessWidget
2. StatefulWidget
− Each stateless or stateful widget has a build method with a BuildContext
− handles the location of the widget in the widget tree
− The stateless widget is declared with one class.
− The stateful widget is declared with two classes.
− The build method of the stateless widget can be called
• First time the widget is created.
• widget’s parent changes.
• InheritedWidget has changed
Dr. Mohamad Aldabagh 21
 Flutter Architecture
v Widget Lifecycle
− This type of widget has a mutable state that
can change over time
− The StatefulWidget class is rebuilt when the
widget’s configuration changes
− the State class can persist, enhancing performance

Dr. Mohamad Aldabagh 22

 Flutter Architecture

Dr. Mohamad Aldabagh 23

 Flutter Architecture
− How Flutter Work?

Dr. Mohamad Aldabagh 24

 Flutter Architecture
− How Flutter Work?

Dr. Mohamad Aldabagh 25

 Flutter Architecture
v Advantages of Flutter:

1. One codebase

2. High Performance

3. Hot Reload/ Hot Restart

4. Flutter is open-source

5. Flutter uses the Dart programming language.

Dr. Mohamad Aldabagh 26

 Flutter Architecture
v Advantages of Flutter:

1. Apps with specific native SDK needs

2. Size of App

3. Games and audio

4. Certain platforms

Dr. Mohamad Aldabagh 27

 Welcome To Mobile Course
v What you will learn in this App:
• Flutter code structure
• Flutter properties and widgets
• Learn about some basic widgets
• Add or import an image to the app
• Change the icon of the app.

Dr. Mohamad Aldabagh 28

 Welcome To Mobile Course
v Running First Flutter App

Dr. Mohamad Aldabagh 29

 Welcome To Mobile Course
v Flutter code structure
− Idea Folder
− Android & iOS
− lib
− Pubspec.yaml
− External Libraries

− Hot reload − Hot restart

− Quick & easy − destroys State value to default
− Add features − fully compiled app
− Fix bugs − Rebuild the widget tree.
Dr. Mohamad Aldabagh − More Time 30
 Welcome To Mobile Course
v Flutter code structure
− main.dart file:
• Do not rename
• special function
• Firstly executed
• Automatically call
• No arguments

− The entire dart code will be compiled

and bundled with the android or iOS
code.
− Everything in Flutter is a widget
Dr. Mohamad Aldabagh 31
 Welcome To Mobile Course
v Flutter code structure
− Flutter uses widgets to create the user interface (UI), widgets are basically
building blocks
− Widgets are not just about the visuals (UI), they also contain logic.
− Dart is an object oriented programming language, which means
everything is an object.
− Class = Widget

− Class starts with keyword “Class”

and name will come after it.

Dr. Mohamad Aldabagh 32

 Welcome To Mobile Course
v Flutter code structure

Dr. Mohamad Aldabagh 33

 Welcome To Mobile Course
v Flutter code structure

Dr. Mohamad Aldabagh 34

 Welcome To Mobile Course
v Flutter code structure

Dr. Mohamad Aldabagh 35

 Welcome To Mobile Course
v Some Basic widgets
Ø Stateless and Stateful Widgets
− Flutter widgets are the building blocks for designing the UI.
− Widgets are built using a modern react-style framework.
− UI is created by nesting widgets together into a widget tree.
− Flutter manages the relationship between the state and the UI.

− Stateless VS Stateful

Dr. Mohamad Aldabagh 36

 Welcome To Mobile Course
v Some Basic widgets
Ø Stateless and Stateful Widgets
− StatefulWidget requiring two classes

− setState() method

− StatefulWidget class: This creates an instance of the State class.

− State class: This is for data that can be read synchronously when the
widget is built and might change over time.

− setState(): From within the State class, you make a call to the setState()
method to refresh changed data, telling the framework that the widget
should redraw because the state has changed.

Dr. Mohamad Aldabagh 37

 Welcome To Mobile Course
v Some Basic widgets
Ø Stateless and Stateful Widgets
− Need build method
− Return something / call widget

Dr. Mohamad Aldabagh 38

 Welcome To Mobile Course
v Some Basic widgets
Ø MaterialApp Widget
− Google’s Material Design library
− Import flutter package

Ø CupertinoApp Widget (iOS)

Dr. Mohamad Aldabagh 39

 Welcome To Mobile Course
v Some Basic widgets
Ø Scaffold Widget
− Implements the basic material
design visual layout structure.
− It allowing the use of Flutter’s
Material Components widgets
− This class provides APIs for
showing drawers and bottom sheets.
− This class provides APIs for
showing drawers and bottom sheets.
Ø CupertinoPageScaffold Widget

Ø CupertinoTabScaffold Widget

Dr. Mohamad Aldabagh 40

 Welcome To Mobile Course
v Some Basic widgets
Ø AppBar Widget
− which is a horizontal bar typically shown at the top of an app using the
appBar property.
Ø Text Widget
− The Text widget is a great way to
display labels on the screen.
Ø TextStyle Widget
− An opaque object that determines the
size, position, and rendering of text
Ø FontWeight Widget
− The thickness of the glyphs used to
draw the text
Ø Colors Widget
− represent Material design's color palette
Dr. Mohamad Aldabagh 41
 Welcome To Mobile Course
v Some Basic widgets
Ø Colors Widget
− color palette.
Ø Center Widget
− A widget that centers its child within
itself. (child)
Ø Image Widget
− A widget that displays an image. Support JPEG, PNG, GIF, Animated
GIF, WebP, Animated WebP, BMP, and WBMP.
Ø NetworkImage Widget
− Fetches the given URL from the network, associating it with the given
scale..
Ø AssetImage Widget
− Fetches an image from an AssetBundle (pubspec.yaml file)
Dr. Mohamad Aldabagh 42
 Welcome To Mobile Course
v Some Basic widgets
Ø Column Widget
− A widget that displays its children in a vertical array.
Ø Row Widget
− A widget that displays its children in a horizontal array.

Dr. Mohamad Aldabagh 43

 Welcome To Mobile Course
v Add or import an image to the app.
− Pubspec file: Every pub package needs some
metadata so it can specify its dependencies.

− Pub packages that are shared with others also

need to provide some other information so
users can discover them

− All of this metadata goes in the package’s pubspec: a file named

pubspec.yaml that’s written in the YAML language

Dr. Mohamad Aldabagh 44

 Welcome To Mobile Course
v Add or import an image to the app.
− Sample:

Dr. Mohamad Aldabagh 45

 Welcome To Mobile Course
v Add or import an image to the app.

Dr. Mohamad Aldabagh 46

 Welcome To Mobile Course
v Change the icon of the app.
− App icon

Dr. Mohamad Aldabagh 47

 Questions & Answers

Dr. Mohamad Aldabagh 49

Dr. Mohamad Aldabagh 50