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


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


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


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


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


Slide 56

Slide 56 text


Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

that’s it!