introduction to flutter - truly crossplatform, amazingly fast
TRANSCRIPT
![Page 1: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/1.jpg)
Fluttermobile guild#cododajnia
Bartosz Kosarzycki@bkosarzycki
![Page 2: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/2.jpg)
What is Flutter?- multi-platform - Android & iOS- high performance, low latency- DART as main language- open-source / github- “flutter” frame render / rapid variation of signal parameters- not a monolith structure
access to, and control over, all layers of the system
- custom ui-rendering engine
![Page 3: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/3.jpg)
What’s more?- material design on iPhones- drawer, FAB implementation
on iPhones- change iphone/android behaviour style dynamically- iPhone navigation style on Android- hot reload of classes
https://www.youtube.com/watch?v=iPlPk43RbpA- AOT compilation for iOS & Android
![Page 4: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/4.jpg)
Architecture
- a heavily optimized, mobile-first 2D rendering engine (with excellent support for text)
- a functional-reactive framework - a set of Material Design widgets (which can be extended)- command-line tools and plugins for IntelliJ IDEA- highly productive and fast development experience
![Page 5: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/5.jpg)
Architecture
![Page 6: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/6.jpg)
High-level overview
Skia Dart VM Engine
Mojo
Services
Animation Painting
Rendering
Widgets
Material
Gestures
Shell(C++)
Framework(Dart)
source: flutter.io
help
help
![Page 7: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/7.jpg)
Technology
- C, C++, Dart, Skia (a 2D rendering engine), Mojo IPC, and Blink’s text rendering system
Compatibility
- Android: Jelly Bean, v16, 4.1.x or newer, - iPhone: iOS 8 or newer- emulator /simulator
Performance- constant 60 fps
![Page 8: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/8.jpg)
![Page 9: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/9.jpg)
BSD licenseslimmed downgraphics stack from CHROME
slimmed downgraphics stack from ANDROID
Actively in useat Google
2 million lines of production code in use
since 2011
![Page 10: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/10.jpg)
JavaScript
DART
Scala
Java
TypeScript
![Page 11: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/11.jpg)
Language features- dynamically typed language with optional types- dart SDK - includes libraries & command-line tools- dart VM - online version - dartpad- dartanalyzer - statically analyzes code, helping you catch errors
early- pub - package manager- dart2js - Dart-to-JavaScript compiler - dartfmt - Dart code formatter
![Page 12: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/12.jpg)
In short...Getters and setters
class Spacecraft { DateTime launchDate ; int get launchYear => launchDate?.year ;}
flybyObjects.where((name) => name.contains('flower')).forEach(print);
Lambda (fat-arrow) expressions:
Variables & constants:var name = 'Voyager I';var year = 1977;final bar = const [];const baz = const [];
Functions:
int fibonacci(int n) { if (n == 0 || n == 1) return n; return fibonacci(n - 1) + fibonacci(n - 2);}
![Page 13: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/13.jpg)
Language features- dart native extensions enable dart to run C/C++ code - check out- public package repository at https://pub.dartlang.org/packages
package imports:import 'package:vector_math/vector_math.dart';
- “everything is an object”, even - numbers, functions, and nulls are objects
- You can create top-level functions and also create functions within functions
- reified generics support- mixins
![Page 14: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/14.jpg)
In short...
var future = gatherNewsReports();future.then((content) => print(content)) .catchError((e) => handleError(e));
Future API:
Mixins:
class Manned { int astronauts; void describeCrew() { print('no. $astronauts'); }}
class Orbiter extends Spacecraft with Manned {}
Async await:
String news = await gatherNewsReports();
Future gatherNewsReports() async { String path = 'https://www.dartlang.org/f/dailyNewsDigest.txt'; return (await HttpRequest.getString(path));}
![Page 15: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/15.jpg)
Syntax of choice:‘Scala’ style:
var title = "Long title text";var title2 = title.substring(5);
‘Java’ style:
String title = "Long title text";String title2 = title.substring(5);
Everything is an object:
double a = 3.2;var floor = a.floor();(floor + 2).abs();
Lamdas & closures:
var addition = () => 2 + 3;print(addition());
var errorType = "[ERROR]";var closure = (msg) => errorType + " " + msg;print(closure("Some error"));
![Page 16: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/16.jpg)
Language syntax:
Anonymous functions:
var list = ['iPhone', 'Android'];list.forEach((i) { print(list.indexOf(i).toString() + ': ' + i);});
Type checking:
if (a is AndroidPhone) { a.macAddress = '00-14-22-01-23-45';}
![Page 17: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/17.jpg)
Reified generics:
Generics are kept at runtime
var names = new List<String>();names.addAll(['Seth', 'Kathy', 'Lars']);
//check at runtimeprint(names is List<String>);
Parameterized types with constructors
var names = new List<String>();var nameSet = new Set<String>.from(names);
![Page 18: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/18.jpg)
Reified generics:
Generics methods
class Foo<E> { E _item;
<T> T transform(T fn(E)) { return fn(_item); }}
STILL IN DEVELOPMENT(as of Nov, 2016)
https://github.com/dart-lang/sdk/issues/254
class B<C> { C create() { return new C(); }}
New instance
![Page 19: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/19.jpg)
Optional types in dart- dart language is dynamically typed- it is possible to add type annotations to programs- incomplete or plain wrong type annotations DO NOT prevent
compilation- variables with no specified type get a special type: dynamic
Type annotations give a couple of benefits, however:
- Documentation for humans, name completion and improved navigation in IDEs, static checker warns you about potential problems
- more info: here
![Page 20: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/20.jpg)
Loading libraries
- Importing only part of a libraryimport 'package:lib1/lib1.dart' show foo;
- Lazily loading a libraryimport 'package:deferred/hello.dart' deferred as hello; await hello.loadLibrary();
![Page 21: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/21.jpg)
PUB package manager
File name:
/pubspec.yaml
$ cd /Users/bko/repos/abcrepo$ pub get
![Page 22: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/22.jpg)
IDEs
Also:
![Page 23: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/23.jpg)
Material design
![Page 24: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/24.jpg)
Books
![Page 25: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/25.jpg)
Tools- gitignore file - .gitignore
- environment variables
.gitignore:
$ nano ~/.bash_profile
flutter pub dart dart2js dartanalyzer etc...
![Page 26: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/26.jpg)
Project checkout / get dependencies
- pub get
![Page 27: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/27.jpg)
Run the application- open iPhone simulator / Android emulator
- check connected devices
![Page 28: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/28.jpg)
Run the application- run in debug mode
- install the app
- run in ‘release’ mode (not supported for emulators)
- run on a specific device
![Page 29: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/29.jpg)
Run the application- run lint analysis
- run tests
![Page 30: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/30.jpg)
Platforms comparison
![Page 31: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/31.jpg)
Using resources- to add an image edit flutter.yaml file
- add image file to the project:
![Page 32: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/32.jpg)
App iconiPhone Android
![Page 33: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/33.jpg)
UI ThreadGraphics PipelineDart VM
GPU ThreadCompositor
Skia
GPU
GL commands
Layer Tree
Vsync
GPU
Throttle
source: flutter.io
![Page 34: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/34.jpg)
Rendering Pipeline
Animate
Build
Layout
Paint
Tick animations to change widget state
Rebuild widgets to account for state changes
Update size and position of render objects
Record display lists for composited layers
Vsync
GPU
Layer Tree
source: flutter.io
![Page 35: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/35.jpg)
StatelessComponent
constructor
build
StatefulComponent
constructor
createState
A single StatelessComponent can build in many different BuildContexts
A StatefulComponent creates a new State instance for each BuildContext
source: flutter.io
![Page 36: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/36.jpg)
Links- Dart language articles: https://www.dartlang.org/articles/language- Online Dartpad: https://dartpad.dartlang.org/- Style, Usage, Design- Dart academy: https://dart.academy/- Beginners: part1, part2- Dart news: http://news.dartlang.org/- Flutter layered design: https://www.youtube.com/watch?v=dkyY9WCGMi0
- Sky (previous version): https://www.youtube.com/watch?v=PnIWl33YMwA
![Page 37: Introduction to Flutter - truly crossplatform, amazingly fast](https://reader031.vdocuments.mx/reader031/viewer/2022021422/5875ed911a28ab7d5a8b78e3/html5/thumbnails/37.jpg)
Thank you!
QUESTIONSBartosz Kosarzycki@bkosarzycki