Slide 1

Slide 1 text

Beautiful apps in record time With Flutter Diego Velásquez López @diegoveloper

Slide 2

Slide 2 text

Diego Velásquez López Mobile Software Architect About me ● Google Developer Expert Flutter ● Software engineer > 11 years experience ● Love mobile development ● Android / iOS / Flutter ● Creator of two Android apps: ○ Pseudocode ○ Quick Printer ● Founder & Organizer @ Flutter Peru @diegoveloper https://aeyrium.com/

Slide 3

Slide 3 text

Mobile Apps Development Strategies Traditional Development 3rd-Party Development

Slide 4

Slide 4 text

Traditional Development High-quality apps Platform and System integration High-performance UI Native code, GPU accelerated High costs/time Two teams, codebases Inconsistent brand, features Different across devices & OEMs

Slide 5

Slide 5 text

3rd-Party Development Fast development Quick iterations, hot reload Cheaper Single codebase, one team Poor performance Slow, jerky, unpredictable Non-Native Look/Feel Users can tell the difference

Slide 6

Slide 6 text

Welcome Flutter High-quality apps Platform and System integration High-performance UI Native code, GPU accelerated Fast development Quick iterations, hot reload Cheaper Single codebase, one team

Slide 7

Slide 7 text

7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

Never say “no” to your designer

Slide 10

Slide 10 text

No more OEM / Brand widgets Control every pixel on the screen

Slide 11

Slide 11 text

11 Native look and feel ● Scrolling ● Navigation ● Toolbar ● Back Button

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Compiles directly to native ARM code ● No Javascript bridge / interpreter ● 60fps (or 120 fps!) ● GPU accelerated ● Smooth animations ● JIT & AOT compilation

Slide 14

Slide 14 text

Programming language Dart 14

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No xml / xib / storyboard

Slide 17

Slide 17 text

Hot Reload! ● Paint your app to life ● New way to develop ● Less than a second ● Preserves the state

Slide 18

Slide 18 text

Increasing the productivity

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Flutter Architecture Diagram

Slide 21

Slide 21 text

Configuration StatelessWidget Configuration State StatefulWidget Event (setState) Rebuild Stateless & Stateful Widget

Slide 22

Slide 22 text

Native code through Platform Channels

Slide 23

Slide 23 text

Choose your preferred IDE

Slide 24

Slide 24 text

Packages https://pub.dartlang.org/flutter

Slide 25

Slide 25 text

Four ways to start with Flutter Start an App from scratch Prototype a new idea Use Flutter for a new feature of your App Create an App just for one platform

Slide 26

Slide 26 text

Flutter in action!

Slide 27

Slide 27 text

Questions? ● [email protected] ● https://github.com/diegoveloper/ ● https://medium.com/@diegoveloper ● https://twitter.com/diegoveloper

Slide 28

Slide 28 text

References ● https://flutter.io/ ● https://github.com/flutter/flutter ● https://www.youtube.com/watch?v=fq4N0hgOWzU ● https://www.youtube.com/watch?v=8qVkqkt8Ih0 ● https://www.youtube.com/watch?v=DoAlr0DUJYw

Slide 29

Slide 29 text

29 https://www.meetup.com/Flutter-Peru/ https://twitter.com/FlutterPeru https://www.facebook.com/FlutterPeru