Let’s Flirt with Flutter
By: Dhrumil Shah (@dhuma1981)
Slide 2
Slide 2 text
Dhrumil Shah
Mobile Developer,
@Shipmnts
Co-organizer,
Google Developers Group
Ahmedabad
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
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
*Currently in Beta
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
StatefulWidget
vs.
StatelessWidget
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 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 22
Slide 22 text
No content
Slide 23
Slide 23 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 24
Slide 24 text
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino
Each layer builds upon the previous layer
Slide 25
Slide 25 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 26
Slide 26 text
Platform Channels
Slide 27
Slide 27 text
Using Platform channels
allows for receiving
method calls and
sending back results
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
DART is there to start with Flutter
● Sound type system
● Tree Shaking
● Rich core libraries
● Single codebase for Android and iOS
● Rapid development cycles
● Great tooling