FLUTTER COURSE

By Sayar Phyo Thu Han

TOPIC 1 – Dart & Flutter Basic

By Sayar Phyo Thu Han

 Learning Outcome

➢ To learn about Dart Basic

➢ To learn about Setting Up Flutter

➢ To learn about Flutter Basic

 What is Flutter
⮚ Flutter is cross-platform developments tools to create
multi platform App (Window ,Mac ,Linux)

⮚ Not only create Mobile App for IOS and Android but
also use for creating desktop and web including
embedded devices

⮚ Popular for providing

1. rich beautiful material UI and Cupertino style for android and ios
2. Fast Processing with high Performance and provide easier debugging
3. Easy Integration with third party plugin and access native features
and API
 What is Flutter

Flutter Framework
SDK (Widget Library +dart)

Compile Source with

native code and produce
UI such as
radio,Text
Android/IOS
 Flutter VS React Native
Flutter React Native

Dart JavaScript /TypeScript

Own Rendering Engine Skia Interface between JavaScript and

Native Component
Cross-Platform Development
Tools
Use widget which render on Use component which specific to
different device each platform
Faster loading Little slow

Destop,web ,Mobile Mobile

Small support group but it is Large Community support and more

growing popular
 Flutter & Dart
⮚ Flutter’s API perform presenting UI components on a
device’s screen.
FlutterApI(UI)
• textbox Flutter App
• Button
<Dart>
• gesture.

⮚ Dart’s API deals with functions or processing of that UI

components such as trimming text

⮚ Every Flutter app calls on both the Dart and Flutter APIs.
 CoreConcept of Flutter
Everything is widget so that putting widget inside one another is
key concept in building Flutter app but some are not visible
 How To Develop Flutter
<Dart Code>
-One Coding Technique for different platform

-Process with widget UI

-No Drag & Drop

-Write code base for UI
 Installation Requirements for
Flutter
• Android Sdk
• Android Studio
Visual Studio Code
https://code.visualstudio.com/

• Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases
 What is Dart ?

⮚ A programming Language developed by google

⮚ Aim for frontend UI for web & mobile but use in other and
stronged type
⮚ Syntax similar to Java ,C# & JS
⮚ General-purpose programming language, it compiles fast
and is concise
⮚ Dart can be compiled both AOT and JIT
 Data Types in DART
Dart programming language support following data types
⮚ Numbers
1. Integer

2. Double

⮚ Strings
⮚ Boolean
⮚ Lists,Sets
⮚ Map
⮚ Runes and Symbol
⮚ Dynamic
 Using Variable
Variable is like a box or container for storing value
temporary for later use .

Symbol
Variabletype name=value;
Example
String name=“Mg MG”;
int i=10;
double d=10.0;
bool b=true;
 If----else
For doing comparison such as > ,<,==,!= you have to use if
..else
Symbol
if(condtion){
//write code here
}
else if(condition){
//write code here
}
else{
//write code here
}
 If----else
Example
int mark=40;
if(mark>40 && mark<65){
print(“pass”);
}
else if(mark>79 && mark<=100){
print(“Credit”);
}
else{
print(“fail”);
}
 Loop
For handling repetitive case ,you can use loop to avoid duplicate and
reduce code
Symbol
for(start ;condition;increment(or)decrement){
//write code here
}
while(condition){
//write code here
}
do{
//write code here
}while(condition)
 Loop
Example
//constructing for loop
for(var i=0;i<3;i++){
print(“Hello ${i});
}
//constructing while
var w=0;
while(w<10){
print(“Hello ${w+1}“);
w++;
}
//constructing do while
var d=0;
do{
print(“Hello index:“+(d+1).toString());
d++;
}while(d<10)
 List
List is similar to Array and ArrayList of other programming
and you can store multiple object

var listname=[value1,value2,value3];

(or)

var listname=new List();

listname.add(value);

(or)

List<type> numberdata=[];
 Map
Map store data as key/value pair and its size can shrink and
grow at run time .

Using map

var mapname={‘key’:’value’};

(or)

var mapname=new map();

mapname[‘key’]=value;
 Function with Parameter

You can construct parameter in function and there

are three type of parameter and they are following.
1. Positional Parameter
2. Named Parameter
3. 3.Optional Parameter
 Function with Parameter
(1)Function with Position Parameter
You have to insert vaule in sequence as function parameter
defined and need to insert all value .
Symbol
void functionName(parametertype name){
//write code here
}
Example
void acceptInfo(String name ,int age){
print(“My name is ${name} and age is {age}”);
}
//function calling
acceptInfo(“Dart”,11);
 Function with Parameter
(2)Function with Optional Parameter
Optional Prameter can define by using [ ] and with
optional parameter you can add default value or
nullable value.
Symbol for default
void functionName(type name,[type
name=value]){
//write code here
}
 Function with Parameter
(2)Function with Optional Parameter
Example

void showMyInfo(String name ,int age ,[String

country=“Myanmar”]){

print(“My name is ${name} and age is {age}”);

print(“I am from ${country}.”);

//function calling

showMyInfo(“Mg Mg”,18);

Remark: You can omit functional parameter by using assert

Assert(showMyInfo(“mg Mg”,18)
 Function with Parameter
(3)Function with Named Parameter
You can insert value as you desire whether in sequence or not but you
have to use parameter name for inserting value when calling function
name.? represent parameter is nullable so that you can omit inserting.
Symbol
void functionName({parametertype? name}){
//write code here
}
Example
void acceptMyInfo({String? name ,int? age}){
print(“My name is ${name} and age is {age}”);
}
//function calling
acceptMyInfo(age:21,name:“Zaw Zaw”);
 Function with Parameter
(3)Function with Named Parameter and Required
Required means parameter required value so you cant omit that
param and need to insert value when calling function
Symbol
void functionName(type name,required type
name){
//write code here
}
 Function with Parameter
(3)Function with Named Parameter and Required

void showMyInfo({String? name ,int? age

,required String city}){

print(“My name is ${name} and age is {age}”);

print(“I live in ${city}.”);

//function calling

showMyInfo(city:”Yangon”);
 Lambada Function(Arrow Function)
Known as arrow function use for single expression
which use for single line of code .
Symbox
• Functioname()=> expression

• Return functioname()=>expression

Example
int calculateArea(int w,int h)=>w*h;

printInfo()=> print(“It is test”);

 Class and Object
Object is one of the data structure and create by constructing class.
Class is template for creating object.
Syntax
Class classname
{
//declare variable
void methodName(){
}
void methodName2(){
}

}
 Class and Object
Example
class Book
{
void acceptBookInfo(){
print(“It is accepting Book Info”);
}
void printBookInfo(){
print(“It is printing book info”);
}

}
 Class and Object
Object is implementation of that templte
Syntax
Classname name=new Classname();
Example
Book he=new Book();
he.acceptBookInfo();
He.printBookInfo();
 Class and Constructor
✓ Constructor is entry point or initialization point of class.
✓ To construct constructor you have to use same name as class without
adding void or return type.
✓ You can construct multiple constructor and like function there are
named and positional constructor and also exist default constructor(no
args constructor)

Syntax
Class classname{
public classname(){
//initializing class as object
}
}
 Class and Constructor
Example 1
class Book{
public Book(){
print(“Book Info”);
}
}
Example 2
class Book{
String title;
int year;
public Book({this.title;,this.year});
}
 Final & Const
Both final and Const can be used in declaring constants.
⮚ Final known as run-time constant
Syntax
final int test;
test=10;

⮚ Const known as compile-time constant

Syntax
const datatype variablename
example
const pi = 3.14;
 Static
Static variable can defined by using static keywords and
called as class variable because all class object will share
that variable(single copy).
Static variable cant use without object.

Example
Class Config{
static String url=www.abc.com;
}
//calling without object
Config.url=“something”;
print(Config.url);