2023 Lecture Notes of Cross Platform

Mobile Application Development

Cross Platform Mobile

Application Development

Introduction

Prof. (Dr.) Dharmendra Bhatti 1

Mobile OS Market Share

Prof. (Dr.) Dharmendra Bhatti 2

Prof. (Dr.) Dharmendra Bhatti 1

2023 Lecture Notes of Cross Platform
Mobile Application Development

Cross Platform Mobile Application

Development

lMore users equals a larger revenue base

lTwo Options:
¡Develop separate apps for each platform
¡Implement a cross-platform mobile application

Prof. (Dr.) Dharmendra Bhatti 3

Cross Platform Mobile Application

Development
lNative app advantages
¡Better performance
¡Tight security
¡Quality UX
¡Full feature set access
¡Minimal bugs
lNative app limitations
¡Cost, Development Time

Prof. (Dr.) Dharmendra Bhatti 4

Prof. (Dr.) Dharmendra Bhatti 2

2023 Lecture Notes of Cross Platform
Mobile Application Development

Cross Platform Mobile Application

Development
lCross-platform mobile development is an
approach to developing software
applications that are compatible with
multiple mobile operating systems (OSes)
or platforms.

lThese apps are platform-agnostic,

meaning they can be used regardless of
the OS powering the mobile device.
Prof. (Dr.) Dharmendra Bhatti 5

Cross Platform Mobile Application

Development
lChallenges
¡Slower app performance
¡Fewer options for UI design
¡Limited access to all device APIs
¡More chances for security issues
¡Delayed access to the latest features

Prof. (Dr.) Dharmendra Bhatti 6

Prof. (Dr.) Dharmendra Bhatti 3

2023 Lecture Notes of Cross Platform
Mobile Application Development

Cross Platform Mobile Application

Development
lAdvantages
¡Available Development Tools
lFlutter, Xamarin, React Native, Ionic, Cordova
¡Faster to App Store
¡Unified Look and Feel Across Multiple
Platforms
¡Reach a Wider Audience
¡Lower Development Cost

Prof. (Dr.) Dharmendra Bhatti 7

What is Flutter?

lFlutter is a software development toolkit

from Google for building cross-platform
apps

lPackages+Plugins+Widgets

Prof. (Dr.) Dharmendra Bhatti 8

Prof. (Dr.) Dharmendra Bhatti 4

2023 Lecture Notes of Cross Platform
Mobile Application Development

What is Flutter?

Prof. (Dr.) Dharmendra Bhatti 9

When not to use Flutter?

lGames and audio

lApps with specific native SDK needs
lCertain platforms
¡It doesn’t support Apple Bitcode yet, which
means that it doesn’t support watchOS, tvOS or
certain iOS app extensions.

Prof. (Dr.) Dharmendra Bhatti 10

Prof. (Dr.) Dharmendra Bhatti 5

2023 Lecture Notes of Cross Platform
Mobile Application Development

The Flutter architecture

Prof. (Dr.) Dharmendra Bhatti 11

The Flutter architecture

lThe Framework layer is written in Dart

and contains the high-level libraries that
you’ll use directly to build apps.

Prof. (Dr.) Dharmendra Bhatti 12

Prof. (Dr.) Dharmendra Bhatti 6

2023 Lecture Notes of Cross Platform
Mobile Application Development

The Flutter architecture

lThe Engine layer contains the core C++

libraries.
lThe engine implements the low-level
primitives of the Flutter API, such as I/O,
graphics, text layout, accessibility, the
plugin architecture and the Dart runtime.

Prof. (Dr.) Dharmendra Bhatti 13

The Flutter architecture

lThe Embedder is different for each target

platform and handles packaging the code
as a stand-alone app or embedded
module

Prof. (Dr.) Dharmendra Bhatti 14

Prof. (Dr.) Dharmendra Bhatti 7

2023 Lecture Notes of Cross Platform
Mobile Application Development

The Flutter architecture

Prof. (Dr.) Dharmendra Bhatti 15

The Flutter architecture

lFramework Layer
¡The Flutter framework provides a reactive and
modern framework written in Dart.
¡Within the framework layer, it comprises of the
following:
lRendering
lWidgets
lMaterial and cupertino
lIt also has foundational classes and building block
services like animation, drawing, and gestures.

Prof. (Dr.) Dharmendra Bhatti 16

Prof. (Dr.) Dharmendra Bhatti 8

2023 Lecture Notes of Cross Platform
Mobile Application Development

The Flutter architecture

lEngine Layer
¡The engine layer is written in C/C++, and it
takes care of the input, output, network
requests, and handles the difficult translation of
rendering whenever a frame needs to be
painted.
¡Flutter use skia as its rendering engine.

Prof. (Dr.) Dharmendra Bhatti 17

The Flutter architecture

lEmbedded Layer
¡An entry point is provided by a platform-specific
embedder, which coordinates with the
underlying operating system to access services
such as accessibility, rendering surfaces, and
input.
¡The embedder is written in a platform-specific
language
lJava and C++ for Android, Objective-C/Swift for iOS
and macOS, and C++ for Windows and Linux
¡Flutter code can be embedded into an existing
application as a module or as the complete
application’s content usingBhatti
Prof. (Dr.) Dharmendra the embedder. 18

Prof. (Dr.) Dharmendra Bhatti 9

2023 Lecture Notes of Cross Platform
Mobile Application Development

The Flutter architecture

Prof. (Dr.) Dharmendra Bhatti 19

Getting the Flutter SDK

lhttps://docs.flutter.dev/get-started/install

lWindows
lmacOS
lLinux

Prof. (Dr.) Dharmendra Bhatti 20

Prof. (Dr.) Dharmendra Bhatti 10

2023 Lecture Notes of Cross Platform
Mobile Application Development

Getting the Flutter SDK

lWindows
¡Git for Windows
¡Get the Flutter SDK
¡Update Your Path
¡“where flutter dart”
¡flutter doctor
¡Install Android Studio
¡Setup Android Emulator
¡Install VS Code (https://code.visualstudio.com)
Prof. (Dr.) Dharmendra Bhatti 21

Getting the Flutter SDK

lmacOS
¡Get the Flutter SDK
¡Update Your Path (.bashrc or .zshrc)
¡flutter doctor
¡Install XCode (if not installed)
¡Install Android Studio
¡Setup Android Emulator
¡Agree to Android Licenses
¡Install VS Code (https://code.visualstudio.com)
with plugin Flutter
Prof. (Dr.) Dharmendra Bhatti 22

Prof. (Dr.) Dharmendra Bhatti 11

2023 Lecture Notes of Cross Platform
Mobile Application Development

Create New Project

lAndroid Studio
¡Create New Flutter project
lVS Code
¡View ▸ Command Palette... ▸ Flutter: New
Project
lTerminal
¡flutter create hello_world

Prof. (Dr.) Dharmendra Bhatti 23

Open Existing Project

lVS Code
¡Open Project hello_world
¡View ▸ Command Palette... ▸ Flutter: Launch
Emulator
¡Run Without Debugging
¡Hot reload

Prof. (Dr.) Dharmendra Bhatti 24

Prof. (Dr.) Dharmendra Bhatti 12

2023 Lecture Notes of Cross Platform
Mobile Application Development

RecipeApp

lTerminal
¡flutter create recipes
lUsing VS Code, open the recipes folder
as an existing project.
lView ▸ Command Palette... ▸ Flutter:
Launch Emulator
lRun Without Debugging

Prof. (Dr.) Dharmendra Bhatti 25

RecipeApp

lRename class to RecipeApp

¡Android Studio
lRefactor ▸ Rename
¡VS Code
lPress F2

Prof. (Dr.) Dharmendra Bhatti 26

Prof. (Dr.) Dharmendra Bhatti 13

2023 Lecture Notes of Cross Platform
Mobile Application Development

What is refactor?

lRestructure the source code to improve

operation without altering functionality is
called refactor.

lRefactoring consists of improving the

internal structure of an existing program's
source code, while preserving its external
behaviour.

Prof. (Dr.) Dharmendra Bhatti 27

Styling your app

lReplace RecipeApp’s build() with:

Prof. (Dr.) Dharmendra Bhatti 28

Prof. (Dr.) Dharmendra Bhatti 14

2023 Lecture Notes of Cross Platform
Mobile Application Development

What is widget?

lA Flutter widget can be defined as a self-

contained, reusable piece of code that
describes how part of the user
interface should be displayed.

lWidgets describe what their view

should look like given their current
configuration and state.

Prof. (Dr.) Dharmendra Bhatti 29

Styling your app

lA widget’s build() method is the entry point

for composing together other widgets to
make a new widget.
lMaterialApp is the top-level widget for an
app that uses Material Design.
lThe title of the app is a description that the
device uses to identify the app. The UI
won’t display this.

Prof. (Dr.) Dharmendra Bhatti 30

Prof. (Dr.) Dharmendra Bhatti 15

2023 Lecture Notes of Cross Platform
Mobile Application Development

Styling your app

lThe theme determines visual aspects like

color. Here, the primary color is
Colors.white and the accent color is
Colors.black.
laccentColor is deprecated so use
¡theme: theme.copyWith(
¡ colorScheme: theme.colorScheme.copyWith(
¡ primary: Colors.grey,
¡ secondary: Colors.black,),)
Prof. (Dr.) Dharmendra Bhatti 31

Styling your app

lThis still uses the same MyHomePage

widget as before, but now, you’ve updated
the title and displayed it on the device.

Prof. (Dr.) Dharmendra Bhatti 32

Prof. (Dr.) Dharmendra Bhatti 16

2023 Lecture Notes of Cross Platform
Mobile Application Development

Prof. (Dr.) Dharmendra Bhatti 33

Replace the _MyHomePageState

class with:

Prof. (Dr.) Dharmendra Bhatti 34

Prof. (Dr.) Dharmendra Bhatti 17

2023 Lecture Notes of Cross Platform
Mobile Application Development

What is scaffold?

lThe Scaffold is a widget in Flutter used to

implements the basic material design
visual layout structure.

Prof. (Dr.) Dharmendra Bhatti 35

Replace the _MyHomePageState

class with:
lA Scaffold provides the high-level
structure for an app. In this case, you’re
using two properties.

lAppBar gets a title property by using a

Text widget that has a title passed in from
home: MyHomePage(title: 'Recipe
Calculator') in the previous step.

Prof. (Dr.) Dharmendra Bhatti 36

Prof. (Dr.) Dharmendra Bhatti 18

2023 Lecture Notes of Cross Platform
Mobile Application Development

Replace the _MyHomePageState

class with:
lbody has SafeArea, which keeps the app
from getting too close to the operating
system interfaces such as the notch or
interactive areas.

lSafeArea has a child widget, which is an

empty Container widget.

Prof. (Dr.) Dharmendra Bhatti 37

Prof. (Dr.) Dharmendra Bhatti 38

Prof. (Dr.) Dharmendra Bhatti 19

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding a data model

lUse Recipe as the main data structure for

recipes in this app

lCreate a new Dart file in the lib folder,

named recipe.dart.

Prof. (Dr.) Dharmendra Bhatti 39

Adding a data model

lAdd the following method to Recipe:

Prof. (Dr.) Dharmendra Bhatti 40

Prof. (Dr.) Dharmendra Bhatti 20

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding a data model

lGo to Finder and copy the assets folder

lOpen pubspec.yaml in the Recipes
project root folder.
lUnder # To add assets to your
application... add the following lines:

lassests:
l - assets/
Prof. (Dr.) Dharmendra Bhatti 41

Displaying the list

lAdd the following to the top of the

main.dart

limport 'recipe.dart';

Prof. (Dr.) Dharmendra Bhatti 42

Prof. (Dr.) Dharmendra Bhatti 21

2023 Lecture Notes of Cross Platform
Mobile Application Development

Displaying the list

lIn _MyHomePageState SafeArea’s child,

replace the child: Container(), with:

Prof. (Dr.) Dharmendra Bhatti 43

Displaying the list

l4. Builds a list using ListView.

l5. itemCount determines the number of
rows the list has. In this case, length is the
number of objects in the Recipe.samples
list.
l6. itemBuilder builds the widget tree for
each row.
7. A Text widget displays the name of the
recipe.
Prof. (Dr.) Dharmendra Bhatti 44

Prof. (Dr.) Dharmendra Bhatti 22

2023 Lecture Notes of Cross Platform
Mobile Application Development

Displaying the list

Prof. (Dr.) Dharmendra Bhatti 45

Putting the list into a card

lIn Material Design, Cards define an area

of the UI where you’ve laid out related
information about a specific entity.

Prof. (Dr.) Dharmendra Bhatti 46

Prof. (Dr.) Dharmendra Bhatti 23

2023 Lecture Notes of Cross Platform
Mobile Application Development

Putting the list into a card

lIn main.dart, at the bottom of
_MyHomePageState, add the following to
create a custom widget using
buildRecipeCard():

Prof. (Dr.) Dharmendra Bhatti 47

Putting the list into a card

lYou return a Card from buildRecipeCard().
lThe Card’s child property is a Column. A
Column is a widget that defines a vertical
layout.
lThe Column has two children.
lThe first child is an Image widget.
AssetImage states that the image is
fetched from the local asset bundle
defined in pubspec.yaml.
lA Text widget is the second child. It will
contain the recipe.label
Prof. (Dr.) Dharmendravalue.
Bhatti 48

Prof. (Dr.) Dharmendra Bhatti 24

2023 Lecture Notes of Cross Platform
Mobile Application Development

Putting the list into a card

lTo use the card, go to

_MyHomePageState and update the
ListView itemBuilder’s return statement to
this:

lreturn
buildRecipeCard(Recipe.samples[index]);

Prof. (Dr.) Dharmendra Bhatti 49

Putting the list into a card

Prof. (Dr.) Dharmendra Bhatti 50

Prof. (Dr.) Dharmendra Bhatti 25

2023 Lecture Notes of Cross Platform
Mobile Application Development

Looking at the widget tree

Prof. (Dr.) Dharmendra Bhatti 51

Making it look nice

Prof. (Dr.) Dharmendra Bhatti 52

Prof. (Dr.) Dharmendra Bhatti 26

2023 Lecture Notes of Cross Platform
Mobile Application Development

Making it look nice

Prof. (Dr.) Dharmendra Bhatti 53

Making a tap response

lInside _MyHomePageState, locate
ListView.builder(). Replace the itemBuilder
return statement with the following:

Prof. (Dr.) Dharmendra Bhatti 54

Prof. (Dr.) Dharmendra Bhatti 27

2023 Lecture Notes of Cross Platform
Mobile Application Development

Making a tap response

lIntroduces a GestureDetector widget,
which, as the name implies, detects
gestures.
lImplements an onTap function, which is
the callback called when the widget is
tapped.

Prof. (Dr.) Dharmendra Bhatti 55

Making a tap response

lThe Navigator widget manages a stack of
pages. Calling push() with a
MaterialPageRoute will push a new
Material page onto the stack.
lbuilder creates the destination page
widget.
lGestureDetector’s child widget defines the
area where the gesture is active.

Prof. (Dr.) Dharmendra Bhatti 56

Prof. (Dr.) Dharmendra Bhatti 28

2023 Lecture Notes of Cross Platform
Mobile Application Development

Making a tap response

Prof. (Dr.) Dharmendra Bhatti 57

Creating an actual target page

lIn lib, create a new Dart file named
recipe_detail.dart.

Prof. (Dr.) Dharmendra Bhatti 58

Prof. (Dr.) Dharmendra Bhatti 29

2023 Lecture Notes of Cross Platform
Mobile Application Development

Creating an actual target page

lYou need _RecipeDetailState to build the

widget

Prof. (Dr.) Dharmendra Bhatti 59

Creating an actual target page

Prof. (Dr.) Dharmendra Bhatti 60

Prof. (Dr.) Dharmendra Bhatti 30

2023 Lecture Notes of Cross Platform
Mobile Application Development

Creating an actual target page

lScaffold defines the page’s general

structure.
lIn the body, there’s a SafeArea, a Column
with a Container, a SizedBox and
lText children.
lSafeArea keeps the app from getting too
close to the operating system
linterfaces, such as the notch or the
interactive area of most iPhones.
Prof. (Dr.) Dharmendra Bhatti 61

Creating an actual target page

lOne new thing is the SizedBox around the
Image, which defines resizable bounds for
the image. Here, the height is fixed at 300
but the width will adjust to fit the aspect
ratio. The unit of measurement in Flutter is
logical pixels.
lThere is a spacer SizedBox.
lThe Text for the label has a style that’s a
little different than the main Card, to
lshow you how much customizability is
Prof. (Dr.) Dharmendra Bhatti 62
available.

Prof. (Dr.) Dharmendra Bhatti 31

2023 Lecture Notes of Cross Platform
Mobile Application Development

Creating an actual target page

lNext, go back to main.dart and add the

following line to the top of the file:
limport 'recipe_detail.dart';

lThen, inside _MyHomePageState, locate

GestureDetector’s onTap parameter and
lreplace the MaterialPageRoute’s return
statement with:
lreturn RecipeDetail(recipe:
Prof. (Dr.) Dharmendra Bhatti 63
Recipe.samples[index]);

Adding ingredients

lOpen recipe.dart and add the following

class:

Prof. (Dr.) Dharmendra Bhatti 64

Prof. (Dr.) Dharmendra Bhatti 32

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding ingredients

lAt the top of the Recipe class, add the

following:

lint servings;
lList<Ingredient> ingredients;

Prof. (Dr.) Dharmendra Bhatti 65

Adding ingredients

lTo use these new properties, go to your

samples list inside the Recipe class and
change the Recipe constructor from:
l

Prof. (Dr.) Dharmendra Bhatti 66

Prof. (Dr.) Dharmendra Bhatti 33

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding ingredients

lTo include the new servings and

ingredients properties, replace the existing
samples code with the following:

Prof. (Dr.) Dharmendra Bhatti 67

Showing the ingredients

lIn recipe_detail.dart, add the following to

the Column after the last Text:

Prof. (Dr.) Dharmendra Bhatti 68

Prof. (Dr.) Dharmendra Bhatti 34

2023 Lecture Notes of Cross Platform
Mobile Application Development

Showing the ingredients

lAn Expanded widget, which expands to fill

the space in a Column. This way, the
ingredient list will take up the space not
filled by the other widgets.
lA ListView, with one row per ingredient.
lA Text that uses string interpolation to
populate a string with runtime values.
lYou use the ${expression} syntax inside
the string literal to denote these.
Prof. (Dr.) Dharmendra Bhatti 69

Adding a serving slider

lAdd a Slider widget to allow the user to

adjust the number of servings.

lFirst, create an instance variable to store

the slider value at the top of
_RecipeDetailState:

lint _sliderVal = 1;
Prof. (Dr.) Dharmendra Bhatti 70

Prof. (Dr.) Dharmendra Bhatti 35

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding a serving slider

lWithin the Column, after the Expanded

widget, add the following Slider widget:

Prof. (Dr.) Dharmendra Bhatti 71

Adding a serving slider

lYou use min, max and divisions to define

how the slider moves. In this case, it
moves between the values of 1 and 10,
with 10 discreet stops. That is, it can only
have values of 1, 2, 3, 4, 5, 6, 7, 8, 9 or
10.
llabel updates as the _sliderVal changes
and displays a scaled number of servings.
lThe slider works in double values, so this
converts the intProf.variable.
(Dr.) Dharmendra Bhatti 72

Prof. (Dr.) Dharmendra Bhatti 36

2023 Lecture Notes of Cross Platform
Mobile Application Development

Adding a serving slider

lConversely, when the slider changes, this

uses round() to convert the double slider
value to an int, then saves it in _sliderVal.
lThis sets the slider’s colors to something
more “on brand”.
lThe activeColor is the section between the
minimum value and the thumb, and the
inactiveColor represents the rest.

Prof. (Dr.) Dharmendra Bhatti 73

Adding a serving slider

Prof. (Dr.) Dharmendra Bhatti 74

Prof. (Dr.) Dharmendra Bhatti 37

2023 Lecture Notes of Cross Platform
Mobile Application Development

Updating the recipe

lChange the Expanded ingredients

itemBuilder return statement to include the
current value of _sliderVal as a factor for
each ingredient:

Prof. (Dr.) Dharmendra Bhatti 75

Updating the recipe

Prof. (Dr.) Dharmendra Bhatti 76

Prof. (Dr.) Dharmendra Bhatti 38

2023 Lecture Notes of Cross Platform
Mobile Application Development

Key points

lBuild a new app with flutter create.

lUse widgets to compose a screen with

controls and layout.

lUse widget parameters for styling.

Prof. (Dr.) Dharmendra Bhatti 77

Key points

lA MaterialApp widget specifies the app,

and Scaffold specifies the high-level
structure of a given screen.
lState allows for interactive widgets.
lWhen state changes, you usually need to
hot restart the app instead of hot reload. In
some case, you may also need to rebuild
and restart the app entirely.

Prof. (Dr.) Dharmendra Bhatti 78

Prof. (Dr.) Dharmendra Bhatti 39

2023 Lecture Notes of Cross Platform
Mobile Application Development

Questions ???

Prof. (Dr.) Dharmendra Bhatti 79

Prof. (Dr.) Dharmendra Bhatti 40