Venez coder votre 1ère application Flutter !

A presentation at MixIt in May 2019 in Lyon, France by Horacio Gonzalez

Slide 1

Slide 1

Venez coder votre 1ère application Flutter Horacio Gonzalez - Pierre Tibulle @LostInBrittany @ptibulle

Slide 2

Slide 2

Who are we? And what’s that Breizh thing? @LostInBrittany @ptibulle

Slide 3

Slide 3

Horacio Gonzalez @LostInBrittany Spaniard lost in Brittany, developer, dreamer and all-around geek Flutter @LostInBrittany @ptibulle

Slide 4

Slide 4

Pierre Tibulle @ptibulle Developer, Jobcrafter, Maker and sketchnoter ! @LostInBrittany @ptibulle

Slide 5

Slide 5

Romain Rastel @lets4r Flutter Lead Expert @LostInBrittany https://github.com/letsar https://medium.com/@lets4r @ptibulle

Slide 6

Slide 6

Before we begin… Did you follow the instructions? @LostInBrittany @ptibulle

Slide 7

Slide 7

Before we begin For this codelab, you need a laptop with an operational Flutter environment : ● ● ● https://flutter.io/docs/get-started/install https://flutter.io/docs/get-started/editor https://flutter.io/docs/get-started/test-drive If you get this => It’s OK 👌 If you don’t, find a pair !!! @LostInBrittany @ptibulle

Slide 8

Slide 8

Testing your install Create and test your first app https://flutter.io/get-started/test-drive/ @LostInBrittany @ptibulle

Slide 9

Slide 9

What’s Flutter? Yet another mobile solution? @LostInBrittany @ptibulle

Slide 10

Slide 10

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 11

Slide 11

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 12

Slide 12

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 13

Slide 13

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 14

Slide 14

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 15

Slide 15

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 16

Slide 16

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 17

Slide 17

Flutter Flutter is Google’s new open-source mobile UI toolkit, helping developers to craft high-quality native experiences across mobile platforms in record time @LostInBrittany @ptibulle

Slide 18

Slide 18

Looking back Diving into the history of mobile app development @LostInBrittany @ptibulle

Slide 19

Slide 19

At the beginning there were the SDKs Your app Platform Canvas OEM Widgets Events Services Native Code @LostInBrittany Location Bluetooth Audio Sensors Camera etc, @ptibulle

Slide 20

Slide 20

Then the Webviews… Your app Platform Canvas WebView Events Services Bridge JavaScript @LostInBrittany Location Bluetooth Audio Sensors Camera etc, @ptibulle

Slide 21

Slide 21

And the Reactive views Your app Platform Canvas JavaScript @LostInBrittany Bridge OEM Widgets Events Services Location Bluetooth Audio Sensors Camera etc, @ptibulle

Slide 22

Slide 22

Enter Flutter Your app Platform Canvas Widgets, Rendering Events Services Native Code Platform Channels @LostInBrittany Location Bluetooth Audio Sensors Camera etc, @ptibulle

Slide 23

Slide 23

Flutter architecture @LostInBrittany @ptibulle

Slide 24

Slide 24

But why Dart? Because Google, duh! …or maybe there are good reasons? @LostInBrittany @ptibulle

Slide 25

Slide 25

Dart can be compiled AOT or JIT Development builds: Custom VM offers super fast hot reload change cycle @LostInBrittany Release builds: Full AOT-compilation to native machine code offers super fast startup and execution @ptibulle

Slide 26

Slide 26

Dart’s allocation and GC ● Many new objects: ○ Lock-free, fast allocation ● Short-lived objects: ○ Precise, generational garbage collection @LostInBrittany @ptibulle

Slide 27

Slide 27

Dart is an easy, familiar language An easy language: ● No exotic syntax ● Easy to read, easy to write ● Very expressive A familiar language: ● JavaScript devs find it easy to learn ● Java / C# devs even more @LostInBrittany @ptibulle

Slide 28

Slide 28

Layout How Flutter does layout? CSS like? XML like? @LostInBrittany @ptibulle

Slide 29

Slide 29

Traditional rule based layouts Large set of rules ● Fixed ● Applied to all the widgets Cascading application ● Interactions & conflicts ● Low performance @LostInBrittany @ptibulle

Slide 30

Slide 30

Chrome team experiment Could a different layout model allow faster rendering? ● Each widget specifies its own simple layout model ● Less rules, heavily optimized ● Complex layouts are turned into widgets @LostInBrittany @ptibulle

Slide 31

Slide 31

Everything is a widget Layouts Margin Padding Themes Application are widgets even scrolling is a widget! Navigation @LostInBrittany @ptibulle

Slide 32

Slide 32

Le Layout @LostInBrittany @ptibulle

Slide 33

Slide 33

Le Layout @LostInBrittany @ptibulle

Slide 34

Slide 34

Le Layout class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = new Container( padding: const EdgeInsets.all(32.0), child: new Row( children: [ new Expanded( child: new Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ new Container( padding: const EdgeInsets.only(bottom: 8.0), child: new Text( ‘Oeschinen Lake Campground’, style: new TextStyle( fontWeight: FontWeight.bold, ), ), ), new Text( ‘Kandersteg, Switzerland’, style: new TextStyle( color: Colors.grey[500], ), ), ], ), ), new Icon( Icons.star, color: Colors.red[500], ), new Text(‘41’), ], ), ); } @LostInBrittany @ptibulle

Slide 35

Slide 35

Le Layout class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { Widget titleSection = new Container( padding: const EdgeInsets.all(32.0), child: new Row( children: [ new Expanded( child: new Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ new Container( padding: const EdgeInsets.only(bottom: 8.0), child: new Text( ‘Oeschinen Lake Campground’, style: new TextStyle( fontWeight: FontWeight.bold, ), ), ), new Text( ‘Kandersteg, Switzerland’, style: new TextStyle( color: Colors.grey[500], ), ), ], ), ), new Icon( Icons.star, color: Colors.red[500], ), new Text(‘41’), ], ), ); } @LostInBrittany @ptibulle

Slide 36

Slide 36

Widget Inspector @LostInBrittany @ptibulle

Slide 37

Slide 37

Responsive ? @LostInBrittany @ptibulle

Slide 38

Slide 38

Responsive ! Scaffold Scaffold Row ListView GridView @LostInBrittany @ptibulle

Slide 39

Slide 39

Gestion des thèmes @LostInBrittany @ptibulle

Slide 40

Slide 40

Material Design 2.0 @LostInBrittany @ptibulle

Slide 41

Slide 41

Blazing fast and flexible layouts @LostInBrittany @ptibulle

Slide 42

Slide 42

Why to choose Flutter? OK, so it’s a new technology to build mobile apps, rather cool, yeah… but why should I choose it? @LostInBrittany @ptibulle

Slide 43

Slide 43

Why choose Flutter? Beautiful Fast @LostInBrittany Productive Extensible @ptibulle

Slide 44

Slide 44

Beautiful Control every pixel on the screen Make your brand come to life Never say “no” to your designer Stand out in the marketplace Win awards with beautiful UI @LostInBrittany @ptibulle

Slide 45

Slide 45

Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code @LostInBrittany @ptibulle

Slide 46

Slide 46

Productive Sub-second reload times Paint your app to life Iterate rapidly on features Test hypotheses quicker than ever More time to experiment & test features Single-codebase for faster collab 3X Productivity Gains @LostInBrittany @ptibulle

Slide 47

Slide 47

Extensible Everything is free and open source Layered architecture: easy to extend Deep platform integrations Hundreds of third-party packages (ads, videos, database, cloud etc.) @LostInBrittany @ptibulle

Slide 48

Slide 48

A wonderful time to begin with Flutter Flutter is getting momentum! @LostInBrittany @ptibulle

Slide 49

Slide 49

Flutter is on the starting blocks Version 1.0 released last December @LostInBrittany @ptibulle

Slide 50

Slide 50

Getting momentum StackOverflow Question Views @LostInBrittany @ptibulle

Slide 51

Slide 51

Integration with popular tools @LostInBrittany @ptibulle

Slide 52

Slide 52

And now, let’s code! TL;DR: We have spoken too much, now it’s your turn @LostInBrittany @ptibulle

Slide 53

Slide 53

Let’s go ! Wifi ou 4G Codelab : https://ptibulle.github.io/#0 Sources : https://github.com/ptibulle/flutter_breizh @LostInBrittany @ptibulle

Slide 54

Slide 54

Thank you! @LostInBrittany @ptibulle