Venez coder votre 1ère application Flutter !

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Flutter architecture @LostInBrittany @ptibulle

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

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

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

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

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

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

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

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

Le Layout @LostInBrittany @ptibulle

Le Layout @LostInBrittany @ptibulle

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

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

Widget Inspector @LostInBrittany @ptibulle

Responsive ? @LostInBrittany @ptibulle

Responsive ! Scaffold Scaffold Row ListView GridView @LostInBrittany @ptibulle

Gestion des thèmes @LostInBrittany @ptibulle

Material Design 2.0 @LostInBrittany @ptibulle

Blazing fast and flexible layouts @LostInBrittany @ptibulle

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

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

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

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

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

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

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

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

Getting momentum StackOverflow Question Views @LostInBrittany @ptibulle

Integration with popular tools @LostInBrittany @ptibulle

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

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

Thank you! @LostInBrittany @ptibulle