Flutter Development

(Beginner)
TTKS
Flutter applications for Mobile Phones
 Mobile(iOS, Android)

Flutter Ver 2.0 → Web Application

Ver 3.0 → Window, MacOS(Desktop)

Programming Language DART

IDE ● Visual Studio Code.

● Android Studio.

TTKS
Course Outline

Introduction to Dart Components and Dialog

01 -Variable, Data Type, 04 -Snackbar, Toast, etc
-Operator,Collection, - Alert Dialog, Simple
- Loop, Function Dialog

Introduction to Flutter UI(User Interface)

02 - Setup (VSCode) 05 -Menu, Bottom Navi
- Your First App - Login View(Sample)
Final
Choose one
sample
-System A
Widgets Local Storage
-System B 03 - Stateful/Stateless 06 - SharedPreferences
-System C -Common Widgets

TTKS
Introduction to Dart
(Day1)
Introduction
Online IDE -> https://dartpad.dev/
Variable
Keyword var - Information/data သိမ်းဆည်းေပးတဲ ့
ေနရာ

type variableName;
var variable=value;
Data Types(runtimeType)

int: Integers 30, 10, 20, -3, -3, 0, 10000

double: Floating-point numbers 2.88, 3.2, -1.5, 0.0

bool: Booleans True / False

String: text with “ ” “Khaing”, “Yuta”, “Jennie”, “30”

Introduction to Dart
(Day2)
 Operators

● Arithmetic Operators +, -, *, /, %, ++, –

● Equality and Relational >, <, >=, <=, ==, !=
Operators
● Type test Operator is,!is
● Logical Operator && , || , !
● Conditional Expression condition ? expr1 : expr 2

expr1 ?? expr2
condition ? expr1 : expr 2

If condition is true, return the expr1 value. If not return expr2 value.
 expr1 ?? expr2

If expr1 is non-null, returns its value; otherwise,returns the value of expr2

Introduction to Dart
(Day3)
- Loops(for, while)

- Decision Making(if- else/ switch)

Repeating same actions/functions until the specific condition.
Repeat (5) times

=> brushTeeth()
1. For Loop
2. For in Loop
3. While Loop
 LOOP
For Loop
01
 LOOP
for in loop
02
 LOOP
While loop
03
 Decision Making
If - else
01
 Decision Making

switch-case

02
Introduction to Dart
(Day4)
 Collection
No Array

Similar to array simply

List an ordered group of
objects

Collection
Collections of objs,(no
Set duplicate)

Similar to
Maps Dictionaries(Key-Value)

first-in, first-out
Queue collection
TTKS
Collection → Arranging things together

0 1 2
Donuts
List
 Map

calories locker

Key Value Key Value

cake 200 11 101

donut 500 12 102

cookies 300 13 103

piza 500 14 104

 Map

fruits locker

Key Value Key Value

apple 100 11 101

orange 1500 12 102

mango 300 13 103

grape 2500 14 104

Maps
 List list_name = [ item1 ,item2,item3, ];

Map < key’s type, value’s type> map_name = {

Key : value,
Key : value,
};
Function
Building the line of codes

- Input → output
- Input → process
Input -> Output

buyCoffe()
Input -> Process

lockTheDoor()

unlockTheDoor()
 Function

void
Function
Function
Installation Guide for Flutter
 Set Up

Check
Check Successful or 04
not (flutter version)

Install VSCode
Installing Flutter & Dart in 03
Visual Studio Code

Environment
02
Set Environment variable path

Download the Flutter SDK

software development kit
https://docs.flutter.dev/get-start
01
ed/install/windows
TTKS
Step -1
 Step - 2
After downloading Flutter SDK, extract the file and copy the path MyPc > Local(C:) > src
copy the path of the bin folder
Press WIN + R and paste the following: rundll32.exe sysdm.cpl,EditEnvironmentVariables
Variable Name: FLUTTER_PATH
Variable value: C:\src\flutter\bin
Step -3
Install VSCode -> https://code.visualstudio.com/download
Install “Flutter” library in VS Code
Install “Dart” library in VS Code
Step -4

flutter - - version
Create Project
Connect to Mobile phones
Developer Options Setting > About Phone > Software Information> Build Version

Xiaomi ⇒ Setting > About Phone > MIUI Version

How to enable Developer Option in

phone_brand_name(eg.Vivo, OnePlus)
Select your mobile Device
Run ⇒ Ctrl + F5 (Normal Mode)
Run ⇒ F5 (Debugging Mode)
 Set Up(Android Studio)

Check
Check Successful or 04
not (flutter version)

Install Android studio

Installing Flutter & Dart in 03
Android Studio

Environment
02
Set Environment variable path

Download the Flutter SDK

software development kit
https://docs.flutter.dev/get-start
01
ed/install/windows
TTKS
Step -1
Extract the Files

Extract the downloaded zip file and move it to the desired location you want to install Flutter SDK.
Update Path Variable(Environment Set up

click the Start button and type to search for and then click on Edit environment variables for your
account.
Under User variables, click on and highlight Path. Click Edit
click New and add your flutter\bin directory
Confirm Installed Tools for Running Flutter
Download and Install Android Studio
https://developer.android.com/studio
Double click on exe file
Click “Next” to continue
flutter doctor --android-licenses

To install android Studio in Mac.

https://treehouse.github.io/installation-guides/mac/android-studio-mac.html
 Basic Syntax
01 variable var name = “K”; int num = 34;

02 Data Type(Runtime Type) String, int, bool, double

03 Operator +,-,*,/,%, ++,--, == , != , >, <, >=, <=, is, !is, &&, ||, !

04 Expression Condition?? Exp1 : Exp2 / exp1??exp2

05 Loop For Loop, For in Loop, While loop

06 Decision Making If-else, Switch case

List => add, remove, length,

07 Collection Map => add, remove, length (key-value) pair

08 Function - parameter/ return type (void)

Introduction to Flutter

(Day6)
01 Default Flutter app(Counter app)

02 Scaffold & Appbar

Default Flutter app(Counter app)

UI (User Interface) Business Logic

human-computer How program works,
communication how data store, delete,
etc
UI Business logic

if(userName &&
pw exist?)

Yes

Login to
Facebook with
username
No

Ask correct
UserName , PW?
Flutter

Material

- main() function
- runApp(Parent App)
Cupertino(iOS)
Scaffold
https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffold => parent of all widgets

Drawer
Bottom Navigation Bar
Bottomsheet
AppBar

Appbar => topmost component of the app

Widgets

(Day7)
What is Widget?
Each element on a screen of the Flutter app is a widget.

Types of Widgets:

Stateless Widget
01 state cannot be altered
once they are built

Stateful Widget
02 state can be altered
once they are built
Stateless Widget

★ state can not be altered once they are built

★ No changes in amount of variables,retrieving
data

Eg : Text, RaisedButton, Icons

Stateful Widget

★ state can be altered once they are built

★ an app can change multiple times with
different sets of variables, inputs, data.

CheckBox, RadioButton,
Form, TextField.
Layouts in Flutter
Layout also a widget => Arrange Vertically , Horizontally others widgets.

things you don’t see on screen such as the rows, columns,Center

Row Widgets
horizontal arrange for widgets

mainAxisAlignment

Alignment
Properties

crossAxisAlignment
start: Place the children from the starting of the row.

end: Place the children at the end of the row.

center: Place the children at the center of the row.

spaceBetween: Place the space evenly between the children.

spaceAround: Place the space evenly between the children and also
half of that space before and after the first and last child.

spaceEvenly: Place the space evenly between the children and also
before and after the first and last child
Column Widgets
Vertical arrange for widgets

mainAxisAlignment
Alignment
Properties

crossAxisAlignment
start: Place the children from the starting of the column.

end: Place the children at the end of the column.

center: Place the children at the center of the column.

spaceBetween: Place the space evenly between the children.

spaceAround: Place the space evenly between the children and also
half of that space before and after the first and last child.

spaceEvenly: Place the space evenly between the children and also
before and after the first and last child
Common Widgets
 Radio Button
Text

TextField
Slider

Icon

Switch
Button

Checkbox

Icon Button
Text
display a string of text
Attributes Descriptions

foreground Foreground color for the text.

background background color for the text.

fontWeight thickness of the text

fontSize the size of the text.

fontFamily Type of Font (eg. Arial, Google Font)

fontStyle bold or italic

Color the color of the text.

decoration decorate text using the three parameters: decoration,

decorationColor, decorationStyle
TextField
an input element which holds the alphanumeric data, such as
name, password, address, etc
 onChanged method

retrieve the value of a TextField

Controller method
Button
● Touchable or clickable items.
● provides a user to trigger an event such as taking actions, making choices, searching things,
and many more.

Types of Flutter Buttons

● Raised Button (onPressed)

● Floating Button (onPressed)
● Icon Button (onPressed)
● Inkwell Button (onTap)
● PopupMenu Button(action)
● Outline Button (onPressed)
Icon
a graphic image (logo) representing specific item containing meaning for the user.

https://api.flutter.dev/flutter/material/Icons-class.html

Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
),

Icon(
Icons.audiotrack,
color: Colors.blue,
size: 36.0,
),
Icon Button

IconButton(
icon: const Icon(Icons.android),
color: Colors.white,
onPressed: () {},
),
- Checkbox/Radio button
- Image
-Slider, Switch
 Checkbox

always used in the Stateful Widget

Radio Button ListTile(
leading: Radio<String>(
value: 'female',
groupValue: _selectedGender,
onChanged: (value) {
setState(() {
_selectedGender = value!;
});
},
),
title: const Text('Female'),
),
Image

pubspec.yaml

Image.asset('assets/flower_img.jpeg')
Slider

Slider(
value: sliderValue,
activeColor: Colors.green,
inactiveColor: Colors.red,
min: 1.0,
max: 100.0,
onChanged: (value) {
sliderValue = value;
},
)
Switch
Components and Dialog
-SimpleDialog/ AlertDialog
- Snack Bar/ Toast
Simple Dialog
to display a list of options that users can select.

01 Stateful Widget

02 Create a method and return the showDialog

widget.

03 Inside the builder of showDialog, return the

SimpleDialog.

04 Add a button (e.g. ElevatedButton)

Future<void> _showAlertDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog( // <-- SEE HERE
title: const Text('Cancel booking'),
content: SingleChildScrollView(
child: ListBody(
children: const <Widget>[
Text('Are you sure want to cancel booking?'),
],
),
),
 actions: <Widget>[
TextButton(
child: const Text('No'),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
child: const Text('Yes'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
Alert Dialog
to get confirmation from users to perform actions.

01 Stateful Widget

02 Create a method and return the showDialog

widget.

03 Inside the builder of showDialog, return the AlertDialog.

Add a button (e.g. Positive ,

04 Negative).
Snack Bar
 Toast
https://pub.dev/packages/fluttertoast

dependencies:
flutter:
sdk: flutter
fluttertoast: ^8.1.2

Ctrl + Shift + P => Flutter Pub Get

import 'package:fluttertoast/fluttertoast.dart' ;
Padding
Margin

List View

Stack & Positioned

Padding & Margin

● Padding provides the space between the border and the content of an element.
● Margin provides the space between the border and outer elements.

SizedBox & Container

simple box with a specified size.
Login
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello World!'),
),
 List View

ListView.builder()
ListView.builder({

Axis scrollDirection = Axis.vertical,

ScrollController? controller,
EdgeInsetsGeometry? padding,
int? itemCount,
itemBuilder,
});
const EdgeInsets.symmetric({
double vertical = 0.0,
double horizontal = 0.0,
}) : left = horizontal,
top = vertical,
right = horizontal,
bottom = vertical;
Stack
a layer of widget which places their children on top of each other like a stack of books
Positioned
A child of the stack is positioned on the inside of the stack.

https://api.flutter.dev/flutter/widgets/Position
ed-class.html
User Interface

Login View
lib

common

services

storage

view/UI

login_view

home_view
Menu
Drawer Menu
Navigator.of(context).pop();
Navigator is used for implementing closing functionality on the drawer when the user wants
to close it after tapping on some item
Or Use to go back previous screen.

Connect to next page

Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){

return NextPage();
}));
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (BuildContext context) {
return HomeScreen();
}));
Bottom Navigation Bar
Scaffold(

bottomNavigationBar:

);
Local Storage
Flutter Library => https://pub.dev/
Shared Preferences
● SharedPreferences is used for storing data key-value pair in the Android and
iOS.

01 add this package in pubspec.yaml

and run ‘pub get’

02

https://pub.dev/packages/shared_preferences
Create “shared_preference_manager.dart” file under lib/services/
Save data

can add int, String, double and bool using SharedPreferences

keys are only string values
Read data

only required to pass the key to read Data.

keys are only string values
Remove data

To remove the data from the storage, provide the key in the remove(String key) method.
keys are only string values
Check value if present or not?
Clear All Local Storage
 Final Project
E-Commerce
Social Media Booking /Order
(Shopping)
Screen Screen Screen
● Register/Sign Up ● Register/Sign Up ● Register /Sign Up
● Login ● Login ● Login
● Menu(at least one ● Menu(drawer or ● Menu(drawer or
menu) bottom) bottom navi)
● Home Screen ● Home Screen ● Home Screen

Reference Reference Reference

● Facebook ● Food Pander ● Shop.com.mm
● Twitter ● Grab Food ● One Kyat
Thanks