Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Is Flutter truly that easy?

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.

Jorge Coca

June 26, 2019
Tweet

More Decks by Jorge Coca

Other Decks in Programming

Transcript

  1. What is Flutter? → Portable UI toolkit → Mobile, web,

    and Desktop → Written in Dart → Fast dev, flexible UI, and native performance
  2. Portable UI toolkit → Hosts Skia and Dart in a

    shell → Different platforms have different shells → Flutter engine is window toolkit agnostic → Modular approach
  3. 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...)
  4. Dart → Familiar language → Event-loop model similar to Node.js

    → Future API (async-await) → Isolate-based concurrency
  5. 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'); } }
  6. Flutter is like Picasso: you can ask it to paint

    anything, anywhere, and it will deliver outstanding results -- Jorge Coca
  7. Well, almost everything is a widget → Images, icons, text,

    rows, columns... → You create a layout by composing widgets → Widget tree
  8. 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'), ], ), ], ), );
  9. Yeah, that's cool, but I bet things get more complex

    when you need to change the data...
  10. 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()
  11. StatelessWidget 1. Create a widget class that extends from StatelessWidget

    2. Just implement the build() to start painting on the screen
  12. class SpongebobProfile extends StatelessWidget { @override Widget build(BuildContext context) {

    return Column( children: [ Image.fromAsset('spongebob.png'), Text('Spongebob') ], ); } }
  13. 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
  14. 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), ), ); } }
  15. What do we know so far? → UI portable toolkit

    → Written in Dart → Composable widgets → Stateless and Stateful widgets
  16. How can I keep learning Flutter? → flutter.dev → Flutter

    Community @ Medium → Flutter @ YouTube → Widget of the week, Flutter in Focus, The Boring Show...
  17. The Flutter Community → Everyone is welcome! → Healthy, respectful,

    and fun! → Love Open Source! → Chicago ❤ Flutter: chicagoflutter.com
  18. @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)