Slide 1

Slide 1 text

Balázs Gerlei Flutter - true cross-platform solution or just a tool for prototyping? @balazsgerlei

Slide 2

Slide 2 text

What is Flutter? • “Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.” • Open source • Still in alpha • Aims to enable shared codebase, designs and development team • Apps are fast and performant, highly customizable • You write applications in Dart language flutter.io/

Slide 3

Slide 3 text

What is Dart? • An open-source language developed by Google • Very similar to Java, JavaScript (and Kotlin) • Optional, but strong type system • Fast generational garbage collection • Tree-shaking compiler which removes dead code, resulting tiny binaries • Heavily used (mainly in web development) by Google, can scale well dartlang.org

Slide 4

Slide 4 text

Motivation • Developing for mobile is hard • The market is a two-horse race between iOS and Android, it’s rare to only develop for one • Managing two separate teams, and building two separate apps is not easy • “Write once, run everywhere” is an enticing promise, but almost none of the existing solutions can truly deliver • You should be able to trust that users will see what you see during development

Slide 5

Slide 5 text

Flutter’s solution • A cross-platform SDK without the overhead of slow bridges between the cross-platform and native environment • The Dart code is compiled to native • Flutter renders the whole UI, no native Views/Widgets are used • Provides a productive development environment

Slide 6

Slide 6 text

One-pass layout and painting • Flutter handles all rendering • Most other platforms either join layout and painting, or do multi-pass O(Nˆ2) layout • Flutter has a one-pass, O(N), separated layout and painting • Flutter uses simple constraint model: basically min and max width and height • Flutter invalidates subtrees not rects

Slide 7

Slide 7 text

UI is entirely code • You write your UI in code as the rest of the app, not in a declarative language • Flutter favors composition over inheritance, almost everything is a Widget, even Padding • Two kinds of Widgets: • StatelessWidget: immutable views, ex. a text • StatefullWidget: mutable views, ex. list of items retrieved from the network

Slide 8

Slide 8 text

Widget Composition class ExampleWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Column( children: [ new Text("One"), new Center( child: new Text("Hello, world!"), ), ], ); } }

Slide 9

Slide 9 text

Hot Reload • Similar to the native ”Instant Run” feature of Android, but works on iOS too • It preservers state (heap and stack) • Really fast and reliable

Slide 10

Slide 10 text

Flutter in the limelight

Slide 11

Slide 11 text

Flutter in production – Hamilton App • The official app for the popular US musical Hamilton is built with Flutter • Almost fully custom design (almost no platform-specific View/Widget) • Big user base, 900k+ installs, 450k+ daily actives, 2m+ entries in the ticket winning lottery

Slide 12

Slide 12 text

Flutter in production – Hamilton App

Slide 13

Slide 13 text

So... Can it be used in production?

Slide 14

Slide 14 text

Can it be used in production? • Well... maybe • It is in very early stage • For apps with either pure Material Design, or entirely custom UI, without deep system integration • Promotional type apps (like Hamilton) are great example • Not (yet) suited for most (complex) applications

Slide 15

Slide 15 text

Advantages • Most complete Material Design implementation • As all rendering is done by Flutter, apps look the same on all platform versions • Hot reload really works well, development cycles are fast • Static analysis is quite good and improving • Active and enthusiastic community

Slide 16

Slide 16 text

Disadvantages • Still in alpha, used by few • Have to learn a whole new language • Which is still under active development • Easy to mix in UI code with logic (can use MVP or MVVM to mitigate) – cannot write UI in a declarative way • You can feel boxed in by the built-in Widgets – they clearly have an intended usage (mostly inspired by Material Design) • Not a lot of available libraries • Not always suited best for both platforms (Android almost always takes priority)

Slide 17

Slide 17 text

Thank You! Balázs Gerlei @balazsgerlei

Slide 18

Slide 18 text

Links • Flutter’s website • flutter.io • Flutter’s GitHub • github.com/flutter • POSSE’s presentation about how they built the Hamilton app • youtu.be/prlK_QL_qOA • Eric Seidel’s presentation from Strange Loop 2017 • youtu.be/VUiVkDpikDI • Single Codebase, Two Apps with Flutter and Firebase (Google I/O '17) • youtu.be/w2TcYP8qiRI