SlideShare a Scribd company logo
Building UI’s
Apoorv Pandey
Flutter Dev
@apoorvpandey0
Build Beautiful UI’s with Flutter
Week 3
Contents
What all we’ll cover today
1. Quick recap
2. Fundamental UI building widgets
3. Code along session and QnA
• Flutter is developed by Google
• It is open sourced
• Flutter provides a wide range of
widgets for ex. Text,Image,Card
etc.
• Flutter is a cross-platform
application development framework.
• It allows us to create applications
for both Android and iOS,web,
desktop using a single codebase.
Flutter festival - building ui's with flutter
v
Everything is a widget in
Flutter
Fundamental widgets for UI
Let’s learn some essential widgets
1. Row,Column
2. Container,Text
3. Container decoration
4. Stack widget
5. How to position stuff!
Column
This widget arranges its children in a vertical
direction on the screen
Main Axis
Cross Axis
Main Axis
Cross Axis
Row
This widget arranges its children in a horizontal
direction on the screen
Row and column
Nesting
App Bar
Bottom
navigation bar
Body
Let’s move to code!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:
Scaffold(
appBar: AppBar(
title: Text("Hello2"),
),
body: Text("This is my first application")),
);
}
}
App structure
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.network(“url1"),
Image.network(“url2"),
],
)
Column of two images
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
BottomNavigationBarItem(label: "Search", icon: Icon(Icons.search)),
BottomNavigationBarItem(label: "Profile", icon: Icon(Icons.person)),
],
),
Add bottom navigation bar
Stack
This widget places widgets one over another
Stack
By default, objects are positioned
on top left of the screen/stack
We can position the child elements using
1. Positioned Widget
2. Align Widget
body: Stack(
children: [
Image.network(“URL”),
Image.network(“URL2”),
Text("Image 1"),
),
body: Stack(
children: [
Positioned(child: Image.network(“URL”)),
Positioned.fill(
child: Align(alignment: Alignment.center, child: Text("Image 1")),
)
],
),
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:
Scaffold(
appBar: AppBar(
title: Text("Hello2"),
),
body: Text("This is my first application")),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:
Scaffold(
appBar: AppBar(
title: Text("Hello2"),
),
body: Text("This is my first application")),
);
}
}
Headline
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada.
Duis sit amet placerat quam. Donec eget eros egestas nunc
venenatis suscipit at at felis. Duis sit amet placerat quam. Donec eget
eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat
quam. Donec eget eros egestas nunc venenatis suscipit at at
felis. Duis sit amet placerat quam.
Headline
Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
gravida placerat dictum. Sed sagittis accumsan dolor ut
malesuada. Duis sit amet placerat quam. Donec eget eros egestas
nunc venenatis suscipit at at felis. Duis sit amet placerat quam.
Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit
amet placerat quam. Donec eget eros egestas nunc venenatis
suscipit at at felis. Duis sit amet placerat quam.
Headline
Subtitle
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum gravida placerat
dictum. Sed sagittis accumsan dolor ut
malesuada. Duis sit amet placerat quam.
Donec eget eros egestas nunc venenatis
suscipit at at felis. Duis sit amet placerat
quam.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut
malesuada.
• Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis
suscipit at at felis.
Subtitle
Headline
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vestibulum
gravida placerat dictum.
• Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
• Vestibulum gravida placerat dictum. Sed
sagittis accumsan dolor ut malesuada.
Headline
Subtitle
v
“Anytime I’m involved with
anything that’s well-
received, it’s a surprise to
me.”
- Larry David
protected void onTryUpdate(int reason) throws RetryException {
// Do some awesome stuff
int foo = 15;
publishArtwork(new Artwork.Builder()
.title(photo.name)
.imageUri(Uri.parse(photo.image_url))
.viewIntent(new Intent(Intent.ACTION_VIEW,
Uri.parse(“http://500px.com/photo/" + photo.id)))
.build());
scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS);
}
Color
Hex: #041e3c Hex: #042b59 Hex: #043875 Hex: #0553b1
Hex: #e7f8ff
Hex: #4A4A4A
Hex: #027dfd Hex: #13b9fd Hex: #81ddf9 Hex: #b8eafe
Hex: #0468d7
Hex: #DADCe0
Hex: #f1f3f4
Chart
Elements
Build your visuals using the 30pt grid. Build layouts that snap to grid-lines
or sit in-between. For details on using the grid please see getting started.
Caption
Large
Box
Caption
40pt Caption
6pt Object Border
Medium Box
Caption
Caption
Caption
Caption
Small Box
6pt Object Border
Caption
Use for nested items only
8pt Corner Radius
30pt Caption 25pt Caption
Labels
Label
Label
Round Corner Radius
30pt Caption
Arrow
s
Simple Charts: 6pt
Complex Charts: 5pt
Simple chart
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
All-purpose
Chart
Step A Step B Step C
Short
Label
Step D Step E
Chart title
2012 2014 2016 2018 2020
Category
Label One
Caption 1
Two lines
Caption 3
Two lines
Caption 2
Two lines
Caption 5
Two lines
Caption 4
Two lines
Caption 6
Two lines
Caption 7
Two lines
Caption 9
Two lines
Caption 8
Two lines
Category
Label Two
Icon
s
Accessibility Expand Late Credit card Extension Thumb Up Remove Verified Q&A
Finance Android Turn in Trash Actions Download History Store List
Wallet Announcement Backup Document Favorite 1 Open Home Print Swap
Account Ratio Tag Server Favorite 2 Grade/rate Lock Language Receipt
Add shopping Chart Bug Event Find Page Page view Basket Time Work
All icons are vector objects and can
be recolored using the fill menu.
Icon
s
Alarm Assessment Sync Exit App Movie Visibility Trolley Open Location
Settings Assignment Check Explore Thumb Down Today Perm Media People search
Airplane Signal Photo Play 1 Block Send Smartphone Style Walk
Bluetooth WiFi Upload Play 2 Email Laptop iPhone Controls Bike
Pie Chart Money Attachment Video Business Chromebook Security Notification Bus
All icons are vector objects and can
be recolored using the fill menu.
Icon
s
Developer Write Cloud Audio Key Desktop Mac Watch Person Car
Devices Quote Folder Web Page Archive Desktop PC Flag World Boat
Software Emotion Mic Call Cut headphones Camera Education Train
Weather Link Movie Chart Paste Keyboard TV MMS Subway
Hotel Laundry Location History Layers Offer Map Bar Pizza Web
All icons are vector objects and can
be recolored using the fill menu.
Icon
s
Cafe Theatre Gaming Florist Restaurant Gas Delivery Hospital Taxi
Print Radio Stream
All icons are vector objects and can
be recolored using the fill menu.
Flags
Americas APAC EMEA
US MX CA AR AU AT BE CH DE ES
GB IE IT NL
BO BR
CL CO CR EC SV GT
HN NI PA PE UY
HK ID
IN
AU
JP KR MY NZ PH
SG TH TW
FR
Nordics PT
Device Library

More Related Content

What's hot (20)

PDF
Introduction to flutter
Wan Muzaffar Wan Hashim
 
PPTX
Flutter UI Framework
Yuliia Makarenko
 
PPTX
Why choose flutter 2 over flutter 1
Concetto Labs
 
PPTX
Flutter
shreyash singh
 
PPTX
Flutter for web
rihannakedy
 
PPTX
Introduction to flutter(1)
latifah alghanem
 
PPTX
Flutter workshop
Vishnu Suresh
 
PPTX
Flutter talkshow
Nhan Cao
 
PPTX
What and Why Flutter? What is a Widget in Flutter?
MohammadHussain595488
 
PDF
Flutter Development Services
The NineHertz
 
PPTX
A flight with Flutter
Ahmed Tarek
 
PDF
Pune Flutter Presents - Flutter 101
Arif Amirani
 
PPTX
Flutter
Ankit Kumar
 
PPTX
Flutter
Mohit Sharma
 
PPTX
Flutter vs not flutter
Denis Volyntsev
 
PPTX
Flutter introduction
SheilaJimenezMorejon
 
PPTX
Flutter
Mohit Nainwal
 
PDF
Flutter Tutorial For Beginners | Edureka
Edureka!
 
PDF
Building beautiful apps with Google flutter
Ahmed Abu Eldahab
 
PPTX
Flutter frame work
samash
 
Introduction to flutter
Wan Muzaffar Wan Hashim
 
Flutter UI Framework
Yuliia Makarenko
 
Why choose flutter 2 over flutter 1
Concetto Labs
 
Flutter for web
rihannakedy
 
Introduction to flutter(1)
latifah alghanem
 
Flutter workshop
Vishnu Suresh
 
Flutter talkshow
Nhan Cao
 
What and Why Flutter? What is a Widget in Flutter?
MohammadHussain595488
 
Flutter Development Services
The NineHertz
 
A flight with Flutter
Ahmed Tarek
 
Pune Flutter Presents - Flutter 101
Arif Amirani
 
Flutter
Ankit Kumar
 
Flutter
Mohit Sharma
 
Flutter vs not flutter
Denis Volyntsev
 
Flutter introduction
SheilaJimenezMorejon
 
Flutter
Mohit Nainwal
 
Flutter Tutorial For Beginners | Edureka
Edureka!
 
Building beautiful apps with Google flutter
Ahmed Abu Eldahab
 
Flutter frame work
samash
 

Similar to Flutter festival - building ui's with flutter (20)

PPTX
Lecture 5 _ Building Layouts (1).pptx
ssuser0ee7de1
 
PDF
Flutter Festivals IIT Goa Session 2
SEJALGUPTA44
 
PPTX
App_development33333333333333333333.pptx
sameehamoogab
 
PPTX
AppBar Class In Flutter.pptx
BOSC Tech Labs
 
PPTX
Mobile Application Development class 003
Dr. Mazin Mohamed alkathiri
 
PPTX
Flutter workshop
Narayan Vyas
 
PPTX
developer presentation templates
AkhilJamwal1
 
PPTX
App Dev-GDG USAR Tech Winter Break 2024.pptx
raiaryan174
 
PPTX
Mobile Applications Development class 04-Layout-04
Dr. Mazin Mohamed alkathiri
 
PPTX
Mobile Applications Development class 03-starting with flutter
Dr. Mazin Mohamed alkathiri
 
PDF
Basic Introduction Flutter Framework.pdf
PhanithLIM
 
PPTX
FlutterArchitecture FlutterArchitecture.ppt
KevinNemo
 
PPTX
FlutterArchitecture FlutterDevelopement (1).pptx
hw813301
 
PDF
Flutter Apprentice (First Edition) - Learn to Build Cross-Platform Apps.pdf
SyeedTalha2
 
PPTX
industrial knowledge of fluter ITR presentation.pptx
zorom9264
 
PPTX
App_development22222222222222222222.pptx
sameehamoogab
 
PDF
Introduction to flutter
龍一郎 北野
 
PPTX
Adaptive UI for Android and iOS using Material and Cupertino.pptx
RubenGray1
 
PPTX
session_01_react_.pptx
AyaBenkabbour1
 
PDF
Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile foc...
DevClub_lv
 
Lecture 5 _ Building Layouts (1).pptx
ssuser0ee7de1
 
Flutter Festivals IIT Goa Session 2
SEJALGUPTA44
 
App_development33333333333333333333.pptx
sameehamoogab
 
AppBar Class In Flutter.pptx
BOSC Tech Labs
 
Mobile Application Development class 003
Dr. Mazin Mohamed alkathiri
 
Flutter workshop
Narayan Vyas
 
developer presentation templates
AkhilJamwal1
 
App Dev-GDG USAR Tech Winter Break 2024.pptx
raiaryan174
 
Mobile Applications Development class 04-Layout-04
Dr. Mazin Mohamed alkathiri
 
Mobile Applications Development class 03-starting with flutter
Dr. Mazin Mohamed alkathiri
 
Basic Introduction Flutter Framework.pdf
PhanithLIM
 
FlutterArchitecture FlutterArchitecture.ppt
KevinNemo
 
FlutterArchitecture FlutterDevelopement (1).pptx
hw813301
 
Flutter Apprentice (First Edition) - Learn to Build Cross-Platform Apps.pdf
SyeedTalha2
 
industrial knowledge of fluter ITR presentation.pptx
zorom9264
 
App_development22222222222222222222.pptx
sameehamoogab
 
Introduction to flutter
龍一郎 北野
 
Adaptive UI for Android and iOS using Material and Cupertino.pptx
RubenGray1
 
session_01_react_.pptx
AyaBenkabbour1
 
Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile foc...
DevClub_lv
 
Ad

Recently uploaded (20)

PDF
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
PDF
Unified_Cloud_Comm_Presentation anil singh ppt
anilsingh298751
 
DOCX
CS-802 (A) BDH Lab manual IPS Academy Indore
thegodhimself05
 
PPTX
Heart Bleed Bug - A case study (Course: Cryptography and Network Security)
Adri Jovin
 
PPTX
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
PPTX
Types of Bearing_Specifications_PPT.pptx
PranjulAgrahariAkash
 
PPTX
Depth First Search Algorithm in 🧠 DFS in Artificial Intelligence (AI)
rafeeqshaik212002
 
DOC
MRRS Strength and Durability of Concrete
CivilMythili
 
PPTX
Day2 B2 Best.pptx
helenjenefa1
 
PPTX
Product Development & DevelopmentLecture02.pptx
zeeshanwazir2
 
PPTX
Hashing Introduction , hash functions and techniques
sailajam21
 
PDF
International Journal of Information Technology Convergence and services (IJI...
ijitcsjournal4
 
PPTX
Worm gear strength and wear calculation as per standard VB Bhandari Databook.
shahveer210504
 
PPTX
Evaluation and thermal analysis of shell and tube heat exchanger as per requi...
shahveer210504
 
PPTX
265587293-NFPA 101 Life safety code-PPT-1.pptx
chandermwason
 
PDF
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
PPTX
GitOps_Repo_Structure for begeinner(Scaffolindg)
DanialHabibi2
 
PPTX
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
PPTX
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PDF
PORTFOLIO Golam Kibria Khan — architect with a passion for thoughtful design...
MasumKhan59
 
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
Unified_Cloud_Comm_Presentation anil singh ppt
anilsingh298751
 
CS-802 (A) BDH Lab manual IPS Academy Indore
thegodhimself05
 
Heart Bleed Bug - A case study (Course: Cryptography and Network Security)
Adri Jovin
 
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
Types of Bearing_Specifications_PPT.pptx
PranjulAgrahariAkash
 
Depth First Search Algorithm in 🧠 DFS in Artificial Intelligence (AI)
rafeeqshaik212002
 
MRRS Strength and Durability of Concrete
CivilMythili
 
Day2 B2 Best.pptx
helenjenefa1
 
Product Development & DevelopmentLecture02.pptx
zeeshanwazir2
 
Hashing Introduction , hash functions and techniques
sailajam21
 
International Journal of Information Technology Convergence and services (IJI...
ijitcsjournal4
 
Worm gear strength and wear calculation as per standard VB Bhandari Databook.
shahveer210504
 
Evaluation and thermal analysis of shell and tube heat exchanger as per requi...
shahveer210504
 
265587293-NFPA 101 Life safety code-PPT-1.pptx
chandermwason
 
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
GitOps_Repo_Structure for begeinner(Scaffolindg)
DanialHabibi2
 
Introduction to Neural Networks and Perceptron Learning Algorithm.pptx
Kayalvizhi A
 
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PORTFOLIO Golam Kibria Khan — architect with a passion for thoughtful design...
MasumKhan59
 
Ad

Flutter festival - building ui's with flutter

  • 1. Building UI’s Apoorv Pandey Flutter Dev @apoorvpandey0 Build Beautiful UI’s with Flutter Week 3
  • 2. Contents What all we’ll cover today 1. Quick recap 2. Fundamental UI building widgets 3. Code along session and QnA
  • 3. • Flutter is developed by Google • It is open sourced • Flutter provides a wide range of widgets for ex. Text,Image,Card etc. • Flutter is a cross-platform application development framework. • It allows us to create applications for both Android and iOS,web, desktop using a single codebase.
  • 5. v Everything is a widget in Flutter
  • 6. Fundamental widgets for UI Let’s learn some essential widgets 1. Row,Column 2. Container,Text 3. Container decoration 4. Stack widget 5. How to position stuff!
  • 7. Column This widget arranges its children in a vertical direction on the screen Main Axis Cross Axis
  • 8. Main Axis Cross Axis Row This widget arranges its children in a horizontal direction on the screen
  • 12. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Hello2"), ), body: Text("This is my first application")), ); } } App structure
  • 13. body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Image.network(“url1"), Image.network(“url2"), ], ) Column of two images
  • 14. bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)), BottomNavigationBarItem(label: "Search", icon: Icon(Icons.search)), BottomNavigationBarItem(label: "Profile", icon: Icon(Icons.person)), ], ), Add bottom navigation bar
  • 15. Stack This widget places widgets one over another
  • 16. Stack By default, objects are positioned on top left of the screen/stack We can position the child elements using 1. Positioned Widget 2. Align Widget
  • 18. body: Stack( children: [ Positioned(child: Image.network(“URL”)), Positioned.fill( child: Align(alignment: Alignment.center, child: Text("Image 1")), ) ], ),
  • 19. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Hello2"), ), body: Text("This is my first application")), ); } }
  • 20. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Hello2"), ), body: Text("This is my first application")), ); } }
  • 21. Headline Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam.
  • 22. Headline Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam.
  • 23. Headline Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada. Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Duis sit amet placerat quam.
  • 24. • Lorem ipsum dolor sit amet, consectetur adipiscing elit. • Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada. • Duis sit amet placerat quam. Donec eget eros egestas nunc venenatis suscipit at at felis. Subtitle Headline
  • 25. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida placerat dictum. • Lorem ipsum dolor sit amet, consectetur adipiscing elit. • Vestibulum gravida placerat dictum. Sed sagittis accumsan dolor ut malesuada. Headline Subtitle
  • 26. v “Anytime I’m involved with anything that’s well- received, it’s a surprise to me.” - Larry David
  • 27. protected void onTryUpdate(int reason) throws RetryException { // Do some awesome stuff int foo = 15; publishArtwork(new Artwork.Builder() .title(photo.name) .imageUri(Uri.parse(photo.image_url)) .viewIntent(new Intent(Intent.ACTION_VIEW, Uri.parse(“http://500px.com/photo/" + photo.id))) .build()); scheduleUpdate(System.currentTimeMillis() + ROTATE_TIME_MILLIS); }
  • 28. Color Hex: #041e3c Hex: #042b59 Hex: #043875 Hex: #0553b1 Hex: #e7f8ff Hex: #4A4A4A Hex: #027dfd Hex: #13b9fd Hex: #81ddf9 Hex: #b8eafe Hex: #0468d7 Hex: #DADCe0 Hex: #f1f3f4
  • 29. Chart Elements Build your visuals using the 30pt grid. Build layouts that snap to grid-lines or sit in-between. For details on using the grid please see getting started. Caption Large Box Caption 40pt Caption 6pt Object Border Medium Box Caption Caption Caption Caption Small Box 6pt Object Border Caption Use for nested items only 8pt Corner Radius 30pt Caption 25pt Caption Labels Label Label Round Corner Radius 30pt Caption Arrow s Simple Charts: 6pt Complex Charts: 5pt
  • 31. All-purpose Chart Step A Step B Step C Short Label Step D Step E
  • 32. Chart title 2012 2014 2016 2018 2020 Category Label One Caption 1 Two lines Caption 3 Two lines Caption 2 Two lines Caption 5 Two lines Caption 4 Two lines Caption 6 Two lines Caption 7 Two lines Caption 9 Two lines Caption 8 Two lines Category Label Two
  • 33. Icon s Accessibility Expand Late Credit card Extension Thumb Up Remove Verified Q&A Finance Android Turn in Trash Actions Download History Store List Wallet Announcement Backup Document Favorite 1 Open Home Print Swap Account Ratio Tag Server Favorite 2 Grade/rate Lock Language Receipt Add shopping Chart Bug Event Find Page Page view Basket Time Work All icons are vector objects and can be recolored using the fill menu.
  • 34. Icon s Alarm Assessment Sync Exit App Movie Visibility Trolley Open Location Settings Assignment Check Explore Thumb Down Today Perm Media People search Airplane Signal Photo Play 1 Block Send Smartphone Style Walk Bluetooth WiFi Upload Play 2 Email Laptop iPhone Controls Bike Pie Chart Money Attachment Video Business Chromebook Security Notification Bus All icons are vector objects and can be recolored using the fill menu.
  • 35. Icon s Developer Write Cloud Audio Key Desktop Mac Watch Person Car Devices Quote Folder Web Page Archive Desktop PC Flag World Boat Software Emotion Mic Call Cut headphones Camera Education Train Weather Link Movie Chart Paste Keyboard TV MMS Subway Hotel Laundry Location History Layers Offer Map Bar Pizza Web All icons are vector objects and can be recolored using the fill menu.
  • 36. Icon s Cafe Theatre Gaming Florist Restaurant Gas Delivery Hospital Taxi Print Radio Stream All icons are vector objects and can be recolored using the fill menu.
  • 37. Flags Americas APAC EMEA US MX CA AR AU AT BE CH DE ES GB IE IT NL BO BR CL CO CR EC SV GT HN NI PA PE UY HK ID IN AU JP KR MY NZ PH SG TH TW FR Nordics PT