1 of 35

Building Beautiful Cross-platform Apps with Flutter

Andrew Fitz Gibbon

📧asfg@cs.washington.edu

📧asfg@google.com

🐦@fitzface

2 of 35

3 of 35

Programming cycle...

1st run: "I'm thinking of a number between 1 and 100..."

2nd run: Write a Haiku

3rd run: Generate a random number

4th run: See it was generated wrong, fix it, recompile, start again

4 of 35

Programming cycle...

Choose goal

5 of 35

Programming cycle...

Choose goal

Write code

6 of 35

Programming cycle...

Choose goal

Write code

Observe

Evaluate

7 of 35

Programming cycle...

Choose goal

Re-Write code

Observe

Evaluate

8 of 35

Programming cycle...

Choose goal

Write code

Observe

Evaluate

9 of 35

How "real-time" has this been for you?

10 of 35

Artifact of our development environment

Source Code

Compile

Create Binary

Ask JVM to run

Run from top

11 of 35

Artifact of our development environment

Source Code

Compile

Create Binary

Ask JVM to run

Run from top

12 of 35

Artifact of our development environment

Source Code

Compile

Create Binary

Ask JVM to run

Run from top

13 of 35

Strategies to speed up...

  • Test-driven development
  • Behavior-driven development
  • Abstraction, Encapsulation
  • Modularisation
  • Runtime debugging
    • breakpoints, watchpoints, variable inspection, etc.

14 of 35

What if we changed the environment?

15 of 35

User Interfaces

  1. Print some text

​

​

System.out.println("I'm thinking....");

​

16 of 35

User Interfaces

  • Print some text
  • Read in some text

​

System.out.println("I'm thinking....");

n = scanner.nextInt();

17 of 35

User Interfaces

  • Print some text
  • Read in some text
  • Do something with that text

​

System.out.println("I'm thinking....");

n = scanner.nextInt();

if (n == 42) // ...

​

18 of 35

User Interfaces

  • Print some text
  • Read in some text
  • Do something with that text
  • Print more text

​

​

System.out.println("I'm thinking....");

n = scanner.nextInt();

if (n == 42)

System.out.println("That's the answer!");

​

​

19 of 35

User Interfaces

  • Print some text
  • Read in some text
  • Do something with that text
  • Print more text
  • Repeat

while (programming) {

System.out.println("I'm thinking....");

n = scanner.nextInt();

if (n == 42)

System.out.println("That's the answer!");

}

​

20 of 35

User Interfaces

21 of 35

Introducing....

22 of 35

Introducing....

Guessing Game:

The long-awaited (and

oft-requested) mobile app

23 of 35

Google's UI Toolkit for building cross-platform apps.

Flutter

24 of 35

Flutter tl;dr:

  • Customized, fluid UI
  • Reactive pattern
  • Emphasis on developer tools
  • Natively compiled on both iOS and Android�

25 of 35

Reactive Pattern

  • Everything’s a Widget
  • Stateless Widgets
  • Stateful Widgets
  • Explicit state mutation
  • Rebuilding widgets is cheap

Text

Button

Center

Text

Scaffold

AppBar

26 of 35

Platform SDKs

OS

Runtime

Framework

App

27 of 35

Platform SDKs

OS

Runtime

Framework

App

App

28 of 35

WebView-based SDKs

OS

Runtime

Framework

WebView

JavaScript VM

App

29 of 35

Other runtimes + native SDKs

OS

App (view)

Non-Platform Runtime

App (logic)

Runtime

Framework

Bridge

30 of 35

Custom, Native, Fluid UIs

​

  • Entire UI stack built in Dart
  • UI layout through code
  • Documented through code
  • Customisable at any level

Framework

(Dart)

Engine

(C++)

Skia

Dart

Text

Material

Cupertino

Widgets

Rendering

Animation

Painting

Gestures

Foundation

31 of 35

Apps are unique

32 of 35

PS: Want to learn more about web and websites? Look into CSE 154.

33 of 35

iOS

Flutter

https://github.com/xster/flutter-test/tree/master/t95_ios_settings_page

34 of 35

Cross-platform...

Running GuessingGame the App on Android...

35 of 35

Learn more

https://flutter.dev

@FlutterDev

​