Pawan Kumar
GDE Flutter, Firebase, Dart & WebTech
Twitter - @imthepk,
Insta - @codepur_ka_superhero,
Fb - @therealpawan
Flutter: What’s new & become a
PRO Flutter dev
Slide 2
Slide 2 text
Disclaimer
Slide 3
Slide 3 text
Flutter
Flutter is Google’s UI toolkit for
building beautiful, natively
compiled applications for mobile,
web, and desktop from a single
codebase.
Slide 4
Slide 4 text
2015
April 2015
Unveiled at Dart Dev Summit
2017
May 2017
Alpha Release
2018
Dec 2018
Flutter 1.0 release
2019
Sep 2019
Flutter 1.9 release
Slide 5
Slide 5 text
Why Flutter?
Any Idea?
Slide 6
Slide 6 text
Fast Development
Flutter engineered for high development velocity.
Stateful hot reload allows you to change your code
and see it come to life in less than a second without
losing the state of the app. Flutter also ships with
rich set of customizable widgets, all built from
modern reactive framework.
Slide 7
Slide 7 text
Expressive + Flexible UI
Flutter includes widgets, rendering, animations and
gestures into the framework to give you complete
control over every pixel on the screen. It means you
have the flexibility to build a custom design.
Slide 8
Slide 8 text
Native Apps for Android, iOS,
Web, Desktop & you name it
Flutter apps follow platform conventions and
interface details such as scrolling, navigation, icons,
fonts, etc. That’s why apps built with Flutter works
everywhere.
Slide 9
Slide 9 text
Hot Reload
In flutter, hot reload comes to the rescue, just as
you do on the web, just hit a refresh button and
your codes also refreshes.
Slide 10
Slide 10 text
High Performance
Flutter doesn’t require a Javascript bridge and
the speed is much faster.
Slide 11
Slide 11 text
Using Dart
Dart is an object-oriented programming
language. Dart uses generational garbage
collection which helps in creating frames for
short-lived objects. It also helps to allocate the
objects with a single pointer bump to avoid UI
jank and shutter.
Slide 12
Slide 12 text
Reduce the third party libraries
Rely on official packages and when using flutter,
you can get complete IOS experience or
Android Experience. So you don’t have to rely on
the third party libraries.
Slide 13
Slide 13 text
Consistent APIs
AnimationBuilder, FutureBuilder,
StreamBuilder,…Once you understand them you
have no limit. Everything is a widget.
Slide 14
Slide 14 text
The customizable kit of widgets
Flutter has built with a rich and customizable set
of widgets for Android, IOS and Material Design.
The collaboration between Flutter and Google’s
material design render and easily create
powerful UI experience. This helps us to create
smooth, crisp and refined app experience like a
native app.
Slide 15
Slide 15 text
Trends
Slide 16
Slide 16 text
In 2018
Declarative UI
Pattern?
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
In 2019?
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Flutter Supports
Mobile Web Desktop
Slide 21
Slide 21 text
Raspberry Pi
Slide 22
Slide 22 text
Desktop
Embedding
Slide 23
Slide 23 text
Add to existing
apps
Slide 24
Slide 24 text
Flutter For Web
Slide 25
Slide 25 text
Flutter vs Flutter Web
Slide 26
Slide 26 text
Scenario
1. A connected Progressive Web Application
built with Flutter
2. Embedded interactive content
3. Embedding dynamic content in a Flutter
mobile app
Slide 27
Slide 27 text
Flutter Web Support
In Flutter 1.10 (Beta)
Slide 28
Slide 28 text
Flutter 1.9
1. Support for MacOS Catalina
2. iOS 13
3. 24 new languages
4. Structured Error Messages
5. Better Flavors support
6. AAR support
7. And many more
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Who can become a
PRO Developer?
Slide 31
Slide 31 text
Trust yourself & the
technology
Slide 32
Slide 32 text
Flutter PRO Tips - Starters
Slide 33
Slide 33 text
Lazy Programming
Write what you need and no more, but when you write it,
do it right.
pawan.live
Slide 34
Slide 34 text
Build Complete Apps
Don’t just make UIs.
pawan.live
Slide 35
Slide 35 text
Don’t do this
pawan.live
Slide 36
Slide 36 text
App Store be like
pawan.live
Slide 37
Slide 37 text
Animations
Keep it simple.
Avoid unnecessary animations.
pawan.live
Slide 38
Slide 38 text
Dark Mode
Dark is the new cool thing.
ThemeData is what you need.
pawan.live
Slide 39
Slide 39 text
SOLID Principles
● S — Single responsibility principle
● O — Open closed principle
● L — Liskov substitution principle
● I — Interface segregation principle
● D — Dependency Inversion principle
pawan.live
https://medium.com/flutter-community/s-o-l-i-d-the-first-5-principle
s-of-object-oriented-design-with-dart-f31d62135b7e
Slide 40
Slide 40 text
State Management
pawan.live
Slide 41
Slide 41 text
Provider
● Provider is a simpler way to use inherited widget, to
synchronise your UI and your model.
● It’s just a tool, not an architecture.
● You don’t have to use it everywhere.
pawan.live
@remi_rousselet
Slide 42
Slide 42 text
Bloc, Flutter Bloc
● A Predictable state management library.
● It enforces immutable state.
● It enables time travel debugging.
● Performant ( Only rebuild what you need ).
● Easy to use and highly testable.
pawan.live
Slide 43
Slide 43 text
Stop over-engineering things
● Stop using streams everywhere.
● Stop using streambuilder inside streambuilder inside
streambuilder.
● Stop mixing UI with business logic.
pawan.live
Write Test, Find Bug
● When you fix a bug, first write a test that fails, then fix
the bug and verify the test passes.
● When you implement a new feature, write tests for it.
pawan.live
Slide 47
Slide 47 text
Android App Bundles
● Official android apps publishing format.
● Average size saving of upto 35%.
● Optimized apk for each device.
pawan.live
Slide 48
Slide 48 text
Flutter PRO Tips - Flutterish
Slide 49
Slide 49 text
#1 - Hide Keyboard when tap out
the text field
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
#2 - Color RGB or Hex with
opacity
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
#3 - Extending the parent theme
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
#4 - Using Safe Area to avoid
layout breaking
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Without Safe Area
Slide 58
Slide 58 text
With Safe Area
Slide 59
Slide 59 text
#5 - InkWell Feedback
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
#6 - Adding ListView inside a
Column Wigdet
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Column With Two
Principal Widgets
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
#7 - Use box decoration to add
border radius to container
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
#8 - Use Dart 2.3 Operators like
spreads, conditional if etc