The Ease of
App
Development -
FULLTER
AD I T YA S I N G H
S E C O N D Y E AR C O M P U T E R
S T. J O H N C O L L E G E O F
E N G I N E E R I N G AN D M AN A G E M E N T
M a i l – l e o a d i 2 4 6 @ g m a i l . c o m
About us-
S H R E YAS H S I N G H
S E C O N D Y E AR C O M P U T E R
S T. J O H N C O L L E G E O F
E N G I N E E R I N G AN D M AN A G E M E N T
M a i l – s s h r e y a s h 3 4 @ g m a i l . c o m
• What is Flutter ?
• What is Dart?
• Powerful widget's
• Non visual features
of flutter
• React Native Vs
Flutter
• Web Support for
flutter
Contents
• Companies reaction
on Flutter
• Future scope as
flutter developer
• What's Next is
Flutter
• Conclusion
• F l u t t e r i s o p e n s o u r c e a n d h a s b e e n d e v e l o p e d
b y G o o g l e . I t h a s b e e n r e l e a s e d t o t h e w o r l d i n
M a y 2 0 1 7 i n a s t a b l e r e l e a s e A l p h a .
• F l u t t e r i s a n a p p S D K f o r b u i l d i n g h i g h -
p e r f o r m a n c e , h i g h - f i d e l i t y a p p s f o r i O S ,
A n d r o i d , a n d w e b f r o m a s i n g l e c o d e b a s e .
• T h e g o a l i s t o e n a b l e d e v e l o p e r s t o d e l i v e r
h i g h - p e r f o r m a n c e a p p s t h a t f e e l n a t u r a l o n
d i f f e r e n t p l a t f o r m s . W e e m b r a c e d i f f e r e n c e s i n
s c r o l l i n g b e h a v i o r s , t y p o g r a p h y, i c o n s , a n d
m o r e .
• A p p s a r e w r i t t e n i n D a r t , w h i c h l o o k s f a m i l i a r
i f y o u ’ v e u s e d a l a n g u a g e l i k e J a v a o r
J a v a S c r i p t .
WHAT IS FLUTTER ?
• Widget s are t he basic building blocks of a
Flut t er app’s user int erf ace.
• Each w idget is an immut able declarat ion of
part of t he user int erf ace. U nlike ot her
f ramew orks t hat separat e view s, view
cont rollers, layout s, and ot her propert ies,
Flut t er has a consist ent , unif ied object
model: t he w idget
• Widget s f orm a hierarchy based on
composition. Each w idget nests inside, and
inherit s propert ies f rom, it s parent .
EVERYTHING IS A
WIDGET
WIDGET TREE
• Widget tree is a structure
t hat represent s how our
w idget s are organiz ed. So,
as w e build our
application, composing
w idgets t o each ot her,
t his st ruct ure can grow.
SUPPORTED IDE's
• Most recommend IDE's for flutter are
• D art is an open - source, object -
orient ed, general - purpose
programming language developed by
Google in 2011.
• D art uses a ‘C ’ st yle synt ax and
opt ionally t ranscompiles int o
JavaScript .
• D art is also being used f or N at ive
and C ross - plat form mobile
development .
• It support s int erf aces, mixins,
abst ract classes.
WHAT IS DART?
• D art made t he biggest comeback f rom
2018 t o 2019, f rom being number one on
t he Worst Programming Language t o
Learn in 2018 t o 16t h place on t he list in
2 0 1 9 .
• Programming language popularit y list s
alw ays include basically t he same cast
of t he usual suspect s like Pyt hon, Java
and so on, but t he lat est IEEE Spect rum
ranking sees new comer D art debut ing at
No. 16.
• Flut t er provides a number of w idgets t hat help you
build apps t hat f ollow Mat erial D esign.
• A Mat erial app st art s w ith t he Mat erialA pp w idget,
w hich builds a number of usef ul w idget s at t he root of
your app, including a N avigat or, w hich manages a
st ack of w idgets ident if ied by st rings, also know n as
“ rout es” .
• The Navigator lets you transition smoothly betw een
screens of your applicat ion.
• Let s see some basic and commonly used w idgets.
SOME BASIC WIDGETS IN
FLUTTER
• To make the UI more interactive and attractive
w e have some advanced w idgets
• They are
1. Silver
2. Gestures
SOME ADVANCED WIDGETS IN
FLUTTER
• A s live r is a port ion of a
s c rolla ble a re a . You c a n us e
s live rs t o a c hie ve c us t om
s c rolling e f f e c ts .
• Ex a mple
SilverA ppB ar,
SilverList,
SilverGrid
SILVER WIDGETS
• Gest ures represent
semant ic act ions t hat are
recogniz ed f rom mult iple
individual pointer events,
pot ent ially even mult iple
individual point ers.
• Gest ures can dispat ch
multiple events,
corresponding t o t he
lif ecycle of t he gest ure .
• Example : -
D rag , Tap, D oubleTap ,
Long Press,
GESTURE WIDGETS
• C ompare t o nat ive f ramew orks f lut t er has some
special f eat ures.
• Some of t he f eat ures are......
1. H ot reload
2. Provider
3. D evice preview
4. Moor D at abase
5. R esponsive U I
NON VISUAL FEATURES IN FLUTTER
REACT NATIVE
vs
FLUTTER
BASIC DIFFERENCE -
FLU TTER R EA C T N ATIVE
Officially realesed on MAY 2017
Created By GOOGLE
Programming language used -
DART
Officially realesed on MARCH 2015
Created By FACEBOOK
Programming language used -
JAVASCRIPT
UI -
FLU TTER R EA C T N ATIVE
Flutter apps look as good on the
up-to-date operating systems as they do on
older versions.
This means that your Flutter app will
look and behave naturally on each
platform, imitating their native
components.
Application components look just lik e native ones
(e.g. a button on an iOS device look s just lik e a
native iOS button, and the same on Android).
If you want your app to look near -identical across
platforms – as well as on older versions of an
operating system (as Flutter achieves) – then
consider using third -party libraries
TOP APPS MADE BY THIS TECHNOLOGY -
FLU TTER R EA C T N ATIVE
GOOGLE ADS app
XIANYU app by Alibaba
REFLECTLY app
FACEBOOK
INSTAGRA
M
SKYPE
COMPETITIVE ADVANTAGE -
FLU TTER R EA C T N ATIVE
Great look and feel thanks to rich
widgets
Rapidly growing community, and
popularity
Excellent documentation with strong
support from the Flutter team (which
makes it easy to start developing
with Flutter)
Stability (5+ years on the market)
Many successful, prominent market players using
React Native;
Mature, vast community
Easy-to-learn technology;
Plenty of tutorials and libraries, which allow
quick and easy development
Web support is a code - compat ible implement at ion of
Flut t er t hat is rendered using st andards - based w eb
t echnologies: H TML, C SS and JavaScript .
Wit h w eb support , you can compile exist ing Flut t er
code w ritten in D art int o a client experience t hat can
be embedded in the brow ser and deployed to any w eb
server.
WEB SUPPORT TO FLUTTER
COMPANIES REACTIONS ON
FLUTTER
• With new advanced and customize UI many companies
are thinking to Switch on flutter, as flutter is cross
platform framework so there is no need to keep two
developer's team i.e for IOS and Android.
• Also managing the apps will be easier for updates.
• Using flutter developer's time will be save as they don't
need to build same apps for different platforms.
• There are many companies which have already adopted
flutter like..........
GOOGLE ADS ALI BABA
REFLECTLY CRYPTOGRAPH
• As companies are tryIng to convert there native apps to
cross platform apps.
• So the demand of flutter developer will be increase.
• Also the google is coming with his new operating
system i.e FUCHSIA .
• People are predicting that Android may be get replace
by Fuchsia
• On Fuchsia operating system only the flutter apps can
be runned.
• So there is highly possibility that flutter will dominate
the Mobile App Development by 2023 -2024.
FUTURE SCOPE AS FLUTTER
DEVELOPER
• A f t er t he announcement of t he f irst t echnical preview
of H ummingbird, Flut t er has gained t he int erest of
w eb developers along w it h mobile developers.
• After the preview release of Flutter Web, the w ork is
in progress t o make Flut t er applicat ions compat ible
w ith deskt op t oo.
• This w ill allow t he developers t o build Flut t er
applications for Window s, Linux, and macOS.
• W hat more you need t o be excit ed about w hen an
advanced IoT t echnology can be embedded w ith t he
Flut t er plat f orm.
WHAT's NEXT IN FLUTTER?
• A s f lut t er is bet t er t han all ot her cross plat f orm
f ramew orks.
• So t he companies are t hinking t o build t here nat ive
apps in f lut t er.
• Since t he f lut t er communit y is increasing day by day,
t here w ill be demand of f lut t er developers in f ut ure.
• It 's predict ed t hat f lut t er may replace android
development .
• Thus w e conclud that flutter w ill be the future of
mobile app development .
CONCLUSION
Lets see a DEMO.....
Ask your Questions ---
THANK YOU-

Flutter

  • 1.
  • 2.
    AD I TYA S I N G H S E C O N D Y E AR C O M P U T E R S T. J O H N C O L L E G E O F E N G I N E E R I N G AN D M AN A G E M E N T M a i l – l e o a d i 2 4 6 @ g m a i l . c o m About us- S H R E YAS H S I N G H S E C O N D Y E AR C O M P U T E R S T. J O H N C O L L E G E O F E N G I N E E R I N G AN D M AN A G E M E N T M a i l – s s h r e y a s h 3 4 @ g m a i l . c o m
  • 3.
    • What isFlutter ? • What is Dart? • Powerful widget's • Non visual features of flutter • React Native Vs Flutter • Web Support for flutter Contents • Companies reaction on Flutter • Future scope as flutter developer • What's Next is Flutter • Conclusion
  • 4.
    • F lu t t e r i s o p e n s o u r c e a n d h a s b e e n d e v e l o p e d b y G o o g l e . I t h a s b e e n r e l e a s e d t o t h e w o r l d i n M a y 2 0 1 7 i n a s t a b l e r e l e a s e A l p h a . • F l u t t e r i s a n a p p S D K f o r b u i l d i n g h i g h - p e r f o r m a n c e , h i g h - f i d e l i t y a p p s f o r i O S , A n d r o i d , a n d w e b f r o m a s i n g l e c o d e b a s e . • T h e g o a l i s t o e n a b l e d e v e l o p e r s t o d e l i v e r h i g h - p e r f o r m a n c e a p p s t h a t f e e l n a t u r a l o n d i f f e r e n t p l a t f o r m s . W e e m b r a c e d i f f e r e n c e s i n s c r o l l i n g b e h a v i o r s , t y p o g r a p h y, i c o n s , a n d m o r e . • A p p s a r e w r i t t e n i n D a r t , w h i c h l o o k s f a m i l i a r i f y o u ’ v e u s e d a l a n g u a g e l i k e J a v a o r J a v a S c r i p t . WHAT IS FLUTTER ?
  • 5.
    • Widget sare t he basic building blocks of a Flut t er app’s user int erf ace. • Each w idget is an immut able declarat ion of part of t he user int erf ace. U nlike ot her f ramew orks t hat separat e view s, view cont rollers, layout s, and ot her propert ies, Flut t er has a consist ent , unif ied object model: t he w idget • Widget s f orm a hierarchy based on composition. Each w idget nests inside, and inherit s propert ies f rom, it s parent . EVERYTHING IS A WIDGET
  • 6.
    WIDGET TREE • Widgettree is a structure t hat represent s how our w idget s are organiz ed. So, as w e build our application, composing w idgets t o each ot her, t his st ruct ure can grow.
  • 7.
    SUPPORTED IDE's • Mostrecommend IDE's for flutter are
  • 8.
    • D artis an open - source, object - orient ed, general - purpose programming language developed by Google in 2011. • D art uses a ‘C ’ st yle synt ax and opt ionally t ranscompiles int o JavaScript . • D art is also being used f or N at ive and C ross - plat form mobile development . • It support s int erf aces, mixins, abst ract classes. WHAT IS DART?
  • 9.
    • D artmade t he biggest comeback f rom 2018 t o 2019, f rom being number one on t he Worst Programming Language t o Learn in 2018 t o 16t h place on t he list in 2 0 1 9 . • Programming language popularit y list s alw ays include basically t he same cast of t he usual suspect s like Pyt hon, Java and so on, but t he lat est IEEE Spect rum ranking sees new comer D art debut ing at No. 16.
  • 10.
    • Flut ter provides a number of w idgets t hat help you build apps t hat f ollow Mat erial D esign. • A Mat erial app st art s w ith t he Mat erialA pp w idget, w hich builds a number of usef ul w idget s at t he root of your app, including a N avigat or, w hich manages a st ack of w idgets ident if ied by st rings, also know n as “ rout es” . • The Navigator lets you transition smoothly betw een screens of your applicat ion. • Let s see some basic and commonly used w idgets. SOME BASIC WIDGETS IN FLUTTER
  • 14.
    • To makethe UI more interactive and attractive w e have some advanced w idgets • They are 1. Silver 2. Gestures SOME ADVANCED WIDGETS IN FLUTTER
  • 15.
    • A slive r is a port ion of a s c rolla ble a re a . You c a n us e s live rs t o a c hie ve c us t om s c rolling e f f e c ts . • Ex a mple SilverA ppB ar, SilverList, SilverGrid SILVER WIDGETS
  • 16.
    • Gest uresrepresent semant ic act ions t hat are recogniz ed f rom mult iple individual pointer events, pot ent ially even mult iple individual point ers. • Gest ures can dispat ch multiple events, corresponding t o t he lif ecycle of t he gest ure . • Example : - D rag , Tap, D oubleTap , Long Press, GESTURE WIDGETS
  • 17.
    • C omparet o nat ive f ramew orks f lut t er has some special f eat ures. • Some of t he f eat ures are...... 1. H ot reload 2. Provider 3. D evice preview 4. Moor D at abase 5. R esponsive U I NON VISUAL FEATURES IN FLUTTER
  • 18.
  • 19.
    BASIC DIFFERENCE - FLUTTER R EA C T N ATIVE Officially realesed on MAY 2017 Created By GOOGLE Programming language used - DART Officially realesed on MARCH 2015 Created By FACEBOOK Programming language used - JAVASCRIPT
  • 20.
    UI - FLU TTERR EA C T N ATIVE Flutter apps look as good on the up-to-date operating systems as they do on older versions. This means that your Flutter app will look and behave naturally on each platform, imitating their native components. Application components look just lik e native ones (e.g. a button on an iOS device look s just lik e a native iOS button, and the same on Android). If you want your app to look near -identical across platforms – as well as on older versions of an operating system (as Flutter achieves) – then consider using third -party libraries
  • 21.
    TOP APPS MADEBY THIS TECHNOLOGY - FLU TTER R EA C T N ATIVE GOOGLE ADS app XIANYU app by Alibaba REFLECTLY app FACEBOOK INSTAGRA M SKYPE
  • 22.
    COMPETITIVE ADVANTAGE - FLUTTER R EA C T N ATIVE Great look and feel thanks to rich widgets Rapidly growing community, and popularity Excellent documentation with strong support from the Flutter team (which makes it easy to start developing with Flutter) Stability (5+ years on the market) Many successful, prominent market players using React Native; Mature, vast community Easy-to-learn technology; Plenty of tutorials and libraries, which allow quick and easy development
  • 23.
    Web support isa code - compat ible implement at ion of Flut t er t hat is rendered using st andards - based w eb t echnologies: H TML, C SS and JavaScript . Wit h w eb support , you can compile exist ing Flut t er code w ritten in D art int o a client experience t hat can be embedded in the brow ser and deployed to any w eb server. WEB SUPPORT TO FLUTTER
  • 25.
    COMPANIES REACTIONS ON FLUTTER •With new advanced and customize UI many companies are thinking to Switch on flutter, as flutter is cross platform framework so there is no need to keep two developer's team i.e for IOS and Android. • Also managing the apps will be easier for updates. • Using flutter developer's time will be save as they don't need to build same apps for different platforms. • There are many companies which have already adopted flutter like..........
  • 26.
  • 27.
  • 28.
    • As companiesare tryIng to convert there native apps to cross platform apps. • So the demand of flutter developer will be increase. • Also the google is coming with his new operating system i.e FUCHSIA . • People are predicting that Android may be get replace by Fuchsia • On Fuchsia operating system only the flutter apps can be runned. • So there is highly possibility that flutter will dominate the Mobile App Development by 2023 -2024. FUTURE SCOPE AS FLUTTER DEVELOPER
  • 29.
    • A ft er t he announcement of t he f irst t echnical preview of H ummingbird, Flut t er has gained t he int erest of w eb developers along w it h mobile developers. • After the preview release of Flutter Web, the w ork is in progress t o make Flut t er applicat ions compat ible w ith deskt op t oo. • This w ill allow t he developers t o build Flut t er applications for Window s, Linux, and macOS. • W hat more you need t o be excit ed about w hen an advanced IoT t echnology can be embedded w ith t he Flut t er plat f orm. WHAT's NEXT IN FLUTTER?
  • 30.
    • A sf lut t er is bet t er t han all ot her cross plat f orm f ramew orks. • So t he companies are t hinking t o build t here nat ive apps in f lut t er. • Since t he f lut t er communit y is increasing day by day, t here w ill be demand of f lut t er developers in f ut ure. • It 's predict ed t hat f lut t er may replace android development . • Thus w e conclud that flutter w ill be the future of mobile app development . CONCLUSION
  • 31.
    Lets see aDEMO.....
  • 32.
  • 33.