Flutter_CharbelAkiki.pdf

FLUTTER
Presented by: Charbel Akiki, Lebanon 2023
Computer and Communication Engineering
Student at Notre Dame University, Lebanon.
Intern with AIIHC International Ltd.
Supervisor: Ramzi El Feghali
August-November 2023

AIIHC International Ltd. 2023
WHAT IS
FLUTTER?
Based on Dart
Used for User Interface in App
development
Supports development for both
android and IOS
High performance framework

 Large repository of packages and
libraries
 Unique code base for all platforms
 Fewer testing required
 Easy customization
 Fast development
 Hot Reload feature
ADVANTAGES

DISADVANTAGES
 Dart mastery required
 UI and logic are intermixed
 Can be overwhelming for coding beginners
 Packages are user-developed

FLUTTER DOWNLOAD
HEAD TO FLUTTER.COM DOWNLOAD GIT,
ANDROID STUDIO AND VS
CODE
DOWNLOAD FLUTTER SDK
PACKAGES

HOW TO CREATE A FLUTTER
PROJECT?
Method 1:
Through the
Terminal
(Command
Prompt or
PowerShell)
Method 2:
Through VS Code
directly

FLUTTER
PROJECT

BASICS OF DART

KEYWORDS

EXAMPLES
var value = true;
final x = null;
const y = 5;

DATA TYPES
Integers
Doubles
Strings
Booleans
Lists
Sets
Maps
Null

EXAMPLES
 final String x = ‘Hello’;
 const Int y = 5;
 const List L = [‘a’,’b’,’c’];

OPERATORS
Arithmetic (+, -, *, /, ~/, % )
Increment and decrement (x++, ++x, x--, --x)
Equality and relational (==, !=, <, >, <=, >= )
Type checking and casting (is, is! )
Logical operators (!, ||, &&)
Null-safe and null-aware (??, ??=, ?.)

EXAMPLES
var x = 1 + 1; 2
X++; 3
Print(x==3) true
X is int  true
Print( x==3 && x <2)  false

VARIABLES
 Constants (final, const)
 Dynamic (No assigned value)
 Regular (can be of any data type)

EXAMPLES
 Final Int x = 5;  Constant
 Var x;  Dynamic
 Var Int x = 5;  Regular Variable

FAMILY OF
LISTS
 Lists [elements]
 Sets {unique elements}
 Maps {keys: elements}

EXAMPLES
 List <String> names = [‘joe’, ‘joe’, ’mike’];
 Set <Int> numbers = {1, 2, 3};
 Map <int, String> books = {1: ‘Book1’, 2:
‘Book2’};

LOOPS
Dart supports for , while
and do…while loops:
for (var i = 1 ; i <= 10; i+
+){…}
1. Creates variable i of type int equal to 1
2. Checks condition (i=1<=10)  enter body or exit
loop
3. Execute body
4. Increment i by 1
5. Repeat from step 2

EXAMPLES
Var I = 1;
While(I <=10){… i++}
Do{…}while(I<=10) does the loop body at least once
then checks condition

CONDITIONS
A decision-making block evaluates a
condition before the instructions are
executed. Dart supports If, If..else and
switch statements.
 If(x==1){…}
Else if(x==2}{…}
Else{…}
 Switch(x){
Case 1: //if x==1
…
Break;
Case 2:
…
Break;}

Properties:
 Return Value
 Name
 Parameters
 Body
FUNCTIONS

FUNCTIONS
SYNTAX
String getFullName(String firstName =
‘Charbel’, [String? lastName]’){
return ‘$firstName $lastName’;
}

OBJECT ORIENTED
PROGRAMMING

CLASSES
A class is a blueprint for creating objects, it
is a grouping of various functionalities of a
certain object, it can have many features
such as methods, properties, constructors
and instances.
class Person {
final String name;  Property
Person(this.name);  Constructor
void func(){  Method
Print(‘this.name’);
}
}
final guy = Person(‘John’);  Instance of
class Person
guy.func()  prints ‘John’

INHERITANCE
Used to transfer a parent class
properties to its child:
Class Man extends Person{
final bool beard;
Man(super.name, this.beard);
}

ABSTRACT
CLASSES
Used to create classes that are not
meant to be instantiated:
abstract class Person{…}
 Cannot make a Person Object
 Can create an extended Man class
from Person

FACTORY
CONSTRUCTOR
S
 Used to facilitate the instantiation of
similar instances (that have same
property)
Class Person{
final string name;
Person(this.name);
factory
Person.FactoryConstructor() =>
Person(‘Joe’)
}
var guy = Person.FactoryConstructor();
Print(guy.name)  ‘joe’

CUSTOM
OPERATORS
Class Person{
…
@override
bool operator==(covariant
Person other) =>other.name ==
name;
}
Final guy1 = Person(‘joe’);
Final guy2 = Person(‘rogan’);
Print(guy1 == guy2)  false

WIDGETS

WIDGETS
 Basis of Flutter UI
 Classes by nature (properties, methods
etc…)
 Widget Complexity
 Countless usages

WIDGET TYPES
 Platform Specific
 Layout
 State Maintenance
 Basic

PLATFORM
SPECIFIC
WIDGETS
 Material Widgets: Android (Scaffold, AppBar
etc…)
 Cupertino: IOS (CupertinoPageScaffold,
CupertinoButton etc…)

LAYOUT WIDGETS
 Center
 Row
 Column
 Container
 SizedBox

EXAMPLE OF USING LAYOUT
WIDGETS TO MAKE A TABLE OF
WIDGETS
Scaffold(
body: Container(
child: Row(
children: [Widget1(),Widget2()];
)
),
Container(
child: Row(
children: [Widget3(),Widget4()];
)
)
)
Widget1 Widget2
Widget3 Widget4

STATE
MAINTENANCE
WIDGETS
 Stateful (Reactive, allows for auto re-
rendering)
 Stateless (non-reactive)

SOME BASIC
WIDGETS
 Text():
body: Text(text: ‘Hello World’, style:
TextStyle(fontstyle: FontStyle.italic))
 Image():
body: Image.network(image:
’https://…’, height: 200)
 Icon():
body: Icon(Icons.email)

SAMPLE
CODE

SOME USEFUL PACKAGES
http
Dio
Dio_cookie_manager

HOW TO ADD
PACKAGES
 Head to pub.dev
 In the pubspec.yaml file, under
dependencies copy and paste the
name and version of the package.
 Import
‘package:package_name/package
_name.dart

THANK YOU FOR
YOUR TIME

Flutter_CharbelAkiki.pdf

More Related Content

Similar to Flutter_CharbelAkiki.pdf (20)

Recently uploaded (20)

Flutter_CharbelAkiki.pdf