Let’s Start with Flutter
By: Dhrumil Shah (@dhuma1981)
Slide 2
Slide 2 text
Dhrumil Shah
Mobile Developer, @Shipmnts
Co-organizer, GDG Ahmedabad
Founder, @Flutter_Flakes
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 Release Preview 1
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
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 21
Slide 21 text
No content
Slide 22
Slide 22 text
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino
Each layer builds upon the previous layer
Slide 23
Slide 23 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 24
Slide 24 text
No content
Slide 25
Slide 25 text
Platform Channels
Slide 26
Slide 26 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 30
Slide 30 text
Hello World
Slide 31
Slide 31 text
Everything is Widget
Slide 32
Slide 32 text
StatefulWidget
vs.
StatelessWidget
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 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 35
Slide 35 text
Time for Codelab
https://goo.gl/H5BZz2
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
References
● Awesome Flutter - Wm Leler
● The Magic of Flutter - Tim Messerschmidt
● Flutter.io
● Github.com/flutter