Introductie Google Flutter

Transcript

1. INTRODUCTIE GOOGLE FLUTTER
2. OVER MIJ Werk Eigenaar The Next App Full stack Developer Privé Fotografie Getrouwd en vader van een zoontje van 2,5 berry@thenextapp.nl @berrygoudswaard
3. OVER THE NEXT APP Web development - PHP - Angular - NodeJS App development - Ionic - Xamarin Flutter Eindklanten - Quooker - MSD (Merck) - Het waterschapshuis - Quadrant / King - Gemeente Rotterdam - NVB
4. Projecten
5. WAT IS FLUTTER? Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.
6. WAAROM FLUTTER? - Strongly typed (Dart language) - Één codebase voor iOS en Android - AOT compilatie (geen runtime) - Consistente, mooi moderne UI (own every pixel) - Goede performance (60 FPS) - Hot Reload
7. WIE GEBRUIKT FLUTTER? - Alibaba - Reflectly - Google Ads - Abbey Road Studio
8. BRIDGE FLUTTER CODE WIDGET RENDERING PLATFORM CHANNELS FRAMEWORK CODE OEM WIDGETS SYSTEM SERVICES CANVAS EVENTS SYSTEM SERVICES CANVAS EVENTS Flutter Others
9. EVERYTHING IS A WIDGET! - Widgets zijn de bouwblokken voor de UI - Heel veel verschillende widgets - Kan UI element zijn: Text, Button, TextField - Kan layout element zijn: Padding, Center, Row, Column - Kan een scherm zijn
10. STATELESS vs STATEFUL - Immutable - Iets wat niet verandert, ná initialisatie - Heeft een state die aanpasbaar is - setState() wordt gebruikt om de state te updaten - Flutter zorgt voor efficiënte afhandeling UI update
11. STATELESS WIDGET class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Hello World!'), ); } }
12. STATEFUL WIDGET (1/2) class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }
13. STATEFUL WIDGET (2/2) class _HomePageState extends State<HomePage> { int _counter = 0; @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Text('$_counter')), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { setState(() { _counter++; }); }, ), ); } }
14. WIDGETS, WIDGETS, WIDGETS! https://flutter.dev/docs/development/ui/widgets
15. WIDGET TREE Container Row Column Column Icon Container Icon Container Column Icon Container Text Text Text
16. WIDGET RENDERING (1/5) Widget tree Element tree Render tree Rectangle yellow Circle red Element Element RectangleRender yellow Circle Render red
17. WIDGET RENDERING (2/5) Widget tree Element tree Render tree Rectangle blue Circle red Element Element RectangleRender blue Circle Render red
18. WIDGET RENDERING (3/5) Widget tree Element tree Render tree Rectangle yellow Element Element RectangleRender yellow Circle Render red triangle red
19. WIDGET RENDERING (4/5) Widget tree Element tree Render tree Rectangle yellow Element RectangleRender yellow triangle red
20. WIDGET RENDERING (5/5) Widget tree Element tree Render tree Rectangle yellow Element RectangleRender yellow triangle red triangle red Element
21. LIVE CODING
22. Container Column Row Text Text Row Container Text Column Text Image Text LIVE CODING
23. Container Column Row Text Image Text Text LIVE CODING Row Container Container Column Text Text Column Text Text
24. LIVE CODING rgb(58, 58, 90) rgb(27, 27, 49) rgb(179, 142, 255) rgb(123, 60, 255) rgb(255, 130, 203) rgb(255, 50, 170) 45 45 85 50 16 Quicksand size: 18 weight: 500 Quicksand size: 14 weight: 300 Quicksand size: 26 weight: 500 200 Quicksand size: 26 weight: 500 Quicksand size: 16 weight: 500 25
25. LIVE CODING Container Column Text ListTile ListView Container
26. LIVE CODING Container Column Container Text ListView ListTile ListTile
27. LIVE CODING 25 16 20 25 Quicksand size: 14 weight: 500 Quicksand size: 18 weight: 500 Quicksand size: 14 weight: 500
28. VRAGEN?