IT 331

Application Development and Emerging Technologies

📘Emerging
IT 331 – Application Development and
Technologies

🌟 SECTION 1 – Application Development Concepts

Application Development

Process of creating computer programs to accomplish tasks.

🔹 Phases:
1. Planning – Define goals, scope, resources, timeline.

2. Creating – Code and build the app.

3. Testing – Check for bugs and ensure requirements are met.

4. Deploying – Release for users to access.

🌟 SECTION 2 – Mobile Apps

Native Apps
Built for specific platform (Android/iOS).

Fast performance, can access all device hardware.

High maintenance cost.

Web Apps
Accessed via browser.

Responsive design.

Needs internet connection.

IT 331 1
 Hybrid Apps
Web apps inside a native shell.

Faster to build, but slower performance compared to native.

🌟 SECTION 3 – Flutter Overview

Flutter

A framework by Google for building natively compiled

applications for mobile, web, and desktop from a single
codebase.

✅ Key Features:
Cross-platform

Fast development with Hot Reload

Attractive UI using customizable widgets

High performance with Skia rendering engine

🌟 SECTION 4 – Flutter Widget Categories

🔹 Accessibility: Makes apps usable for everyone.
🔹 Animation & Motion: Adds animations to widgets.
🔹 Assets, Images & Icons: Manages visual assets.
🔹 Async: Handles asynchronous operations.
🔹 Basics: Fundamental widgets (e.g., Container, ,
Row ).Column

🔹 Cupertino: iOS-style widgets.

🔹 Input: For user input (TextFields, Buttons).
🔹 Interaction Models: Handles user gestures.
🔹 Layout: Arranges widgets on screen.
🔹 Material Components: Implements Google Material Design.
🔹 Painting & Effects: Visual styling and effects.
🔹 Scrolling: Adds scrollable areas.
IT 331 2
 🔹 Styling: Themes, colors, text styles.
🔹 Text: Displaying and formatting text.
🌟 SECTION 5 – Common Flutter Widgets
Widget Description

MaterialApp Root widget of the app, sets theme, routes, title

Scaffold Basic layout structure (AppBar, Body, Drawer, etc.)

AppBar Top bar with title and actions

Drawer Side navigation menu

BottomNavigationBar Bottom menu for navigation

FloatingActionButton Floating button for primary action

Container Box with styling, padding, margins

Center Centers its child widget

Text Displays text

🌟Stateless
SECTION 6 – Flutter Widgets: Stateful vs

Stateless Widget
Immutable.

Does not change over time.

Example: Text("Hello") .

Code Example:

dart
CopyEdit
class MyStateless extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("I am Stateless");
}

IT 331 3
 }

Stateful Widget
Can change dynamically.

Maintains state during app lifetime.

Example: Counter that updates on tap.

Code Example:

dart
CopyEdit
class MyStateful extends StatefulWidget {
@override
_MyStatefulState createState() => _MyStatefulState();
}

class _MyStatefulState extends State<MyStateful> {

int counter = 0;

@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $counter'),
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text('Increment'),
),
],
);
}

IT 331 4
 }

🌟 SECTION 7 – Dart Programming Language

✅ Developed by Google
✅ Used in Flutter apps
✅ Object-Oriented
✅ Type-safe
Variables
Keyword Description
var Type inferred automatically
dynamic Can change type at runtime
final Value set once, runtime constant
const Compile-time constant
int? Nullable integer variable

Example:

dart
CopyEdit
final name = "Flutter";
const pi = 3.14159;
int? age = null;

🌟 SECTION 8 – Dart Data Types

✅ Numbers – , int double

✅ String – Text
✅ bool – True/False
✅ List – Ordered collection

IT 331 5
 ✅ Map – Key-value pairs
Example:

dart
CopyEdit
List<String> names = ["Ana", "Ben"];
Map<int, String> users = {1: "Juan", 2: "Maria"};

🌟 SECTION 9 – Dart Control Flow

Structure Purpose

if / else Conditional statements

switch Multi-branch selection

for loop Fixed iterations

while loop Loop with pre-condition

do...while Loop with post-condition

for...in loop Iterate over collections

forEach() Apply function to each element

Switch Example:

dart
CopyEdit
switch(day){
case 1: print("Monday"); break;
default: print("Other day");
}

🌟 SECTION 10 – Dart Functions

✅ Named Functions

IT 331 6
 dart
CopyEdit
int add(int a, int b) {
return a + b;
}

✅ Anonymous Functions
dart
CopyEdit
list.forEach((item) {
print(item);
});

✅ Main Function
dart
CopyEdit
void main() {
print("Hello, Dart!");
}

🌟 SECTION 11 – Dart OOP Concepts

Concept Description

Class Blueprint for objects

Object Instance of a class

Inheritance Subclass inherits superclass

Method Overriding Subclass redefines superclass method

Abstract Class Cannot be instantiated; must be subclassed

Interfaces Class must implement all methods defined in interface

Mixins Reusable methods to multiple classes

IT 331 7
 Concept Description

Static Belongs to the class, not to an instance

Example of Abstract Class:

dart
CopyEdit
abstract class Animal {
void sound();
}

class Dog extends Animal {

@override
void sound() {
print("Woof!");
}
}

🌟 SECTION 12 – Common Flutter Layout Widgets

Widget Usage
Row Horizontal layout
Column Vertical layout
ListView Scrollable list
Stack Overlay widgets
Expanded Flexible space allocation
Padding Space around child
SizedBox Fixed size gap or space

🌟 SECTION 13 – Gestures and State Management

Gestures:

Tap

Drag

IT 331 8
 Long Press

Swipe

State Management:

Stateful widgets hold state.

setState() updates UI when state changes.

🌟 SECTION 14 – Flutter Navigation

✅ Drawer
Side panel for navigation.

✅ BottomNavigationBar
Tabs at the bottom.

✅ Navigator
Manage screen routes ( push , pop ).

🌟 SECTION 15 – Other Important Terms

Term Definition

Hot Reload Instant code updates without restarting app

Widget Tree Hierarchical structure of widgets in an app

BuildContext Handle location of widget in the tree

Material Design Google’s visual design system

Cupertino iOS-style widgets

✅ TIP:
Master the Widget Tree concept – all widgets are nested
inside each other, forming the app structure.

✅ Remember:
Use MaterialApp as the root.

Use Scaffold for main layout.

IT 331 9
 Use Stateful Widgets for dynamic content.

FLUTTER UI COMPONENTS

📌 1. Tabs
Definition:
Tabs in Flutter are used to navigate between different screens or sections
within an app.

Key Components:

TabController : Controls tab switching.

DefaultTabController : Simplifies setup.

TabBar : Defines the tabs (with icons or text).

TabBarView : Contains the content shown per tab.

Example:

dart
CopyEdit
DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(tabs: [Tab(icon: Icon(Icons.email))]),
),
body: TabBarView(children: [Text("Email")]),
),
)

📌 2. Horizontal List (ListView)

Definition:
Displays a scrollable list of widgets either vertically or horizontally.

Key Property:

scrollDirection: Axis.horizontal → makes the list scroll sideways.

IT 331 10
 Use Case:

Showing images, cards, items in a scrollable horizontal format.

Constructor:

dart
CopyEdit
ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 100, height: 100),
],
)

📌 3. Icon Class
Definition:

Used to display graphical icons from the Material Icons library.

Common Properties:

color : Sets the icon color.

size : Sets icon size.

semanticLabel : Describes the icon for screen readers.

Example:

dart
CopyEdit
Icon(Icons.favorite, color: Colors.pink[200], size: 100)

📌 4. Dialogs
🔹 AlertDialog
Definition:
Pops up to show alerts or request user input.

IT 331 11
 Properties:

title : Short title.

content : Main message.

actions : Buttons (e.g., Accept, Cancel).

Example:

dart
CopyEdit
AlertDialog(
title: Text("Title"),
content: Text("Message"),
actions: [
TextButton(onPressed: () {}, child: Text("OK")),
],
)

🔹 SimpleDialog
Definition:
Used for presenting a list of options.
Example:

dart
CopyEdit
SimpleDialog(
title: Text('Choose one'),
children: [
SimpleDialogOption(child: Text('Option 1')),
],
)

🔹 showDialog
Definition:

IT 331 12
 Displays both AlertDialog and SimpleDialog .
Key Property:

builder : Returns the widget to show in the dialog.

📌 5. Progress Indicators
🔹 CircularProgressIndicator
Spins in a circle.

value: null → indeterminate.

value: 0.0 to 1.0 → determinate.

🔹 LinearProgressIndicator
Horizontal bar progress.

Properties:

backgroundColor : Background color of bar.

valueColor : Color of progress.

strokeWidth : Thickness (circular).

minHeight : Thickness (linear).

Example:

dart
CopyEdit
CircularProgressIndicator(
backgroundColor: Colors.pink[200],
valueColor: AlwaysStoppedAnimation(Colors.blue[200]),
strokeWidth: 10,
)

📌 6. Staggered Grid View

Definition:
Displays items in a grid with varied sizes (like Pinterest layout).

IT 331 13
 Used Package:
flutter_staggered_grid_view

Widgets Used:

StaggeredTile.count(x, y) : Controls tile size.

StaggeredGridView.countBuilder : Creates the grid view.

Example:

dart
CopyEdit
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 10,
itemBuilder: (context, index) => Icon(Icons.star),
staggeredTileBuilder: (index) => StaggeredTile.count(2, index.isEven ? 2 :
3),
)

✅ Bonus: Flutter Keywords & Packages

Term Definition
StatelessWidget UI that does not change
Scaffold Provides app structure
MaterialApp Root of Flutter Material Design apps
EdgeInsets Used for margin/padding
BoxDecoration Used for decorating widgets (color, shape, image)

IT 331 14