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.

C887ad592770a197f114d0a1d3e3a5a7?s=128

Jorge Coca

June 26, 2019
Tweet

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

  13. None
  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...

  19. None
  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!