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

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

Portable UI toolkit

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

Portable UI toolkit

Flutter Dart

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...)

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

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'); } }

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

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

In Flutter...

No content

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

Composing a layout

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'), ], ), ], ), );

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

Nope! Because...

No content

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()

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

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

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

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), ), ); } }

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

Demo time! !"

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

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

@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)

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

Thank you!