Flutter: React for the Rest of Us

Just what we need -- another cross-platform mobile framework! Is Flutter ready for prime time? We'll take a tour of the ecosystem and learn enough to be dangerous.

Transcript

1. Flutter React for the Rest of Us feedback
2. Flutter flutter.io/showcase cross-platform UI framework from Google written in Dart inspired by React compiles to ARM
3. Workflow Development JIT 1 sec hot reload janky Profile / Release AOT "Hello World" ~5 MB 60 (120) fps
4. Everything extends Widget - lightweight, composable - immutable - rebuild on State<W> changes Button = Box( // constraints Material( // shape, fill Inkwell( // touch Padding( // ltrb Center( // align Text('ok')))))); *pseudocode
5. Stateless class Foo extends StatelessWidget { final String title; const Foo(this.title); Widget build(BuildContext ctx) => FlatButton.icon( icon: Icon(Icons.star), label: Text(title), ...); } Widget has a build method. BuildContext is a hook into the tree.
6. Stateful class Foo extends StatefulWidget { State createState () => _FooState(0) ; } _FooState extends State<Foo> { int _n; _FooState(this._n) ; Widget build(BuildContext ctx) => Inkwell ( child: Text ('Hello $_n times!' ), onTap: () => setState(_increment), ); void _increment() => _n++; } State can access its widget and context. Calling setState triggers a rebuild.
7. Inherited "Having dependent descendants" class Theme extends InheritedWidget { final Color color const Theme( this.color, Widget child, ) : super(child); static Color of(BuildContext ctx) => ctx.inheritFrom(Theme).color; bool updateShouldNotify(Theme old) => old.color != color; } Has a static method, of. Returns the nearest instance, or its data. inheritFrom wires in ctx as a dependency. When Theme rebuilds, notify ctx. Don't need rebuilds? Use ctx.ancestorOfType instead.
8. ListView sync IndexedWidgetBuilder = (Context, int index ) => Widget async FutureBuilder<T> = ( Future<T>, (Context, Snapshot<T> ) => Widget ), StreamBuilder<T> = (...) Also: - GridView - Custom scrolling
9. Testing flutter.io/testing - PODO unit tests - Headless widget tests - Flutter driver (instrumentation tests) - fastlane - Travis - GitLab CI - bitrise
10. Devtools Flutter Inspector - Touch to select => Node in widget tree => Jump to definition - Performance overlay, paint boundaries - Slow-motion animations - Toggle iOS / Android behavior - Observatory: debug, profile
11. Plugins Calling Android/iOS APIs - device, package info - radio, sensors, battery - filesystem, keychain - contacts - location - camera - web browser - video player - auth (fingerprint, Touch ID, ...) - purchases - notifications - SharedPreferences / NSUserDefaults - AssetManager / NSBundle - ... github.com/flutter/plugins
12. Roadmap - iOS - a11y, i18n - existing apps - Crashlytics - Google Maps - .so
13. Resources Google - Gallery - flutter.io, dartlang.org, material.io - Codelabs - gitter - flutter-dev@googlegroups.com - Boring Flutter Development Show - Fluttery Community - Chrome extensions - Flutter Weekly - itsallwidgets.com - flutterstudio.app - Dart by Example - YouTube, Medium, ... - [your name here]
14. Say hi! tom@skylarkinteractive.com Credit: @dash_the_dartlang_plushy