Flutter of Excitement?

In this session I'll introduce Flutter, Google's mobile app SDK for creating native interfaces on iOS and Android. Flutter makes use of the Dart programming language, so we'll start with a quick intro to Dart. We'll look at comparisons between Flutter and other cross-platform mobile frameworks, create a simple app, and do some unit testing. There will be examples of how to use Flutter's platform channels to call native platform services. To wrap up, we'll end with some scenarios where Flutter might be a good choice for a project and some where it might not be a such a good choice. Everybody should be able to walk away with a general understanding of Flutter and if it's worth their time to investigate.

Transcript

1. Flutter of Excitement?
2. Important Notes • Questions • Feedback • Slack Channel (#aic18-ballroom-a) • Sticky Notes on Wall
3. What is Flutter Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.1 1 https://flutter.io
4. What is Flutter • Unveiled at the 2015 Dart developer summit • Cross Platform (iOS and Android) • Employs Dart programming language • Supports Hot Reload • Widget based reactive framework • Allows access to native features and SDKs
5. Tools • IntelliJ Idea • Dart and Flutter plugins • VS Code • Dart and Flutter plugins • Pub • Dart package management system • Gitter • Flutter Gitter Channel
6. Dart
7. History of Dart • Dart was unveiled at the GOTO conference in Aarhus, Denmark, October 10–12, 2011 • The project was founded by Lars Bak and Kasper Lund
8. Platforms • Mobile (Flutter) • Web (AngularDart) • Server
9. Object-Oriented & Class Defined • Everything in a variable is an object • Every object is an instance of a Class • All objects inherit from the Object class • Strongly types with type inference int lineCount; assert(lineCount == null);
10. Single Inheritance & Mixins class Musician extends Performer with Musical { // ··· } class Maestro extends Person with Musical, Aggressive, Demented { Maestro(String maestroName) { name = maestroName; canConduct = true; } }
11. Optional, Named, and Default Parameters • Position Parameters: String say(String from, String msg, [String device]) { ··· } say("earth", "It's gonna be hot") • Named Parameters: String say({String from, @required String msg, String device}) { ··· } say(msg: "It's gonna be hot") • Default Parameters: String say({String from = "earth", @required String msg, String device}) { ··· } say(msg: "It's gonna be hot")
12. Cascade notation (..) • With cascade notation: querySelector('#confirm') // Get an object. ..text = 'Confirm' // Use its members. ..classes.add('important') ..onClick.listen((e) => window.alert('Confirmed!')); • Without cascade notation: var button = querySelector('#confirm'); button.text = 'Confirm'; button.classes.add('important'); button.onClick.listen((e) => window.alert('Confirmed!'));
13. Asynchrony, Concurrency, Parallelism • Future and Stream objects • async and await • isolates - similar to threads but don't share memory, communicating only via messages.
14. Flutter
15. Start • flutter doctor [-] Android toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions. • flutter create myapp • flutter devices • flutter run
16. First App import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } }
17. Incrementor App
18. Widget Tree
19. Stateful and Stateless Widgets • Some widgets are stateful, and some are stateless. • If a widget changes—the user interacts with it, for example— it’s stateful. • A widget’s state consists of values that can change, like a slider’s current value or whether a checkbox is checked. • A widget’s state is stored in a State object, separating the widget’s state from its appearance.
20. Stateless Widget A stateless widget has no internal state to manage. Icon, IconButton, and Text are examples of stateless widgets, which subclass StatelessWidget.
21. Stateful Widget A stateful widget is dynamic. The user can interact with a stateful widget (by typing into a form, or moving a slider, for example), or it changes over time (perhaps a data feed causes the UI to update). Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets, which subclass StatefulWidget.
22. Creating a Stateful Widget • To create a custom stateful widget, subclass two classes: StatefulWidget and State. • The state object contains the widget’s state and the widget’s build() method. • When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.
23. Architecture Considerations • Vanilla • Inherited Widget • Streams • Redux
24. Unit Testing • Add this file to test/unit_test.dart: import 'package:test/test.dart'; void main() { test('my first unit test', () { var answer = 42; expect(answer, 42); }); } • add the following block to your pubspec.yaml: dev_dependencies: flutter_test: sdk: flutter
25. Widget Testing import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:incrementor/main.dart'; void main() { testWidgets('Counter increments smoke test', (WidgetTester tester) async { // Build our app and trigger a frame. await tester.pumpWidget(new MyApp()); // Verify that our counter starts at 0. expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsNothing); // Tap the '+' icon and trigger a frame. await tester.tap(find.byIcon(Icons.add)); await tester.pump(); // Verify that our counter has incremented. expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); }); }
26. Integration Testing (Part 1) dev_dependencies: flutter_driver: sdk: flutter
27. Integration Testing (Part 2) // This line imports the extension import 'package:flutter_driver/driver_extension.dart'; import 'package:incrementor/main.dart' as app; void main() { // This line enables the extension enableFlutterDriverExtension(); // Call the `main()` of your app or call `runApp` with whatever widget // you are interested in testing. app.main(); }
28. Integration Testing (Part 3) // Imports the Flutter Driver API import 'package:flutter_driver/flutter_driver.dart'; import 'package:test/test.dart'; void main() { group('incrementor performance test', () { FlutterDriver driver; setUpAll(() async { // Connects to the app driver = await FlutterDriver.connect(); }); tearDownAll(() async { if (driver != null) { // Closes the connection driver.close(); } }); test('measure', () async { // Record the performance timeline of things that happen inside the closure Timeline timeline = await driver.traceAction(() async { //SerializableFinder userList = find.byValueKey('Increment'); //SerializableFinder button = find.text('+'); SerializableFinder button = find.byTooltip('Increment'); await driver.waitFor(button); await driver.tap(button); SerializableFinder text = find.text('1'); String counterText = await driver.getText(text); expect(counterText, '1'); }); // The `timeline` object contains all the performance data recorded during // the scrolling session. It can be digested into a handful of useful // aggregate numbers, such as "average frame build time". TimelineSummary summary = new TimelineSummary.summarize(timeline); // The following line saves the timeline summary to a JSON file. summary.writeSummaryToFile('incrementor_performance', pretty: true); // The following line saves the raw timeline data as JSON. summary.writeTimelineToFile('incrementor_performance', pretty: true); }); }); }
29. Platform Channels
30. Flutter vs Reactive Native While Reactive Native transpiles to native widgets, Flutter compiles all the way to native code. Flutter controls each pixel on the screen, which avoids performance problems caused by the need for a JavaScript bridge.
31. Questions & Feedback