Is Flutter truly that easy?

If you are developer, chances are that you’ve heard about Flutter, either at Google I/O, or one of your colleagues told you about, or you’ve read a Medium article… but, what’s all this fuzz? Isn’t Flutter yet another cross platform promising a single codebase that can run anywhere? Pufff, we’ve seen that already, and it never works…
… except that this time IT WORKS! And not only for mobile apps, but also for desktop and web apps! In this talk, let me show how easy it is to get a Flutter app up and running, explore some of the core concepts of the framework and understand why this time Flutter is the truly “write once, run everywhere” framework.

Transcript

1. Intro to Flutter: Is Flutter truly that easy? !"
2. What is Flutter? → Portable UI toolkit → Mobile, web, and Desktop → Written in Dart → Fast dev, flexible UI, and native performance
3. Portable UI toolkit
4. Portable UI toolkit → Hosts Skia and Dart in a shell → Different platforms have different shells → Flutter engine is window toolkit agnostic → Modular approach
5. Portable UI toolkit
6. Flutter Dart
7. 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...)
8. Dart → Familiar language → Event-loop model similar to Node.js → Future API (async-await) → Isolate-based concurrency
9. Dart Sample Future<void> fetchTemperature() async { final response = await http.get('weather.com'); if (response.statusCode == 200) { print('Temperature: ${response.body}'); return; } else { throw Exception('Failed fetching temperature'); } }
10. Flutter is like Picasso: you can ask it to paint anything, anywhere, and it will deliver outstanding results -- Jorge Coca
11. ... but you don't need to be a genius
12. In Flutter...
14. Well, almost everything is a widget → Images, icons, text, rows, columns... → You create a layout by composing widgets → Widget tree
15. Composing a layout
16. 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'), ], ), ], ), );
17. Yeah, that's cool, but I bet things get more complex when you need to change the data...
18. Nope! Because...
20. 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()
21. StatelessWidget 1. Create a widget class that extends from StatelessWidget 2. Just implement the build() to start painting on the screen
22. class SpongebobProfile extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Image.fromAsset('spongebob.png'), Text('Spongebob') ], ); } }
23. 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
24. class Counter extends StatefulWidget { @override _Counter createState() => _Counter(); } class _Counter extends State<Counter> { 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), ), ); } }
25. What do we know so far? → UI portable toolkit → Written in Dart → Composable widgets → Stateless and Stateful widgets
26. Demo time! !"
27. How can I keep learning Flutter? → flutter.dev → Flutter Community @ Medium → Flutter @ YouTube → Widget of the week, Flutter in Focus, The Boring Show...
28. The Flutter Community → Everyone is welcome! → Healthy, respectful, and fun! → Love Open Source! → Chicago ❤ Flutter: chicagoflutter.com
29. @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)
30. Yes, we use Flutter at BMW github.com/bmw-tech
31. Thank you!