Intro to Flutter

Flutter is Google’s solution to build native multi-platform apps from a single codebase.
In this talk I gave at Programmers in Padua meetup I explain the main characteristics and concepts behind Flutter, compared to other cross-platform application frameworks. I also show how UIs are built using Flutter and what direction the framework is taking in relation of bringing it to the web and desktop.

Transcript

1. Introduction to Flutter Daniele Bonaldo
2. Daniele Bonaldo Android Developer @danybony_ danybony danielebonaldo.com
3. What is it Flutter? • Application framework • Cross-platform • Native • Backed by Google • Uses Dart • Plugin system • IDE/Editor support
4. Productive Open Beautiful Fast
5. Beautiful
6. Fast
7. Productive
8. Open
9. Open
10. Flutter vs React Native Dart
 Compiles to native code
 Own implementation of the platform components. Draws directly using a canvas
 Text editor plugins + IDE support
 Newer technology and not as much support
 ✦ Javascript
 ✦ Uses the Javascript bridge
 ✦ Uses the platform native components. Context switching between JS and native
 ✦ Text editor plugins
 ✦ Larger community and more support
 

11. Dart •Developed by Google •Client-side language •Android, iOS & Web •Async & Reactive •Supports Mixins •AOT & JIT Compilation •Familiar Syntax •pub (package manager)
12. Java vs Dart
13. Package manager pubspec.yaml name: pet_activity_tracker description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.0.0-dev.68.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 charts_flutter: ^0.5.0 google_sign_in: ^3.2.4 firebase_auth: ^0.6.6 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/google_logo.png
14. Flutter architecture
15. Flutter architecture
16. Widgets EVERYTHING is a widget Composition over inheritance Declaration + binding Easier testing
17. Widgets https://flutter.io/docs/development/ui/widgets
18. Stateless widgets class StaticWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Text(’Hello!’); } }
19. Stateful widgets class CounterWidget extends StatefulWidget { @override CounterState createState() { return new CounterState(); } } class CounterState extends State<CounterWidget> { int _counter = 0; @override Widget build(BuildContext context) { return new Text('Current value: $_counter.'); } void increment() { setState(() { ++_counter; }); } }
20. Widgets updates Container
 (blue) Counter
 (1)
21. Widgets updates Container
 (blue) Element 1 Element 2 Counter
 (1) Current value: 1
22. Widgets updates Container
 (black) Element 1 Element 2 Counter
 (2) Current value: 1
23. Widgets updates Container
 (black) Element 1 Element 2 Counter
 (2) Current value: 2
24. Widgets updates Container
 (black) Element 1 Element 2 Error Current value: 2
25. Widgets updates Container
 (black) Element 1 Element 3 ⚠ Error
26. Platform Channels
27. Platform Views
28. Flutter on web
29. Flutter on web
30. Flutter on web
31. Flutter on web
32. Flutter on desktop https://github.com/google/flutter-desktop-embedding
33. More info Flutter https://flutter.io Flutter codelabs https://github.com/flutter/codelabs Apps showcase https://itsallwidgets.com/
34. Daniele Bonaldo Thank You! Any questions? @danybony_ danybony danielebonaldo.com Slides at: bit.ly/flutter-pip