Mobile Application Development

Lecture 2
Introduction to Flutter and Dart
Dr. Hasan Ali Khattak
SEECS, NUST

1
What is Flutter ?
● Flutter is an open-source UI software development kit created by Google.
● It is used to develop applications for Android, iOS, Windows, Mac, Linux,
Google Fuchsia and the web.
● Flutter uses Dart language.

2
Mobile Development Approaches

3
Native App Approach

4
Web App Approach
● Building web based apps that run inside the
browser
● Good for single or infrequently used
services
● Advantages
○ No need to install apps
○ Does not require memory space
○ Does not install adware like some apps do
● Limitations
○ Slower to load
○ Slower execution due to non-compiled code
○ Graphical limitations, running inside browser

5
Hybrid Approach

6
Hybrid Approach (2)
● Apache Cordova
○ Cordova wraps HTML/JavaScript app into a native
container
○ Can access the device functions of several platforms
○ These functions are exposed via a unified JavaScript
API, allowing to write one set of code
○ Was formerly called PhoneGap
● Ionic
○ Open-source SDK for hybrid mobile app development
○ a set of Web Components, allowing the user to choose
any user interface framework, such as Angular, React
or Vue.js.
○ apps can be built with Web technologies and then
distributed through native app stores
7
What is Flutter, in this context?
● Flutter uses hybrid approach
● Flutter is Google’s UI toolkit for buildin natively compiled
● applications for mobile, web, and desktop
● A single codebase is used

8
Advantages of Flutter
● Speed and performance
○ Fast, smooth, predictable
● Flexibility
○ Customization, control
● Native look and feel
○ Familiarity, ease of use
● Less time to market
○ Rapid development, free

9
Widgets Look and Feel

10
Advantages of Flutter (compared to other hybrid approaches)

● Compiles to native code (ARM binary code)

● No reliance on OEM widgets
● No bridge needed
● Comparison with React Native
○ Flutter has its own widget drawing mechanism
○ Every pixel is drawing by flutter without external reliance
○ Learning from scratch (no previous knowledge of frameworks required)

11
Flutter Rendering Speed
● Brings the power of a game engine to user
experience development
● 60 frames per second
● GPU accelerated
● Compiled to native machine code

12
Productivity Advantages
● Compilation and loading to mobile device - on the go
● Sub-second reload times
● Iterate rapidly on features
● Single codebase for faster collaboration

13
Flutter Architecture
● Everything in green colour
can be customized
● Skia is a graphics library
for shapes,
transformations etc.

14
Flutter App and Device Interaction

15
Widgets in Flutter
● Everything in flutter consist
of Widgets including but not
limited to
○ visible Screen(s),
○ text(s),
○ Button(s),
○ Material Design(s),
○ Application Bar(s)
○ as well as invisible
Container(s) and Layout(s)

16
In Flutter, Everything is a Widget

17
Stateful Widget vs. Stateless Widget
● A single StatelessWidget can build in many
different build contexts
● A StatefulWidget creates a new state object
for each BuildContext

18
Stateless Widget
● We create a Stateless widget by extending our class from StatelessWidget
● A bare minimum implementation below

19
Stateless Widget (2)
● Stateless Widget are immutable once drawn
● The build(...) function of the StateLessWidget is called only ONCE
● No amount of changes in any Variable(s), Value(s) or Event(s) can call it
again.
● To redraw the StatelessWidget, we need to create a new instance of
theWidget.

20
Stateful Widget
● Stateful Widgets are
mutable and can be
drawn multiple times
within its lifetime

21
Stateful Widget (2)

22
Async User Interface (UI)

23
App Life Cycle of States
● OnPause when
activity is still visible
in background
● OnStop when
activity is no longer
visible

24
App Layout

25
Dialogs, Alerts and Panels

26
Rows and Columns

27
Rows and Columns (2)

28
Comparison with HTML/CSS

29
Flutter Commands
● flutter doctor
○ Checks the environment and displays a report to the terminal window
● Flutter upgrade
○ Upgrades both flutter SDK and the installed packages
● pubspec.yaml
○ name: flutter project
description: a project using Firebase Auth

dependencies:
flutter:
sdk: flutter
firebase_auth: “^0.2.5”

30
Flutter Commands (2)
Hot reload
○ Injecting updated
source code files into
running dart VM
○ Stateful - app state is
retained after reload
○ Quickly iterate on a
screen deeply nested
in the app
○ No need to start
execution from
scratch
31
Challenges Dart tries to resolve
● Large scale application development in Java required a lot of effort
● Javascript lacks structuring mechanisms - tools, editors, code analyzers
● Ways in which Javascript community has tried to solve the problem
○ Javascript frameworks and libraries - jQuery, Angular, Bootstrap
○ Supersets of Javascript that compile to Javascript - CoffeeScript, TypeScript
○ Completely different languages that compile to Javascript - GWS (Java to JS), Dart

32
What is Dart?
● Made by Google
● Open source, scalable programming language
● Client-optimized language for fast apps on any platform
○ Web
○ Desktop
○ Mobile
○ Embedded
● Language and libraries
● Packages manager
● Virtual machine
● Compile to Javascript (dart2js)

33
Properties of Dart
● Class based with C style syntax
● Purely object oriented, so even simple data types (int, float) are objects
● Supports static typing and type checks
● Supports single inheritance
● Heavily influenced by Javascript, Java and C#
○ Therefore, familiar syntax for programmers of these languages

34
Dart Data Types

35
Examples of Dart Syntax
● Hello World

void main() {
print('Hello, World!');
}

36
Examples of Dart Syntax (2)
● Variable declarations

var name = 'Voyager I';

var year = 1977;
var antennaDiameter = 3.7;
var flybyObjects = ['Jupiter', 'Saturn', 'Uranus',
'Neptune'];
var image = {
'tags': ['saturn'],
'url': '//path/to/saturn.jpg'
};

37
Examples of Dart Syntax (3)
if (year >= 2001) {
● Control flow statements print('21st century');
} else if (year >= 1901) {
print('20th century');
}

for (var object in flybyObjects) {

print(object);
}

for (int month = 1; month <= 12; month++) {

print(month);
}

while (year < 2016) {

year += 1;
}
38