Slide 1
Slide 1 text
Flutter 1.0
Go or No-Go
Slide 2
Slide 2 text
Flutter 1.0 1.2
Go or No-Go
Slide 3
Slide 3 text
- Chris Sells, at MWC ‘19
“Flutter is Google’s new UI toolkit,
helping developers quickly build high-
quality, high-performance native apps
across multiple platforms.”
Slide 4
Slide 4 text
Full native
Slide 5
Slide 5 text
Web views
Slide 6
Slide 6 text
React native
Slide 7
Slide 7 text
Flutter
Slide 8
Slide 8 text
Flutter architectural overview
Slide 9
Slide 9 text
Plugins
‘cause a lazy dev is a good dev
Slide 10
Slide 10 text
Plugins
‘cause a lazy dev is a good dev
- Firebase
- Location
- Maps
- Camera
- File picker
- Shared preferences
- more widgets
- … ( 1400+ more )
Slide 11
Slide 11 text
Examples
Slide 12
Slide 12 text
1. Quickly
- Your choice of IDE (IntelliJ, VS Code, xCode, VIM)
- Lot of small, simple and composable widgets
- Bunch of plugins availables
- Dart VM for JIT compiling
- Stateful hot reload
+ Single code base
+ Same UI no matter the OS and the version
+ Free and easy to configure CI/CD (yes, you read that right: FREE)
Slide 13
Slide 13 text
2. High quality
- Material design
- Animations at 60 FPS
- Lots of different easing
- Easy to do custom UI
Slide 14
Slide 14 text
3. High performance
- DART
- Generational garbage collection
- Free tree shaking
- AOT Compiler
- C++ 2D rendering engine SKIA
Slide 15
Slide 15 text
The good
Slide 16
Slide 16 text
Hot-reload demo
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Async is easy
- Dart is a reactive language
- known library available e.g. RxDart
- async / await
Future printDailyNews() async {
var newsDigest = await getReports();
print(newsDigest);
}
Future getReports() =>
Future.delayed(oneSec, () => news);
Slide 19
Slide 19 text
- Native Android
- Shared Element Transition
- Min SDK 21
- Janky on most device
- Activity vs Fragments
XML:
android:transitionName="profile"
Java:
ActivityOptionsCompat
.makeSceneTransitionAnimation(this, ivProfile, "profile");
Hero animation are easy
Slide 20
Slide 20 text
- Flutter
- Hero widget
- Min SDK 16
- 60 FPS
Hero(
tag: "DemoTag",
child: Icon(
Icons.add,
size: 70.0,
),
),
Hero animation are easy
Slide 21
Slide 21 text
Code is small
I implemented a limited version of
Transit’s home screen
- Using an HTTP API
- Location plugin
- Google Maps
- Simple model
Slide 22
Slide 22 text
Code is small
I implemented a limited version of
Transit’s home screen
- Using an HTTP API
- Location plugin
- Google Maps
- Simple model
660 LoC !!
Slide 23
Slide 23 text
The less good
Slide 24
Slide 24 text
Composition can be messy
Slide 25
Slide 25 text
Architecture
● Lifting State Up (Vanilla)
Slide 26
Slide 26 text
Architectures
● Lifting State Up (Vanilla)
● InheritedWidget
Slide 27
Slide 27 text
Architecturess
● Lifting State Up (Vanilla)
● InheritedWidget
● BLoC
Slide 28
Slide 28 text
Architecturesss
● Lifting State Up (Vanilla)
● InheritedWidget
● BLoC
● Redux
● scoped_model
● Redux and Firestore
● MVU
● ReduRx
● MVI
● MVC Example
● Frideos library
Slide 29
Slide 29 text
Architectures
● Lifting State Up (Vanilla)
● InheritedWidget
● BLoC
● Redux
● scoped_model
● Redux and Firestore
● MVU
● ReduRx
● MVI
● MVC Example
● Frideos library
Slide 30
Slide 30 text
Architectures
● Lifting State Up (Vanilla)
● InheritedWidget
● BLoC
● Redux
● scoped_model
● Redux and Firestore
● MVU
● ReduRx
● MVI
● MVC Example
● Frideos library
class MoviesBloc {
final _repository = Repository();
final _fetcher = PublishSubject();
Observable get allMovies => _fetcher.stream;
getAllMovies() async {
ItemModel itemModel = await _repository.getAllMovies();
_fetcher.sink.add(itemModel);
}
dispose() {
_fetcher.close();
}
}
Slide 31
Slide 31 text
Should we use it?
Slide 32
Slide 32 text
Should we use it?
don’t rewrite everything, but YES
Slide 33
Slide 33 text
Should we use it?
don’t rewrite everything, but YES
- Added to an existing project
- Target a new platform
coming to
- Web, Windows, Mac OS, Linux
Slide 34
Slide 34 text
- https://itsallwidgets.com
- https://medium.com/flutterpub
- https://codelabs.developers.google.com/
- YouTube channel: Flutter
- https://flutter.dev/get-started
An awesome community
Slide 35
Slide 35 text
No content