Applying basic logic and the UI basics to build two small applications in the Android studio. Exploring stateful and stateless widgets and what do they do. We will talk about hot reload as well.

1. Intro to Flutter
Anish Natekar
anish.natekar.20031@iitgoa.ac.in
GDSC IIT Goa chapter

2. Timeline
2012 2014 2016 2018 2020
February to
March
Intro to utter
and dart
App project
Self Practice
Assignment 2
Flutter app with
rebase
Self Practice
Assignment 4
Self Practice
Assignment 1
Building an app
with utter
Intro to rebase
Self Practice
Assignment 3
5 sessions

3. Before we start
Stateful and Stateless
Widgets

4. What is State, Statefull and Stateless?
about
State of any object may refer to its properties or features at an
instant.
State of a widget in Flutter refers to the values of it’s properties.
There are two types of widgets Stateful and Stateless.
Statefull widgets allow the value of their properties to be changed
Whereas Stateless widgets have fixed values of their properties.

5. What is Hot reload?
about
For developers running and rerunning their code for an app might
take a long time to compile etc. Hot reload allows one to rerun the
code by only updating the widgets in which code was changed
while keeping the rest of the widgets unchanged resulting in short
compile times and updates can be viewed instantly.

6. Let’s take a quick look at
Android Studio and the
default Flutter App in it.

7. BMI Calculator
Activity
A simple App which takes your height and
weight to calculate your Body Mass Index
and tells you if you are underweight,
normal or overweight.
BMI = weight(kg)/(height(m)^2)
This is simple beginner friendly App and
we will reuse it’s design components later.

8. Ask Doubts if any

9. Virtual Dice App
Activity
An App which with which you can roll
multiple virtual dice of any number of
faces. It will take the faces of the die and
the number of dice and display the
outcomes. We will reuse the code we just
wrote so it will be done in no time.

10. Thank you everyone
Ask Doubts if any

11. • 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

12. 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

13. v
“Anytime I’m involved with
anything that’s
well-received, it’s a surprise
to me.”
- Larry David

14. 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);
}

15. Colors, Charts, and Icons

16. 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

17. 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
Arrows
Simple Charts: 6pt
Complex Charts: 5pt

18. Simple chart
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label
Short
Label

19. All-purpose
Chart
Step A Step B Step C
Short
Label
Step D Step E

20. 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

21. Icons
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.

22. Icons
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.

23. Icons
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.

24. Icons
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.

25. 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

26. Device Library