Slide 1

Slide 1 text

Intro to Flutter: Is Flutter truly that easy? !"

Slide 2

Slide 2 text

What is Flutter? → Portable UI toolkit → Mobile, web, and Desktop → Written in Dart → Fast dev, flexible UI, and native performance

Slide 3

Slide 3 text

Portable UI toolkit

Slide 4

Slide 4 text

Portable UI toolkit → Hosts Skia and Dart in a shell → Different platforms have different shells → Flutter engine is window toolkit agnostic → Modular approach

Slide 5

Slide 5 text

Portable UI toolkit

Slide 6

Slide 6 text

Flutter Dart

Slide 7

Slide 7 text

Why Dart? → Client-optimized language for fast apps on any platform → Hot reload: see changes applied on real-time → Ahead of time (AOT) compilation → Just in time (JIT) compilation → Modern tools (profile, debug, lint...)

Slide 8

Slide 8 text

Dart → Familiar language → Event-loop model similar to Node.js → Future API (async-await) → Isolate-based concurrency

Slide 9

Slide 9 text

Dart Sample Future fetchTemperature() async { final response = await http.get('weather.com'); if (response.statusCode == 200) { print('Temperature: ${response.body}'); return; } else { throw Exception('Failed fetching temperature'); } }

Slide 10

Slide 10 text

Flutter is like Picasso: you can ask it to paint anything, anywhere, and it will deliver outstanding results -- Jorge Coca

Slide 11

Slide 11 text

... but you don't need to be a genius

Slide 12

Slide 12 text

In Flutter...

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Well, almost everything is a widget → Images, icons, text, rows, columns... → You create a layout by composing widgets → Widget tree

Slide 15

Slide 15 text

Composing a layout

Slide 16

Slide 16 text

Container( child: Row( children: [ Column( children: [ Icon(Icons.phone), Text('Call'), ], ), Column( children: [ Icon(Icons.route), Text('Route'), ], ), Column( children: [ Icon(Icons.share), Text('Share'), ], ), ], ), );

Slide 17

Slide 17 text

Yeah, that's cool, but I bet things get more complex when you need to change the data...

Slide 18

Slide 18 text

Nope! Because...

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Two types of widgets → StatelessWidgets: a widget that does not require mutable state → StatefulWidget: a widget that has mutable state → Their API is almost identical: you just have to implement build()

Slide 21

Slide 21 text

StatelessWidget 1. Create a widget class that extends from StatelessWidget 2. Just implement the build() to start painting on the screen

Slide 22

Slide 22 text

class SpongebobProfile extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Image.fromAsset('spongebob.png'), Text('Spongebob') ], ); } }

Slide 23

Slide 23 text

StatefulWidget 1. Create a widget class that extends from StatefulWidget 2. Create a State class 3. Use the build() of the State to paint on the screen 4. Call setState() to mutate the data

Slide 24

Slide 24 text

class Counter extends StatefulWidget { @override _Counter createState() => _Counter(); } class _Counter extends State { int _counter = 0; void _incrementCounter() { setState(() => _counter++); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: [ Text('Pressed button $_counter times'), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), ); } }

Slide 25

Slide 25 text

What do we know so far? → UI portable toolkit → Written in Dart → Composable widgets → Stateless and Stateful widgets

Slide 26

Slide 26 text

Demo time! !"

Slide 27

Slide 27 text

How can I keep learning Flutter? → flutter.dev → Flutter Community @ Medium → Flutter @ YouTube → Widget of the week, Flutter in Focus, The Boring Show...

Slide 28

Slide 28 text

The Flutter Community → Everyone is welcome! → Healthy, respectful, and fun! → Love Open Source! → Chicago ❤ Flutter: chicagoflutter.com

Slide 29

Slide 29 text

@jcocaramos / jcocaramos.dev → Core Mobile Engineer @ BMW → Organizer of Chicago Flutter (Meetup) → Writing Dart 2 In Action (Early Access Preview soon...) → Coffee and Flutter (Fridays before 9AM)

Slide 30

Slide 30 text

Yes, we use Flutter at BMW github.com/bmw-tech

Slide 31

Slide 31 text

Thank you!