What is Flutter?
● An SDK which helps to build high-performing,
modern and beautiful apps
● Works for both Android and iOS
● An open-source toolkit, developed by Google
● 100+ contributions from the open source
community
JavaScript
realm
Native
realm
⇦ Context Switch ⇨
Services,
Events,
Widgets
Your app
The Bridge
Slide 10
Slide 10 text
Flutter
Advantages of reactive views, without a JS bridge
Compiled to native code (not VM) on each platform
Slide 11
Slide 11 text
Who is Flutter for?
● Designers converge on a brand-driven experience on
Android and iOS
● Prototypers get a high-fidelity and fast way to build
working prototypes.
● Developers benefit from fantastic developer tools, an
easy-to-use language, a rich set of widgets and great IDE
support. Flutter frees up valuable time for working on
features and delightful experiences.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
1. Developer Experience
2. Performance
Slide 14
Slide 14 text
Design-oriented
Development Flow
Slide 15
Slide 15 text
What do you
see here?
Slide 16
Slide 16 text
Diagram the Layout
- Look for rows and columns
- Is there a grid?
- Any overlapping elements?
- Do we need tabs?
- Padding, alignment or
borders needed?
Slide 17
Slide 17 text
Designing bottom up
Slide 18
Slide 18 text
Everything is Widget here
Slide 19
Slide 19 text
A Widget can defined as
● A structural element (like a Button or Menu)
● A design element (like a Font or Color
scheme)
● A layout element (like a Margin or Padding)
● It can be a business logic
Slide 20
Slide 20 text
The App itself is an Widget
Slide 21
Slide 21 text
The App itself is an Widget
Slide 22
Slide 22 text
The App itself is an Widget
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Hot Reload
● Injecting updated source code files into the running
Dart VM
● Stateful: App state is retained after a reload.
● Quickly iterate on a screen deeply nested in your
app
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino
Each layer builds upon the previous layer
Slide 27
Slide 27 text
Flutter’s new architecture
Flutter provides its own widgets
● Compiles to native Code
● No reliance on OEM widgets
● No bridge needed
● Turns layout on its head!
● Widgets are simple and fast
● Full customisation and extensibility
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Platform Channels
Slide 30
Slide 30 text
Using Platform
channels allows for
receiving method calls
and sending back
results
Tooling
$ flutter doctor
Checks your environment and displays a report on
terminal
$ flutter upgrade
Updates both the Flutter SDK and your packages
Slide 34
Slide 34 text
Hello World
Slide 35
Slide 35 text
Everything is Widget
Slide 36
Slide 36 text
StatefulWidget
vs.
StatelessWidget
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Stateless Widget
● Dumb Widget
● It doesn’t know anything
● Gets render only once or
● When the parent widget changes the configuration
Slide 39
Slide 39 text
Stateful Widget
● Dynamic which has its own Properties
● Those property is know as state of the widget
● The state of the widget can be changed by user input, any
operation or other widget’s state change.
● setState() method is used to change the state.
● Each time widget gets rebuild when setState() method
gets called.
Slide 40
Slide 40 text
Customizing and extending Widgets
Flutter’s Widget system was designed to be easily customizable
Composition: Widgets are built out of smaller widgets that you can reuse and
combine in novel ways to make custom widgets
class RaisedButton extends StatelessWidget {
...
}
Slide 41
Slide 41 text
Let’s see in Action
Slide 42
Slide 42 text
Time to create our First App
http://bit.ly/BYFA
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
References
● Awesome Flutter - Wm Leler
● The Magic of Flutter - Tim Messerschmidt
● Flutter.dev
● Github.com/flutter