Dart Lecture Slides for Beginner level to Pro

Mobile application
development
Using Flutter

01.Introduction to mobile application
development
Today mobile applications are part of our lives
Section 01

1.1. Overview of mobile application development

the process of creating software applications specifically designed to run on
mobile devices like smartphones, tablets, and wearables.

It encompasses a wide range of platforms, including iOS (Apple devices) and
Android (Google devices), as well as emerging platforms like wearables and IoT
devices.
IoT: Internet Of Things
Ex : assistants like Alexa, Siri

1.2. Evolution of mobile platforms

• Early Mobile Phones (1990s - Early
2000s):Mobile phones were primarily used for
voice communication and text messaging.
• Feature Phones (Mid
2000s):multimedia capabilities like
cameras and MP3 players.

• Introduction of Smartphones (Late 2000s):BlackBerry OS
• Apple's iOS (iPhone OS) revolutionized the industry with the launch of
the iPhone in 2007, introducing touchscreens and an app ecosystem.
• Android's Rise (Late 2000s - Early 2010s):Google's Android OS gained
attraction, offering an open-source platform that manufacturers could
customize.

• Advancements in Hardware (2010s):Smartphones became more
powerful with better processors, increased memory, and improved
cameras.
• 4G/LTE

• Emergence of Wearables (2010s - Present):Introduction of smartwatches and fitness
trackers brought new opportunities for app development on smaller screens.
• Advancements in AI and Voice Assistants (2010s - Present):AI-driven features and voice
assistants (Siri, Google Assistant, Alexa) became integral to mobile platforms.

Social Networking and Communication:
1. Social media platforms like Facebook, Instagram, Twitter, and
Snapchat.
2. Messaging apps such as WhatsApp, Telegram, and Messenger.
1.3. Popular app categories
Productivity and Utility:
1. Productivity suites like Microsoft Office, Google Workspace,
and note-taking apps.
2. Task and project management apps (Trello, Asana).
3. File storage and synchronization (Dropbox, Google Drive).

Entertainment and Media:
1. Streaming services for music (Spotify, Apple Music) and videos (Netflix,
YouTube).
2. Gaming apps, including casual games, esports, and augmented reality
games.
3. E-book and audiobook apps.

Health and Fitness:
•Fitness tracking and workout apps (Fitbit, MyFitnessPal).
•Meditation and mindfulness apps.
•Healthcare tools for tracking symptoms, medications, and appointments.

Travel and Navigation:
•GPS navigation apps (Google Maps, Waze).
•Travel planning and booking (Expedia, Airbnb, TripAdvisor).
•Language translation and local guides.

Finance and Banking:
•Mobile banking and payment apps (PayPal, Venmo, Apple Pay).
•Investment and stock trading apps.
•Expense tracking and budgeting tools.

Education and Learning:
•Language learning apps (Duolingo, Rosetta Stone).
•Online courses and e-learning platforms.
•Educational games for kids.

1.4. Mobile app dev ecosystem
complex network of tools, technologies, platforms, and communities that
enable the creation, distribution, and maintenance of mobile applications.
•Mobile Operating Systems (OS):
•Android (Google): Open-source platform with the largest global
market share.
•iOS (Apple): Proprietary platform known for its premium user
experience and strong security measures.

1.4. Mobile app dev ecosystem
2.Integrated Development Environments (IDEs):
•Android Studio: The official IDE for Android app development, equipped with tools for
coding, testing, and debugging.
•Xcode: The official IDE for iOS app development, providing a comprehensive set of
tools for building, testing, and profiling apps.

1.5. App distribution platforms
1. Google Play Store (Android): Google's official app store for Android apps.
2. Apple App Store (iOS): Apple's official app store for iOS apps.
3. Other stores include Amazon Appstore, Samsung Galaxy Store, and third-party Android
app stores.

1.5. Native vs cross-platform
1. Native Development
Native development involves creating an app specifically for a single platform (e.g., Android
or iOS) using the platform's preferred programming languages and development tools.
Examples:
•Android: Java or Kotlin
•iOS: Swift or Objective-C
Advantages
•Performance
•Access to Features
•User Experience
Challenges
•Development Time
•Cost
•Maintenance

1.5. Native vs cross-platform
2.Cross-Platform Development
Cross-platform development involves using frameworks that allow developers to write
code once and deploy it across multiple platforms (e.g., Android and iOS).
Examples:
•Flutter Dart language.
•React Native JavaScript and React.
Advantages
•Code Reusability
•Cost-Efficiency
•Faster Development
Challenges
•Performance

1.6. Components of mobile apps(UI ,UX business logic , data)
Business
Logic
Data
Handling
UI|UX

App development involves using various languages and tools to create,
test, and deploy mobile applications.
Languages
Development Tools and Frameworks

Languages
1.Java/Kotlin (Android)
2.Swift/Objective-C (iOS)
3.Dart (Flutter)
4.JavaScript/TypeScript (React Native)
5.C# (Xamarin)

Development Tools and Frameworks
1.Android Studio:
1. The official integrated development environment (IDE) for
Android app development, offering tools for coding, testing,
and debugging.
2.Xcode:
1. The official IDE for iOS app development, providing a
comprehensive set of tools for building, testing, and profiling
apps.
3.Flutter:
1. A UI toolkit by Google for building natively compiled
applications for mobile, web, and desktop from a single
codebase.(more on flutter later…)
4.React Native:
1. A framework by Facebook for building native mobile apps
using JavaScript and React.

Dart Lecture Slides for Beginner level to Pro

02.Introduction to Flutter
Section 02
2.1. What is Flutter?
Flutter is an open-source framework created by Google. That allows
developers to create apps that work on different platforms (like iOS,
Android, and web) using a single code-base.

2.2. Target Platforms
Platforms supported by flutter
Mobile apps Web apps Desktop apps
Android
IOS macOS
Linux
Windows

2.2. Target Platforms
We can only test , build and run IOS and macOS applications in macOS
machines.
We can test , build and run android applications in any operating system
.

Updates and Bug Fixing
Android code iOS code

Here comes Flutter!
allows developers to create apps that work on different platforms (like
iOS, Android, and web) using a single code-base.
Flutter constructs a hierarchy of widgets, converts it into a render tree,
and then uses that to paint the user interface on the screen.
This allows for flexibility and high-performance UI rendering.

2.2. Why Flutter?
One Codebase to run , debug and push updates
Android code
iOS code

Simple and more flexible layout rendering
• Flexible Layout Widgets : Flutter offers a variety of layout widgets
that help you arrange and position your UI elements. Some of the
most common ones include Container, Row, Column, Stack, and
ListView. These widgets give you fine-grained control over how
your content is organized on the screen.
• Nesting : you can put a Column inside a Container, or a ListView
inside a Card. This nesting capability makes it easy to build
sophisticated UIs.
2.2. Why Flutter?

Fast Hot reloading
2.2. Why Flutter?

•Single Codebase for Multiple Platforms
•Hot Reload
•Rich Set of Widgets
•High Performance
•Native-Like Look and Feel
•Strong Community and Ecosystem
2.3. Advantages of using Flutter

2.4. Flutter Architecture and How Flutter Builds and Renders
the Widget Tree ?

05.Introduction to Dart
• Dart is a modern, open-source programming language developed by Google.
• It was designed with a focus on simplicity, performance, and productivity,
making it well-suited for various types of applications, including web, mobile,
and desktop.
Section 05

SDK( Software Development Kit )

1.Object-Oriented: Dart is a fully object-oriented language, where
everything is an object. It promotes code organization and reusability
through classes and objects.
2.Strongly Typed: Dart features a strong and static type system, which
means that variable types are known at compile time. This helps catch errors
early and improves code reliability.
3.Asynchronous Programming: Dart provides built-in support for
asynchronous programming using the async and await keywords
Key Features of Dart

Compilation Process
Key Features of Dart
Source code Machine code
Compilation Process
…1010111…
1. JIT : Just In Time Compiler
2. AOT: Ahead Of Time Compiler

Compile Time and Runtime
Compile-time is the period when the programming code (such as C#, Java, C,
Python) is converted to the machine code (i.e. binary code).
Runtime is the period of time when a program is running and generally
occurs after compile time.

main() -function
entry point for any Dart application. It is responsible for executing all library
functions, user-defined statements, and user-defined functions

Increment And Decrement Operators
Compound Assignment Operators

Increment And Decrement Operators
Prefix Operations
Postfix Operations
The prefix form increments or decrements the variable before its value is used in the
expression.
The postfix form increments or decrements the variable after its current value is used in
the expression.
(++b)
(b++)

Dart Basics
Data types
• Numbers : int , double
• Strings : String
• Booleans : bool
• Null : null

<data type> <variable name> = value ;
int age = 20 ;
String name = “Tom” ;
int num = 5 ;

1.Variable name or identifiers can contain alphabets and
numbers.
2.Variable name or identifiers can’t contain spaces and special
characters, except the underscore(_) and the dollar($) sign.
3.Variable name or identifiers can’t be the keyword.
4.Variable name or identifiers can’t begin with number.
Conditions to write variable name or identifiers are
as follows

Camel Casing for Variables
int myAge = 20 ;
String fullName = “Tom” ;

More Variables Declaration
(Dart Types)

•Static languages require variable types to be explicitly declared and
checked at compile-time.
•Dynamic languages allow variables to be created and types to be
assigned during runtime. This flexibility can make development quicker
but may lead to errors that are only discovered at runtime.

Const
The value of a const variable is known at compile-time
and cannot be changed.

Final
The final keyword is used to declare a variable whose value
cannot be changed once it's assigned.
To define constants whose values are known at runtime,
you use the final keyword

Const Final
Const vs Final
Compile Time Run Time
Can’t reassign Can’t reassign

Var
The var keyword in Dart is used for declaring variables
without explicitly specifying the type.
And Dart determines the type based on the assigned value.

Dynamic
The dynamic keyword in Dart is used when the type of
a variable is not known until runtime.
.
Once a variable is declared as a dynamic type,
its value can change over time within the program.

Control flow refers to how
instructions are carried out in a
program.

Dart if statement
An if statement allows you to do something only if a condition is
true

comparison operators
< -Less than (e.g., a < b is true if a is less than b).
> -Greater than (e.g., a > b is true if a is greater than b).
<= -Less than or equal to (e.g., a <= b is true if a is less than or equal to b).
>= - Greater than or equal to (e.g., a >= b is true if a is greater than or equal to b).
== -Equality (e.g., a == b is true if a is equal to b).

What is a Flowchart
A flowchart is a visual representation of a process using various
shapes, symbols, and arrows to illustrate the sequence of steps or
actions and the flow of information.

The following flowchart illustrates how the Dart if statement works

The following flowchart illustrates how the
Dart if else statement works

Dart if /else / else if statement

Dart if/else/else if statement works

complex conditions and
nested if-else statements

Logical Operators
• Logical AND (&& )
• Logical OR ( || )
• Logical NOT ( ! )

• The ternary operator is like if-else statement. This is a one-
liner replacement for the if-else statement.
• It is used to write a conditional expression, where based on
the result of a Boolean condition, one of the two values is
selected.

• The switch statement evaluates an expression and compares its
result with a value in a set. If they are equal, the switch
statement will execute the statement in the matching case
branch.
• Internally, the switch statement uses the comparison
operator (==) to compare integer, string, enumeration, or
compile-time constants.

Dart switch case statement works

Dart provides several built-in collection types that allow you to
work with groups of objects. The main collection types in Dart
include lists, sets, and maps.
Collections

• A list is an indexable collection of objects with a length.
• A list may contain duplicate elements and null.
List

List Methods
• length
• add()
• Insert()
• remove()
• removeAt()
• removeLast()
• removeRange()
• addAll()
• insertAll()
• clear()
• indexOf( )
• contains()
• join()
• map()
• forEach()
• sort()
• split()
• any()
• every()
• where()
• shuffle()

1.length: Returns the number of elements in the list.
2.add(): Appends an element to the end of the list.
3.insert(): Inserts an element at the specified index in the list.
4.remove(): Removes the first occurrence of a specified element from the list.
5.removeAt(): Removes the element at the specified index in the list.

6.removeLast(): Removes and returns the last element of the list.
7.removeRange(): Removes a range of elements from the list based on the specified indices.
8.addAll(): Appends all elements of the given collection to the end of the list.
9.insertAll(): Inserts all elements of the given collection at the specified index in the list.
10.clear(): Removes all elements from the list.
11.indexOf(): Returns the first index at which a specified element occurs in the list.

12.contains(): Returns true if the list contains a specified element; otherwise, returns false.
13.join(): Converts all elements of a list to strings and concatenates them using a specified
separator.
14.map(): Returns a new inerrable where each element is the result of applying a function to
each element of the original inerrable.
15.forEach(): Applies a function to each element of the inerrable (list) without returning a
value.
16.sort(): Sorts the elements of the list in ascending order, according to their natural order
or a custom comparator.

17.split(): Splits a string into a list of substrings based on a specified delimiter.
18.any(): Returns true if at least one element of the inerrable satisfies a given condition;
otherwise, returns false.
19.every(): Returns true if all elements of the inerrable satisfy a given condition; otherwise,
returns false.
20.where(): Returns a new inerrable containing only the elements that satisfy a given condition.
21.shuffle(): Randomly shuffles the elements of the list.

• A set is a collection of unique elements. Unlike a list, a set doesn’t
allow duplicates. Also, a set doesn’t maintain the order of
elements. Typically, a set is faster than a list, especially when
working with large elements.
Sets

1. length():get the length of the set
2. add() :add a element to the set
3. addAll():add a multiple elements to the set
4. remove():remove a element from the set
5. removeAll():remove a multiple elements from the set
6. clear():clear all the elements from the set
7. contains():check the element is in the set
Sets Methods

8. difference():get the difference between two sets
9. intersection():get the intersection between two sets
10. union():get the union between two sets
11. forEach():iterate through the set
12. isEmpty():check the set is empty
13. isNotEmpty():check the set is not empty

• Maps allows you to manage a collection of key/value pairs.
• The Map type is similar to the Dictionary type in other programming languages.
• In a map, keys are unique. Each key has an associated value. Unlike keys,
values can be duplicated.
Maps

Maps Methods
• length() method - get the length of the map
• add() method - add a new key/value pair to the map
• addAll() method - add all the key/value pairs to the map
• remove() method - remove a key/value pair from the map
• clear() method - remove all the key/value pairs from the map
• containsKey() method - check whether the map contains a key

• containsValue() method - check whether the map contains a value
• forEach() method - iterate through the map
• isEmpty() method - check whether the map is empty
• isNotEmpty() method - check whether the map is not empty

• keys() method - get all the keys from the map
• values() method - get all the values from the map
• putIfAbsent() method - add a new key/value pair to the map if the key
does not exist
• update() method - update the value of a key/value pair
• updateAll() method - update all the values of the map

What is a LOOP?
• Loops are essential tools for any programming language.
• Dart Loop is used to run a block of code repeatedly for a given
number of times or until the program matches the specified condition.

•for loop
•for… in loop
•while loop
•do-while loop

for Loop
The for loop executes the code block for a specified number of times.
It can be used to iterate over a fixed set of values, such as an List.

Dart for loop statement works

for in Loop
Use the for-in loop when you want to iterate over
the elements of an list/set/map without dealing
with indices or explicit counters.

The while statement evaluates a Boolean expression and executes
statements repeatedly as long as the result of the expression is true.
While Loop

Dart while loop statement works

do while Loop
The do while statement always executes the first iteration whether
the result of the expression is true or not. And it executes the
statement repeatedly as long as the expression is true

Dart do - while loop statement works

Dart functions
In programming, you often need to perform the same task multiple times.
And you don’t want to copy & paste the same code all over places in the
program.
A function is a reusable unit of code that performs a task.

A function has two parts
1) Function signature
A function signature has a return type, function name, and parameter list(also
can be no parameters).
The return type specifies the type of value that the function returns. If a function
doesn’t return anything, you can use the void as the return type.
2) Function body
The function body consists of one or more statements that perform a specified task

Calling a function
Once you define a function, you can call it. When you call a
function, Dart will execute the code inside the function.

return type
Function name Positional parameters
Statement/statements

• In general, it's good practice to keep the main function clean and
focused on the primary logic of your program.
• Place supporting functions, classes, or other code outside the
main function to improve code organization and maintainability.
• This separation can also make your code more modular, which is
beneficial for larger projects.
Keep the main() clean

• It’s a good practice to use functions to divide a program
into smaller and more manageable parts.
• Each function is small so it can be easier to build, test,
and maintain.

Dart Functional Parameter Types
1. Positional Parameters
2. Named Parameters
3. Required Named Parameters

Dart Named Parameters
If a function uses positional parameters, when calling it, you need to
provide the arguments that follow the order of the parameters.
To define named parameters, you surround them with curly braces

To make a named parameter required, you add the
required keyword in front and remove the default value.

Introduction to the Dart Arrow Functions
If a function body has only one line, you can use an arrow function with the
following syntax

• Null means no value or absence of value.
• In null safety, variables cannot be null unless you
explicitly specify that they can.
Introduction to the Dart Null Safety

To mark an existing type nullable, you place a question mark
after the type. For example:
• Int ? – a nullable integer such as 1, 2, and null.
• double ? – a nullable double such as 3.14, 2.5, and null
• bool ?– nullable Boolean such as true, false, and null.
• String ? – a nullable string such as ‘Hello’, ‘Bye’, and null.

Dart is an object-oriented language. It supports object-oriented
programming features like classes, interfaces, etc. A class in terms
of OOP is a blueprint for creating objects. A class encapsulates
data for the object.
Introduction to the Dart classes

Use the class keyword to declare a class in Dart. A class definition
starts with the keyword class followed by the class name; and the
class body enclosed by a pair of curly braces.
Declaring a Class

•Fields − A field is any variable declared in a class.
•Constructors − responsible for allocating memory for the objects of
the class.
•Setters and Getters − Allows the program to initialize and retrieve
the values of the fields of a class .However, the default ones can be
overridden by explicitly defining a setter/ getter.
•Functions − Functions represent actions an object can take. They are
also at times referred to as methods.

Creating objects from a class
To create an object from a class, you use the class name followed by the
parentheses. It’s like calling a function.

What is Dart this keyword
A class is a blueprint of objects. To reference the current object inside a class,
you use the this keyword. The this keyword means the current instance of
the class.

Constructor
A constructor is a special method for creating and initializing objects of a
class. The constructor is automatically called when an object of the class
is created.
• When you define a class without explicitly providing a constructor, the class
will have a default constructor.
• A default constructor has the same name as the class name.
Default constructor

Introduction to the Dart private fields
When you define a property for a class, you can access it from the
outside of a class. The accessibility of the property is public.
To make the property private, you need to prefix its name with
an underscore (_).

Challenge 18
Q1).Create a class for store the data of a car. We must store the brand , model
, year and the fuel Level(this must be a private field).
Q2).Create the constructor so we can initialize the private field.
Q3).Create all the following methods ,
1. The getFuelLevel method retrieves the fuel level.
2. The displayInfo method displays general information about the car.
3. The refuel method allows adding fuel to the car.
4. The drive method simulates driving the car and consumes fuel.

Dart Getter & Setter
A setter starts with the set keyword and takes a parameter that you
can assign to the private field
A getter uses the get keyword before a property name and returns a
value.
Setters
Getters

Dart Static
• The static keyword is used for memory management of global data
members.
• The static keyword is used for a class-level variable and method that
is the same for every instance of a class, this means if a data member
is static, it can be accessed without creating an object.

Dart Enum type
Enums or enumerated types are special classes representing a
fixed number of constant values.

Introduction to the Dart inheritance
Whenever you use inheritance, it always create a is-a
relation between the parent and child class like Student is
a Person, Truck is a Vehicle, Cow is a Animal etc.

Parent Class: The class whose properties and methods are inherited by
another class is called parent class. It is also known as base class or super
class.
Terminology
Child Class: The class that inherits the properties and methods of
another class is called child class. It is also known as derived class or sub
class.
Dart supports single inheritance, which means that a class can only
inherit from a single class.

•It promotes reusability of the code and reduces redundant code.
•It helps to design a program in a better way.
•It makes code simpler, cleaner and saves time and money on
maintenance.
Advantages Of Inheritance In Dart

•A child class doesn’t automatically inherit constructors from the parent
class.
•Use the super keyword to reference the parent class.
Supper

• The overriding method allows a method in a child class to override
the same method in the parent class.
• Use the super keyword to call the same method from the parent
class.
Method Overriding

Dart abstract classes
So far, we have learned how to define classes. These classes are
called concrete classes. They’re concrete because you can create
new objects out of them.
Unlike a concrete class, you cannot create new objects from an
abstract class. The main purpose of the abstract class is to allow
other classes to inherit from it.

An abstract class may contain abstract properties and methods.
Typically, an abstract class has abstract methods for its child
classes to implement.
When a class inherits from an abstract class, it must implement all
the abstract methods that the abstract class has.
Dart abstract classes

When a future completes, it has two possibilities
Introduction to the Dart Future
A future is an object that represents the result of an asynchronous
operation. A future object will return a value at a later time.
A future has two states: uncompleted and completed.
1. Completed with a value
2. Failed with an error

1. Using a callback
2. Using async and await keywords
When a future completes, you can get the return value.
There are two ways to get the value after the future
completes

Using async and await keywords
• Place the async keyword before the function body to
make the function asynchronous.
• The await keyword works only in async functions. In
other words, if a function contains await keywords, you
need to make it an async function.

Streams In Dart
A stream represents multiple values that will be returned in the future.
A stream is like a pipe, you put a value on the one end, and if there’s a
listener on the other end that listener will receive that value.
Stream
Sink
Here we add the data Here we listen to the data

Dart Lecture Slides for Beginner level to Pro

More Related Content

Similar to Dart Lecture Slides for Beginner level to Pro (20)

Recently uploaded (20)

Dart Lecture Slides for Beginner level to Pro