Getting Started With Flutter

This presentation is an introduction to Flutter. There's a technical and a non-technical part, which talks about the characteristics of Flutter, and what can be useful to know before starting to use it.

Transcript

1. Flutter Getting started
2. Who am I? Yannick Van Godtsenhoven Android Team Lead / Developer @ PlayPass We provide solutions for events and venues all around the world ◦ Cashless Payments ◦ Access Control ◦ Accreditation Management ◦ Brand Activation Rock Werchter, Graspop, Dour, Lollapalooza, Standon Calling, RSCA, 40-45 Musical ...
3. What am I going to talk about? WHAT HOW WIDGETS WIDGETS WIDGETS WHY FUTURE
4. What
5. What is Flutter? “Mobile app SDK for crafting high-quality native experiences on iOS and Android” “A powerful general purpose open UI toolkit for building stunning experiences on any device: embedded, mobile, desktop and beyond” Completely open source by Google 2015 2019 2017 2018 “Sky” Beta Alpha 1.0 1.2
6. 4 Characteristics Beautiful Productive Fast Open
7. Beautiful Material Design Widgets Cupertino Widgets Very clear animation framework Easy to build a custom UI
8. Beautiful History of Everything
9. Fast Skia Engine Hardware acceleration Compiled, not interpreted
10. Productive Stateful hot reload Multiple IDE Develop on one OS, just test on the other * Dart DevTools * most of the time
11. Open Completely open source Free Community Very nice documentation Lots of plugins https://github.com/flutter/flutter https://flutter.dev https://pub.dartlang.org Gitter, Slack, Medium, ...
12. Cross Platform Write once, run everywhere ( ) Doesn’t use native components, has its own components that look native Talks to the system for things like storage, permissions, location, ... Embed native views in Flutter Embed Flutter in native views
13. Technically Written in Dart Full screen app AOT compilation Skia Engine compiled into the app Platform Channels JIT compilation
14. VS Xamarin React Native Flutter Performance Productivity Price expensive free free Custom UI Native Understanding needed needed not needed Platform Updates needed but fast needed not needed Min Android ? 4.1 (16) 4.1 (16) Min iOS ? 9 8 Maturity Stable Widely Used Young
15. How
16. Setup Download SDK from flutter.dev and add the `flutter` tool to your path Run `flutter doctor` to see what’s missing
17. IDE Flutter plugins available for both AS plugin has more functionality (Outline View, Inspector, …) Android Studio Visual Studio Code
18. Widgets, widgets, widgets THE main building block for Flutter applications Every widget has a specific purpose An application is a composition of widgets
19. Different kinds of widgets Style Input Material Cupertino ... Async Layout
20. Style Input Material Cupertino ... Async Layout Layout Container Padding Center Align SizedBox Row Column ListView
21. Style Input Material Cupertino ... Async Layout Material Scaffold AppBar BottomNavigationBar Drawer FloatingActionButton SimpleDialog SnackBar Card
22. Style Input Material Cupertino ... Async Layout Cupertino Scaffold ActionSheet AlertDialog Switch NavigationBar
23. What are widgets really? They are configuration for Elements, pieces of an app’s UI Element = instantiated Widget that is displayed on screen Everything on screen is in a tree of Elements Widget Tree Element Tree RootWidget RootElement ChildWidget ChildElement ChildWidget ChildElement
24. Stateless Widget Doesn’t have any property that has a value that changes over time class StatelessWidgetExample extends StatelessWidget { final String value; const StatelessWidgetExample({Key key, this.value}) : super(key: key); @override Widget build(BuildContext context) { return Text(value); } }
25. Stateful Widget When you want your widget to change when some data changes over time class StatefulWidgetExample extends StatefulWidget { final String immutableValue; StatefulWidgetExample({this.immutableValue}); @override _StatefulWidgetExampleState createState() => _StatefulWidgetExampleState(); } class _StatefulWidgetExampleState extends State<StatefulWidgetExample> { int mutableValue; @override Widget build(BuildContext context) { return Text('${widget.immutableValue}: $mutableValue'); } } return GestureDetector( onTap: () { setState(() { mutableValue++; }); }, child: Text('${widget.immutableValue}: $mutableValue'));
26. State (0) State (1) Text (0) Text (1) Stateful Widget Widget Tree Element Tree Stateful Widget Stateful Element Stateless Element
27. Demo Time
28. Build efficient UIs Use stateless widgets as much as possible Dont pass values around in the widget hierarchy InheritedWidget Inherited Widget Child Widget Child Widget Chil d Widget Child Widget MyInteritedWidget.of(context).whateverValue
29. Bloc Pattern Architectural Pattern pushed by Google… for now Business Logic Component Very much like MVVM Bloc = ViewModel Reactive
30. class IncrementBloc implements BlocBase { int _counter; StreamController<int> _counterController = StreamController<int>(); StreamSink<int> get _inAdd => _counterController.sink; Stream<int> get outCounter => _counterController.stream; IncrementBloc(){ _counter = 0; } void increaseCount(){ _counter = _counter + 1; _inAdd.add(_counter); } void dispose(){ _actionController.close(); _counterController.close(); } }
31. BlocProvider<IncrementBloc>( bloc: IncrementBloc(), child: CounterPage(), ) IncrementBloc bloc = BlocProvider.of<IncrementBloc>(context);
32. @override Widget build(BuildContext context) { final IncrementBloc bloc = BlocProvider.of<IncrementBloc>(context); ... StreamBuilder<int>( stream: bloc.outCounter, initialData: 0, builder: (BuildContext context, AsyncSnapshot<int> snapshot){ return Text('We counted ${snapshot.data} times'); } ), ... FloatingActionButton( child: const Icon(Icons.add), onPressed: (){ bloc.increaseCount(); }, ), ... }
33. Bloc Pattern Advantages Separation of concerns Testability Less Stateful widgets, rebuild on changes Multiple Blocs for even more separation
34. Tools SUPERNOVA Sketch to Flutter
35. Why
36. Why? FUN FAST MULTIPLATFORM
37. Future
38. Future
39. Thank you! Questions?
40. Extra
41. Keys Demo Time!!
42. Stateless Tile Widget Stateless Tile Widget Stateless Tile Widget Stateless Tile Widget Swap Row Widget Row Element Stateless Tile Element Stateless Tile Element Stateless
43. Stateful Tile Widget Stateful Tile Widget Stateful Tile Widget Stateful Tile Widget Swap Row Widget Row Element Stateful Tile Element Stateful Tile Element State red State green Stateful
44. Stateful Tile Widget Key 2 Stateful Tile Widget Key 1 Stateful Tile Widget Key 1 Stateful Tile Widget Key 2 Swap Row Widget Row Element Stateful Tile Element Key 2 Stateful Tile Element Key 1 State red State green Stateful with keys
45. Stateful Tile Widget Key 1 Stateful Tile Widget Key 2 Stateful Tile Widget Key 2 Stateful Tile Widget Key 1 Swap Row Widget Row Element Stateful Tile Element Key 1 State red Stateful Tile Element Key 2 State green Stateful with keys
46. Stateful Tile Widget Key 1 Stateful Tile Widget Key 2 Stateful Tile Widget Key 2 Stateful Tile Widget Key 1 Swap Row Widget Row Element Stateful Tile Element Key 1 State red§ Stateful Tile Element Key 2 State green Stateful with keys