Slide 1
Slide 1 text
Flutter allows you to build beautiful native apps on iOS and Android
from a single codebase.
Slide 2
Slide 2 text
Why flutter?
Slide 3
Slide 3 text
Why not?
Slide 4
Slide 4 text
● uses js bridge to run code
● JIT (just in time)
● uses third party e2e tests
● no bridge
● native typed
● hot reload
● AOT (ahead of time)
● Easy access any native module
● 60fps
Slide 5
Slide 5 text
● not installed (no play store)
● harder if needs native module
not created
● Can’t use Bluetooth, NFC and
fingerprint scan
● Not all browsers
● Can’t use notifications on
iOS
● Can’t use offline on iOS
● Can’t use native auth like
facebook and google
● installed on device
● Easy access any native module
Slide 6
Slide 6 text
Flutter PROS
Slide 7
Slide 7 text
Fast development
Hot reload
Slide 8
Slide 8 text
Fast development
Material Design Widgets
Slide 9
Slide 9 text
Fast development
Cupertino Widgets
Slide 10
Slide 10 text
Fast development
Fully-customizable Widgets
Slide 11
Slide 11 text
Expressive,
beautiful UI’s
● Rich motions APIs
● Smooth natural scrolling
Slide 12
Slide 12 text
Native Performance
● Scrolling
● Navigation
● Icons
● Fonts
Slide 13
Slide 13 text
Flutter uses
Slide 14
Slide 14 text
What is Dart
● Craft awesome UX/UI
● ahead-of-time
compilation
● Syntax clear and
concise
● Compiles to ARM and X86
● Transpiles to JavaScript
● Similiar with C++, C# and
Java
● Reactive <3
Slide 15
Slide 15 text
Types of
Widgets
Slide 16
Slide 16 text
Stateless widget
Slide 17
Slide 17 text
Stateful widget
Slide 18
Slide 18 text
Stateful widget lifecycle
Slide 19
Slide 19 text
Layouts
Slide 20
Slide 20 text
Main widgets to build your layout
Row Column Stack
Slide 21
Slide 21 text
Row
It Receives children List
where each element will be
positioned horizontal
You can else align by cross axis,
main axis and change the direction
of main axis
Slide 22
Slide 22 text
Column
Same of Row Widget but each element
will be positioned vertical
You can else align by cross axis,
main axis and change the direction
of main axis
Slide 23
Slide 23 text
Stack
It is useful if you want to overlap
several children in a simple way.
Slide 24
Slide 24 text
Counter
increment
Example
Slide 25
Slide 25 text
Creating first widget (Main widget)
MaterialApp class
An application that uses material design.
home is an property of MaterialApp class
that receives an Widget that will be loaded
as default.
Slide 26
Slide 26 text
Specifying an class to be executed as app
runApp
We also defines a main function that will
run application and send our MyApp
Slide 27
Slide 27 text
An statefulwidget
StatefulWidget
HomePage it’s gonna be StatefulWidget
because it’ll be supposed to have an state
_counter
Slide 28
Slide 28 text
Building the layout
Scaffold Class
This class help us to build an page
following the basic structure of an
application like Drawer, Body, Bottom
Navigation, AppBar, FloatingActionButton
Slide 29
Slide 29 text
the design will be look like...
Slide 30
Slide 30 text
And…
ACTION!
Slide 31
Slide 31 text
Implementing the action of increment counter
_incrementCounter()
The secret is setState, all changes on
variables that are used on layouts will be
rebuild so the layout will change.
Slide 32
Slide 32 text
Working example (with hot reload)….
Slide 33
Slide 33 text
and about native
modules?
Slide 34
Slide 34 text
pubscpec.yml
Slide 35
Slide 35 text
flutter already have some libs to access…
Slide 36
Slide 36 text
flutter already have some libs to access…
Slide 37
Slide 37 text
and if I...
Slide 38
Slide 38 text
You can create by
yourself native
integration!
Slide 39
Slide 39 text
Open Source
Slide 40
Slide 40 text
And about
tests?
Slide 41
Slide 41 text
3º
2º
1º
Integration tests
Widget tests
Unit tests
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Unit Tests
In addition to make it work you will be
supposed to add to pubspec.yaml
flutter test
Slide 44
Slide 44 text
Widget Tests
You implement a widget test in a similar
way as a unit test. To perform an
interaction with a widget in your test, use
the WidgetTester utility that Flutter
provides.
flutter test
Slide 45
Slide 45 text
Integration Tests
If you are familiar with Selenium/WebDriver
(web), Espresso (Android) or UI Automation
(iOS), then Flutter Driver is Flutter’s
equivalent to those integration testing
tools.
flutter drive --target=my_app/test_driver/user_list_scrolling.dart
Slide 46
Slide 46 text
Behind the
scenes...
Slide 47
Slide 47 text
How Flutter runs on Android and iOS
C/C++ engine
compile with...
NDK
LLVM
iOS
Android
Running on..
a-head of time (AOT)
Runner
This is similar to the way many game
engines work.
Slide 48
Slide 48 text
flutter debugger
DVM
enable stateful hot reload.
Slide 49
Slide 49 text
There is documentation
for ‘anyone’
Slide 50
Slide 50 text
Flutter and dart
showcases...
Slide 51
Slide 51 text
apps using flutter
Slide 52
Slide 52 text
dart for web
Slide 53
Slide 53 text
Cons
Slide 54
Slide 54 text
Cons
● core engine 2.77 MB
● the framework + app code ~ 820 KB
● LICENSE 53 KB
● classes.dex 62 KB
● 450 KB of ICU data
=================================
~ 4.2 MB
Slide 55
Slide 55 text
Cons
Slide 56
Slide 56 text
Bônus
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
that’s it!