Application Development

Lect1

Mobile App is a type of software designed to run on mobile devices.

Key Features of Mobile Applications:

Platform-specific Development:
Apps are often built for specific operating systems such as Android or iOS.
User Interface (UI):
Mobile apps have interfaces optimized for touch input, smaller screens and
gestures (e.g., swiping, pinching).
Internet Connectivity:
Many apps rely on an active internet connection.
Wide Range of Uses:
Utility apps: Calendars, reminders.
Social apps: Facebook, WhatsApp.
Productivity apps: Google Docs, Trello.

Mobile Operating Systems a software interface that is responsible for managing and
operating hardware units.
The most well-known mobile OSs are Android, iOS, Windows phone OS, and
Symbian.

IOS

Apple's very own operating system, iOS runs the company's iPod, iPad, iPhone, and
Apple Watch devices. It is only available on Apple products and responds to commands
from the user's fingertips.

Android

Android's OS is owned by Google and is considered open-source to Apple's closed

system.

Windows

Windows is no stranger to computer operating systems, but its mobile OS was a

Microsoft operating system for smartphones and Pocket PCs.
General Mobile OS Architecture Layers

A mobile OS architecture generally consists of the following layers:

Hardware Layer
The physical components of the device, including the CPU, GPU, memory.
Managed by the lower layers of the OS.
Kernel Layer
Acts as the core of the OS, managing hardware resources and providing low-level
services such as memory management, process scheduling, and hardware abstraction.
Common kernels:
Android: Modified Linux kernel.
iOS: XNU (a hybrid of Mach and BSD).

Hardware Abstraction Layer (HAL):

Provides a bridge between the hardware and software layers.
Allows higher-level software to communicate with hardware without needing to know its
implementation details

Platform Layer
iOS Core OS
Core Services
Media Layer
Cocoa Touch Layer
Applications

Windows Phone(Legacy) Kernel

Hardware Abstraction Layer
Core Services
Presentation Layer
Applications

Android Linux Kernel

Hardware Abstraction Layer
Libraries
Android Runtime (ART)
Application Framework
Applications

Harmony OS Kernel
Device Virtualization Layer
Platform Layer
Application Framework
Applications

Applications are separated into three general categories: native applications, web
apps, and hybrid applications.

Category Description
Native Built specifically for a platform (e.g., iOS, Android) using platform-specific
Applications languages (e.g., Swift, Kotlin).
Installed directly on devices and can access hardware features (e.g., GPS,
camera).
Web Applications Run within a web browser and are built using web technologies (HTML, CSS,
JavaScript).
Cannot access device hardware and are not available in app stores.
Hybrid Combine elements of both native and web apps.
Applications
Built using web technologies (HTML5) but run in a native wrapper and can be
installed on devices.

Hybrid Mobile Apps These apps can be installed on devices just like native apps, but
they run through web browsers. All hybrid apps are developed through the HTML5
programming language. Though hybrid apps are not as fast or reliable as native apps,
they have a greater capacity for streamlining the development process. Because you
don’t have to build and maintain apps for separate platforms, your business can save on
time and resources.**

Feature Responsive Websites Adaptive Web Applications

Design Switches to a different design for Scales to fit different screen sizes;
mobile devices. design remains the same.
Development Built using popular programming Built using popular programming
languages. languages.
Hardware Access Cannot use mobile device Cannot use mobile device hardware.
hardware.
App Store Not available in app stores. Not available in app stores.
Availability
Cross-Platform applications

The purpose of these cross-platform apps is to solve the hybrid performance

problem and the cost problem when writing a variety of native languages ​for each
mobile platform.

Flutter A free and open-source mobile UI framework created by Google and released in
May 2017.

Flutter is a great tool from Google for creating cross-platform applications with only one
code which can be deployed to the web, desktop, and mobile(IOS and Android).

Google is promoting Flutter as a simple framework.

Two important parts of flutter particularly responsible for its popularity are:

1. SDK (Software Development Kit)- It is a collection of tools that supports developing

applications.
2. Frameworks It is a collection of reusable elements like text inputs, slide buttons, hot
reload.

Flutter is organized around layers. Each layer is build upon the previous.

Flutter Layers

Presentation Layer
Widgets, States, Controllers.
Application Layer
Services.
Domain Layer
Models.

Data Layer
Repositories, DTOs, Data Sources.

Everything is a widget

In Flutter, Everything is a widget nested inside the another widget.

In Flutter everything is built on Widgets. UI elements, styles, themes, and even
state is managed in specific Widgets.
 All the widget of a Flutter app form a hierarchy where a widget is a composition of
other widgets and each widget inherits properties from its parent.

Flutter Key Features

1. Hot Reload
The changes made by the developers can be seen instantaneously with Hot
Reload.
2. Cross-Platform Development
CPD saves time, energy and money. With Flutter, you need to write the code once,
maintain and can use that for two apps.
3. Accessible Native Features and SDKs
you can easily access the native features and SDKs on both Android and iOS
platforms and reuse the widely-used programming languages such as Kotlin and
Swift.
4. Minimal Code
Flutter is developed using Dart programming language. Dart uses JIT and AOT
compilation that helps improve the overall startup time, functioning and accelerates
the performance. JIT enhances the development system with the hot reload
function. It refreshes the UI without putting in the effort to building a new one.
5. Widgets
In Flutter, the widgets are given an upper hand. It is capable of developing
customizable and complex widgets. Most importantly, Flutter has all the sets of
widgets from Material Design and Cupertino pack and it helps to provide a glitch-
free experience in this case over and above all the other platforms.
6. Native Feel and Features
Flutter enables you to use your existing code Java, Obj-C and Swift to gain the key
to native features which are platform specific. Camera and Geo location are
features connected with the use of native languages and offers you the
convenience of working in the native language and, it provides access to the native
features of both iOS and Android platforms.

Lect2

In Flutter, everything is a widget, which is the core concept of this framework.

Widget a user interface component that affects and controls the view and interface of
the app. It represents an immutable description of part of the user interface and includes
graphics, text, shapes, and animations that are created using widgets.

Widgets are nested with each other to build the app. It means the root of your app is
itself a widget, and all the way down is a widget also.
Widgets are the building blocks of a Flutter app

Flutter uses the widget as the configuration to build each element

Structural Widgets: Lists, grids, text, and buttons.

Input Widgets: Forms, form fields, and keyboard listeners.
Styling Widgets: Font customization (type, size, weight, color), borders, and
shadows.
Layout Widgets: Tools for UI arrangement (row, column, stack, centering,
padding).
Interactive Widgets: Touch, gestures, dragging, and dismissible actions.
Animation Widgets: Hero animations, transitions (fade, rotation, scale, size, slide,
opacity), and animated containers.
Media Widgets: Assets, images, and icons.
Nesting Widgets: Combine widgets to build custom UIs.
Custom Widgets: Create personalized widgets as needed.

We can split the Flutter widget into two categories:

1. Visible (Output and Input) related to the user input and output data. Some of the
important types of this widget are: Text, Button, Image, Icon, column, Row.
2. Invisible (Layout and Control)

In Flutter, there are mainly two types of widget:

StatelessWidget
StatefulWidget

Types of Widgets in Flutter

Widget Type Description Key Characteristics

StatelessWidget A widget without state (value) - Cannot change data or
information. It remains static throughout appearance after being built.
its lifecycle.
- Used for UI elements that don’t
need to update dynamically.
StatefulWidget A widget with state(value) information - Consists of two classes: Widget
that can change dynamically during its and State.
lifecycle.
Widget Type Description Key Characteristics
- Contains a createState()
method that returns a state object.
- Suitable for UI elements that
need to update interactively.

To build the UI, you use two main types of widgets, StatelessWidget and
StatefulWidget.

Each stateless or stateful widget has a build method with a BuildContext that
handles the location of the widget in the widget tree. The BuildContext objects are
actually Element objects, an instantiation of the Widget at a location in the tree.

StatelessWidget Lifecycle

A StatelessWidget is built based on its own configuration and does not change
dynamically.
It can be called the first time the widget is created, when the widget’s parent
changes, and when an InheritedWidget has changed.
The StatefulWidget Lifecycle

A StatefulWidget is built based on its own configuration but can change

dynamically. This type of widget has a mutable state that can change over time.
The stateful widget is declared with two classes, the StatefulWidget class and the
State class. The StatefulWidget class is rebuilt when the widget’s configuration
changes, but the State class can persist (remain), enhancing performance.
You call the setState() method to notify the framework that this object has changes,
and the widget’s build method is called (scheduled). You would set the new state
values inside the setState() method.
You can override different portions of the StatefulWidget to customize and
manipulate data at different points of the widget lifecycle.
**
Widget Tree

The widget tree is how developers create their user interface; developers position
widgets within each other to build simple and complex layouts.
To improve code readability and manageability, developers can separate widgets
into their own widget class, creating widget tree.
MaterialApp widget

a widget to create the root level UI of the application and contains three properties -
title, theme, and home.

1. Title: It is the title of the Flutter application.

2. Theme: It is the theme of the widget. By default, it set the blue as the overall color
of the application.
3. Home: It is the inner UI of the application, which sets another widge for the
application.

Scaffold widget

Scaffold widget is a top-level widget after the MaterialApp widget for creating the
user interface.
 The Scaffold is a widget in Flutter used to implements the basic material design
visual layout structure.

1. appBar: It is a horizontal bar that is mainly displayed at the top of the Scaffold
widget. It is the main part of the Scaffold widget and displays at the top of the
screen. Without this property, the Scaffold widget is incomplete. It uses the appBar
widget that itself contains various properties like elevation, title, brightness, etc.

Widget build(BuildContext context)

return Scaffold(

appBar: AppBar(

title: Text('First Flutter Application'),

), )

}**

2. body: It is the other primary and required property of this widget, which will display
the main content in the Scaffold. The widgets inside the body are positioned at the
top-left of the available space by default.

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text('First Flutter Application'),
),
body: Center(
child: Text("Welcome to Flutter",
style: TextStyle( color: Colors.black, fontSize: 30.0,
),
),
),
}

Example:
 import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Hello World Flutter Application',

theme: ThemeData(

// This is the theme of your application.

primarySwatch: Colors.blue,

),

home: MyHomePage(title: 'Home page'),

);

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

// This widget is the home page of your application.

final String title;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(this.title),
 ),

body: Center(

child: Text('Hello World'),

),

);

Scaffold properties(con..)

floatingActionButton It is a button displayed at the bottom right corner and floating

above the body. It uses the FloatingActionButton widget properties
using Scaffold.floatingActionButton.

floatingActionButton example:

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('First Flutter Application')),

body: Center(

child: Text("Welcome to Javatpoint!!"),

),

floatingActionButton: FloatingActionButton(

elevation: 8.0,

child: Icon(Icons.add),

onPressed: (){

print('I am Floating Action Button');

);
 }

floatingActionButtonLocation: By default, it is positioned at the bottom right corner

of the screen. It is used to determine the position of the floatingActionButton. It contains
many predefined constants, such as centerDocked, centerFloat, endDocked, endFloat,
etc.
dart floatingActionButtonLocation: FloatingActionButtonLocation.endDocked

* backgroundColor: This property is used to set the background color of the whole
Scaffold widget.

backgroundColor: Colors.yellow

primary: It is used to tell whether the Scaffold will be displayed at the top of the
screen or not. Its default value is true.

primary: true/false,

resizeToAvoidBottomInset: If it is true, the body and the Scaffold's floating widgets

should adjust their size themselves to avoid the onscreen keyboard.**

Drawer

It is a slider panel that is displayed at the side of the body. Usually, it is hidden on the
mobile devices, but the user can swipe it left to right or right to left to access the drawer
menu. It uses the Drawer widget properties slides in a horizontal direction from the
Scaffold edge to show navigation links in the application. An appropriate icon for the
drawer is set automatically in an appBar property. The gesture is also set automatically
to open the drawer.

persistentFooterButton

It is a list of buttons that are displayed at the bottom of the Scaffold widget. These
property items are always visible. It is always wrapped in a ButtonBar widget. They are
rendered below the body but above the bottomNavigationBar.