SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
Flutter
mobile guild
#cododajnia
Bartosz Kosarzycki
@bkosarzycki
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
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
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
Architecture
High-level overview
Skia Dart VM Engine
Mojo
Services
Animation Painting
Rendering
Widgets
Material
Gestures
Shell
(C++)
Framework
(Dart)
source: flutter.io
help
help
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
Introduction to Flutter - truly crossplatform, amazingly fast
BSD license
slimmed down
graphics stack
from CHROME
slimmed down
graphics stack
from ANDROID
Actively in use
at Google
2 million lines of production
code in use
since 2011
JavaScript
DART
Scala
Java
TypeScript
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
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);
}
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
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));
}
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"));
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';
}
Reified generics:
Generics are kept at runtime
var names = new List<String>();
names.addAll(['Seth', 'Kathy', 'Lars']);
//check at runtime
print(names is List<String>);
Parameterized types with constructors
var names = new List<String>();
var nameSet = new Set<String>.from(names);
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
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
Loading libraries
- Importing only part of a library
import 'package:lib1/lib1.dart' show foo;
- Lazily loading a library
import 'package:deferred/hello.dart' deferred as hello;
await hello.loadLibrary();
PUB package manager
File name:
/pubspec.yaml
$ cd /Users/bko/repos/abcrepo
$ pub get
IDEs
Also:
Material design
Books
Tools
- gitignore file - .gitignore
- environment variables
.gitignore:
$ nano ~/.bash_profile
flutter pub dart dart2js dartanalyzer etc...
Project checkout /
get dependencies
- pub get
Run the application
- open iPhone simulator / Android emulator
- check connected devices
Run the application
- run in debug mode
- install the app
- run in ‘release’ mode (not supported for emulators)
- run on a specific device
Run the application
- run lint analysis
- run tests
Platforms comparison
Using resources
- to add an image edit flutter.yaml file
- add image file to the project:
App icon
iPhone Android
UI ThreadGraphics Pipeline
Dart VM
GPU Thread
Compositor
Skia
GPU
GL commands
Layer Tree
Vsync
GPU
Throttle
source: flutter.io
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
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
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
Thank you!
QUESTIONS
Bartosz Kosarzycki
@bkosarzycki

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to FlutterApoorv Pandey
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaEdureka!
 
Flutter for web
Flutter for web Flutter for web
Flutter for web rihannakedy
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutterrihannakedy
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDKdigitaljoni
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutterShady Selim
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutterAhmed Abu Eldahab
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutterAhmed Abu Eldahab
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptxDiffouoFopaEsdras
 
Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Priyanka Tyagi
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSCIIITLucknow
 
Flutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessFlutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessBartosz Kosarzycki
 

Was ist angesagt? (20)

Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | Edureka
 
Flutter
FlutterFlutter
Flutter
 
Flutter for web
Flutter for web Flutter for web
Flutter for web
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutter
 
Flutter
Flutter Flutter
Flutter
 
Flutter UI Framework
Flutter UI FrameworkFlutter UI Framework
Flutter UI Framework
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 
Flutter beyond hello world
Flutter beyond hello worldFlutter beyond hello world
Flutter beyond hello world
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDK
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Flutter
FlutterFlutter
Flutter
 
Flutter Bootcamp
Flutter BootcampFlutter Bootcamp
Flutter Bootcamp
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutter
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptx
 
Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter Workshop
 
Flutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for businessFlutter overview - advantages & disadvantages for business
Flutter overview - advantages & disadvantages for business
 

Andere mochten auch

ADG Poznań - Kotlin for Android developers
ADG Poznań - Kotlin for Android developersADG Poznań - Kotlin for Android developers
ADG Poznań - Kotlin for Android developersBartosz Kosarzycki
 
Git-flow workflow and pull-requests
Git-flow workflow and pull-requestsGit-flow workflow and pull-requests
Git-flow workflow and pull-requestsBartosz Kosarzycki
 
Introduction to Dart
Introduction to DartIntroduction to Dart
Introduction to DartRamesh Nair
 
How to build a Dart and Firebase app in 30 mins
How to build a Dart and Firebase app in 30 minsHow to build a Dart and Firebase app in 30 mins
How to build a Dart and Firebase app in 30 minsJana Moudrá
 
Introduction to the Dart language
Introduction to the Dart languageIntroduction to the Dart language
Introduction to the Dart languageJana Moudrá
 
JavaScript, Dart, TypeScript & CoffeeScript Comparison
JavaScript, Dart, TypeScript & CoffeeScript ComparisonJavaScript, Dart, TypeScript & CoffeeScript Comparison
JavaScript, Dart, TypeScript & CoffeeScript ComparisonHaim Michael
 
Kotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projectsKotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projectsBartosz Kosarzycki
 
Kotlin advanced - language reference for android developers
Kotlin advanced - language reference for android developersKotlin advanced - language reference for android developers
Kotlin advanced - language reference for android developersBartosz Kosarzycki
 
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow soloviniciusban
 
TypeScript, Dart, CoffeeScript and JavaScript Comparison
TypeScript, Dart, CoffeeScript and JavaScript ComparisonTypeScript, Dart, CoffeeScript and JavaScript Comparison
TypeScript, Dart, CoffeeScript and JavaScript ComparisonHaim Michael
 
Structured Apps with Google Dart
Structured Apps with Google DartStructured Apps with Google Dart
Structured Apps with Google DartJermaine Oppong
 
Daggerate your code - Write your own annotation processor
Daggerate your code - Write your own annotation processorDaggerate your code - Write your own annotation processor
Daggerate your code - Write your own annotation processorBartosz Kosarzycki
 
Dart como alternativa a TypeScript (Codemotion 2016)
Dart como alternativa a TypeScript (Codemotion 2016)Dart como alternativa a TypeScript (Codemotion 2016)
Dart como alternativa a TypeScript (Codemotion 2016)Rafael Bermúdez Míguez
 

Andere mochten auch (18)

ADG Poznań - Kotlin for Android developers
ADG Poznań - Kotlin for Android developersADG Poznań - Kotlin for Android developers
ADG Poznań - Kotlin for Android developers
 
Android antipatterns
Android antipatternsAndroid antipatterns
Android antipatterns
 
Git-flow workflow and pull-requests
Git-flow workflow and pull-requestsGit-flow workflow and pull-requests
Git-flow workflow and pull-requests
 
Dart
DartDart
Dart
 
Introduction to Dart
Introduction to DartIntroduction to Dart
Introduction to Dart
 
How to build a Dart and Firebase app in 30 mins
How to build a Dart and Firebase app in 30 minsHow to build a Dart and Firebase app in 30 mins
How to build a Dart and Firebase app in 30 mins
 
Introduction to the Dart language
Introduction to the Dart languageIntroduction to the Dart language
Introduction to the Dart language
 
JavaScript, Dart, TypeScript & CoffeeScript Comparison
JavaScript, Dart, TypeScript & CoffeeScript ComparisonJavaScript, Dart, TypeScript & CoffeeScript Comparison
JavaScript, Dart, TypeScript & CoffeeScript Comparison
 
Kotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projectsKotlin Developer Starter in Android projects
Kotlin Developer Starter in Android projects
 
Gitlab flow
Gitlab flowGitlab flow
Gitlab flow
 
Kotlin advanced - language reference for android developers
Kotlin advanced - language reference for android developersKotlin advanced - language reference for android developers
Kotlin advanced - language reference for android developers
 
Gitlab flow solo
Gitlab flow soloGitlab flow solo
Gitlab flow solo
 
Flutter
FlutterFlutter
Flutter
 
Flúter auricular común
Flúter auricular comúnFlúter auricular común
Flúter auricular común
 
TypeScript, Dart, CoffeeScript and JavaScript Comparison
TypeScript, Dart, CoffeeScript and JavaScript ComparisonTypeScript, Dart, CoffeeScript and JavaScript Comparison
TypeScript, Dart, CoffeeScript and JavaScript Comparison
 
Structured Apps with Google Dart
Structured Apps with Google DartStructured Apps with Google Dart
Structured Apps with Google Dart
 
Daggerate your code - Write your own annotation processor
Daggerate your code - Write your own annotation processorDaggerate your code - Write your own annotation processor
Daggerate your code - Write your own annotation processor
 
Dart como alternativa a TypeScript (Codemotion 2016)
Dart como alternativa a TypeScript (Codemotion 2016)Dart como alternativa a TypeScript (Codemotion 2016)
Dart como alternativa a TypeScript (Codemotion 2016)
 

Ähnlich wie Introduction to Flutter - truly crossplatform, amazingly fast

An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)
An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)
An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)Eric D. Schabell
 
carrow - Go bindings to Apache Arrow via C++-API
carrow - Go bindings to Apache Arrow via C++-APIcarrow - Go bindings to Apache Arrow via C++-API
carrow - Go bindings to Apache Arrow via C++-APIYoni Davidson
 
Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Lars Vogel
 
High quality ap is with api platform
High quality ap is with api platformHigh quality ap is with api platform
High quality ap is with api platformNelson Kopliku
 
Resume -9 Yrs -Looking for New Opportunity !!
Resume -9 Yrs -Looking for New Opportunity !!Resume -9 Yrs -Looking for New Opportunity !!
Resume -9 Yrs -Looking for New Opportunity !!Raju Tiwari
 
Standalone Android Apps in Python
Standalone Android Apps in PythonStandalone Android Apps in Python
Standalone Android Apps in PythonBaptiste Lagarde
 
Porting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidPorting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidVlatko Kosturjak
 
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007eLiberatica
 
Introduction to Xamarin Mobile Platform
Introduction to Xamarin Mobile PlatformIntroduction to Xamarin Mobile Platform
Introduction to Xamarin Mobile PlatformDominik Minta
 
Tutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer WorkshopTutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer WorkshopVivek Krishnakumar
 
Mobile development in 2020
Mobile development in 2020 Mobile development in 2020
Mobile development in 2020 Bogusz Jelinski
 
Making a Headless Android Device (Oslo Embedded Meetup 2018)
Making a Headless Android Device (Oslo Embedded Meetup 2018)Making a Headless Android Device (Oslo Embedded Meetup 2018)
Making a Headless Android Device (Oslo Embedded Meetup 2018)Patricia Aas
 
MobileConf 2021 Slides: Let's build macOS CLI Utilities using Swift
MobileConf 2021 Slides:  Let's build macOS CLI Utilities using SwiftMobileConf 2021 Slides:  Let's build macOS CLI Utilities using Swift
MobileConf 2021 Slides: Let's build macOS CLI Utilities using SwiftDiego Freniche Brito
 
Android Developer Meetup
Android Developer MeetupAndroid Developer Meetup
Android Developer MeetupMedialets
 
Raju Tiwari-Resume-8+
Raju Tiwari-Resume-8+Raju Tiwari-Resume-8+
Raju Tiwari-Resume-8+Raju Tiwari
 
Understanding and extending p2 for fun and profit
Understanding and extending p2 for fun and profitUnderstanding and extending p2 for fun and profit
Understanding and extending p2 for fun and profitPascal Rapicault
 

Ähnlich wie Introduction to Flutter - truly crossplatform, amazingly fast (20)

An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)
An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)
An OpenShift Primer for Developers to get your Code into the Cloud (PTJUG)
 
carrow - Go bindings to Apache Arrow via C++-API
carrow - Go bindings to Apache Arrow via C++-APIcarrow - Go bindings to Apache Arrow via C++-API
carrow - Go bindings to Apache Arrow via C++-API
 
Getting Native with NDK
Getting Native with NDKGetting Native with NDK
Getting Native with NDK
 
Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11 Android Introduction on Java Forum Stuttgart 11
Android Introduction on Java Forum Stuttgart 11
 
High quality ap is with api platform
High quality ap is with api platformHigh quality ap is with api platform
High quality ap is with api platform
 
Resume -9 Yrs -Looking for New Opportunity !!
Resume -9 Yrs -Looking for New Opportunity !!Resume -9 Yrs -Looking for New Opportunity !!
Resume -9 Yrs -Looking for New Opportunity !!
 
Standalone Android Apps in Python
Standalone Android Apps in PythonStandalone Android Apps in Python
Standalone Android Apps in Python
 
Core Android
Core AndroidCore Android
Core Android
 
Porting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidPorting your favourite cmdline tool to Android
Porting your favourite cmdline tool to Android
 
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007
"About Firebird and Flamerobin" by Marius Popa @ eLiberatica 2007
 
React native
React nativeReact native
React native
 
Introduction to Xamarin Mobile Platform
Introduction to Xamarin Mobile PlatformIntroduction to Xamarin Mobile Platform
Introduction to Xamarin Mobile Platform
 
Tutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer WorkshopTutorial 1: Your First Science App - Araport Developer Workshop
Tutorial 1: Your First Science App - Araport Developer Workshop
 
Alvaro Denis Resume
Alvaro Denis ResumeAlvaro Denis Resume
Alvaro Denis Resume
 
Mobile development in 2020
Mobile development in 2020 Mobile development in 2020
Mobile development in 2020
 
Making a Headless Android Device (Oslo Embedded Meetup 2018)
Making a Headless Android Device (Oslo Embedded Meetup 2018)Making a Headless Android Device (Oslo Embedded Meetup 2018)
Making a Headless Android Device (Oslo Embedded Meetup 2018)
 
MobileConf 2021 Slides: Let's build macOS CLI Utilities using Swift
MobileConf 2021 Slides:  Let's build macOS CLI Utilities using SwiftMobileConf 2021 Slides:  Let's build macOS CLI Utilities using Swift
MobileConf 2021 Slides: Let's build macOS CLI Utilities using Swift
 
Android Developer Meetup
Android Developer MeetupAndroid Developer Meetup
Android Developer Meetup
 
Raju Tiwari-Resume-8+
Raju Tiwari-Resume-8+Raju Tiwari-Resume-8+
Raju Tiwari-Resume-8+
 
Understanding and extending p2 for fun and profit
Understanding and extending p2 for fun and profitUnderstanding and extending p2 for fun and profit
Understanding and extending p2 for fun and profit
 

Mehr von Bartosz Kosarzycki

Droidcon Online 2020 quick summary
Droidcon Online 2020 quick summaryDroidcon Online 2020 quick summary
Droidcon Online 2020 quick summaryBartosz Kosarzycki
 
Flutter CI & Device Farms for Flutter
Flutter CI & Device Farms for FlutterFlutter CI & Device Farms for Flutter
Flutter CI & Device Farms for FlutterBartosz Kosarzycki
 
Drone racing - beginner's guide
Drone racing - beginner's guideDrone racing - beginner's guide
Drone racing - beginner's guideBartosz Kosarzycki
 
Optimize apps for Chromebooks - Meet.Intive Oct, 2018
Optimize apps for Chromebooks - Meet.Intive Oct, 2018Optimize apps for Chromebooks - Meet.Intive Oct, 2018
Optimize apps for Chromebooks - Meet.Intive Oct, 2018Bartosz Kosarzycki
 
Android - Gradle build optimisation 3d83f31339d239abcc55f869e5f30348?s=47
Android - Gradle build optimisation  3d83f31339d239abcc55f869e5f30348?s=47Android - Gradle build optimisation  3d83f31339d239abcc55f869e5f30348?s=47
Android - Gradle build optimisation 3d83f31339d239abcc55f869e5f30348?s=47Bartosz Kosarzycki
 
Android things introduction - Development for IoT
Android things introduction - Development for IoTAndroid things introduction - Development for IoT
Android things introduction - Development for IoTBartosz Kosarzycki
 

Mehr von Bartosz Kosarzycki (11)

Droidcon Summary 2021
Droidcon Summary 2021Droidcon Summary 2021
Droidcon Summary 2021
 
Droidcon Online 2020 quick summary
Droidcon Online 2020 quick summaryDroidcon Online 2020 quick summary
Droidcon Online 2020 quick summary
 
Provider vs BLoC vs Redux
Provider vs BLoC vs ReduxProvider vs BLoC vs Redux
Provider vs BLoC vs Redux
 
Animations in Flutter
Animations in FlutterAnimations in Flutter
Animations in Flutter
 
Flutter CI & Device Farms for Flutter
Flutter CI & Device Farms for FlutterFlutter CI & Device Farms for Flutter
Flutter CI & Device Farms for Flutter
 
Drone racing - beginner's guide
Drone racing - beginner's guideDrone racing - beginner's guide
Drone racing - beginner's guide
 
Optimize apps for Chromebooks - Meet.Intive Oct, 2018
Optimize apps for Chromebooks - Meet.Intive Oct, 2018Optimize apps for Chromebooks - Meet.Intive Oct, 2018
Optimize apps for Chromebooks - Meet.Intive Oct, 2018
 
Android - Gradle build optimisation 3d83f31339d239abcc55f869e5f30348?s=47
Android - Gradle build optimisation  3d83f31339d239abcc55f869e5f30348?s=47Android - Gradle build optimisation  3d83f31339d239abcc55f869e5f30348?s=47
Android - Gradle build optimisation 3d83f31339d239abcc55f869e5f30348?s=47
 
DroidCon Berlin 2018 summary
DroidCon Berlin 2018 summaryDroidCon Berlin 2018 summary
DroidCon Berlin 2018 summary
 
SCALA - Functional domain
SCALA -  Functional domainSCALA -  Functional domain
SCALA - Functional domain
 
Android things introduction - Development for IoT
Android things introduction - Development for IoTAndroid things introduction - Development for IoT
Android things introduction - Development for IoT
 

Kürzlich hochgeladen

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
How to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareHow to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareNYGGS Automation Suite
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024ThousandEyes
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentBOSC Tech Labs
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App DevelopmentMobulous Technologies
 

Kürzlich hochgeladen (20)

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
How to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS SoftwareHow to Improve the Employee Experience? - HRMS Software
How to Improve the Employee Experience? - HRMS Software
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App Development
 

Introduction to Flutter - truly crossplatform, amazingly fast

  • 2. 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
  • 3. 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
  • 4. 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
  • 6. High-level overview Skia Dart VM Engine Mojo Services Animation Painting Rendering Widgets Material Gestures Shell (C++) Framework (Dart) source: flutter.io help help
  • 7. 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
  • 9. BSD license slimmed down graphics stack from CHROME slimmed down graphics stack from ANDROID Actively in use at Google 2 million lines of production code in use since 2011
  • 11. 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
  • 12. 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); }
  • 13. 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
  • 14. 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)); }
  • 15. 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"));
  • 16. 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'; }
  • 17. Reified generics: Generics are kept at runtime var names = new List<String>(); names.addAll(['Seth', 'Kathy', 'Lars']); //check at runtime print(names is List<String>); Parameterized types with constructors var names = new List<String>(); var nameSet = new Set<String>.from(names);
  • 18. 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
  • 19. 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
  • 20. Loading libraries - Importing only part of a library import 'package:lib1/lib1.dart' show foo; - Lazily loading a library import 'package:deferred/hello.dart' deferred as hello; await hello.loadLibrary();
  • 21. PUB package manager File name: /pubspec.yaml $ cd /Users/bko/repos/abcrepo $ pub get
  • 24. Books
  • 25. Tools - gitignore file - .gitignore - environment variables .gitignore: $ nano ~/.bash_profile flutter pub dart dart2js dartanalyzer etc...
  • 26. Project checkout / get dependencies - pub get
  • 27. Run the application - open iPhone simulator / Android emulator - check connected devices
  • 28. Run the application - run in debug mode - install the app - run in ‘release’ mode (not supported for emulators) - run on a specific device
  • 29. Run the application - run lint analysis - run tests
  • 31. Using resources - to add an image edit flutter.yaml file - add image file to the project:
  • 33. UI ThreadGraphics Pipeline Dart VM GPU Thread Compositor Skia GPU GL commands Layer Tree Vsync GPU Throttle source: flutter.io
  • 34. 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
  • 35. 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
  • 36. 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