In Flutter sind alles Widgets. Hier wird gezeigt, welche Basics man dazu wissen sollte.

1. Widgets
It’s all about widgets

2. Agenda
● Alles sind Widgets? (30 min)
● Wie sieht das praktisch aus? (25 min)
● Was mache ich jetzt mit diesem Wissen? (5 min)
● Austausch, Pizza und Getränke (bis 21 Uhr)

3. Über uns: Das Team
hinter coodoo

4. https://coodoo.de
Unser Team

5. https://coodoo.de
Unsere Speaker
Markus ist Gründer von coodoo
und verantwortlich für agiles
Projektmanagement und Scrum
orientierte Softwareentwicklung.
markus.kuehle@coodoo.de
Markus Kühle, GF
Jan ist ebenfalls Gründer und Experte
für kundenorientiertes UI/UX,
insbesondere unter Verwendung von
Flutter und Angular.
jan.marsh@coodoo.de
Jan Marsh, GF

6. App Entwicklung Produkte
HALBZEIT.app Alarmcloud
Workhorse
Unsere Arbeit
https://coodoo.de

7. Über Flutter

8. Was ist Flutter?
“Flutter is Google’s UI toolkit for
building beautiful, natively
compiled applications for mobile,
web, and desktop from a single
codebase.”

9. Cross-Platform Framework:
Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514

10. Alles sind Widgets?

11. Was ist ein Widget?
“A widget is an immutable object that
describes a specific part of a UI.“
Ein Widget ist ein unveränderbares Objekt, welches einen definierte Teil der UI beschreibt.

12. Alles sind Widgets
Ein Widget kann sein:
● ein strukturelles Element (z.B. Button oder Menü)
● ein stylisches Element (z.B. Schrift oder Farbschema)
● ein Layout-Aspekt (z.B. Abstände oder Ausrichtung)
https://flutter.dev/docs/resources/technical-overview#everythings-a-widget

13. Alles sind Widgets
Demo

14. Der Widget-Baum

15. Der Widget-Baum

16. Basis Widgets
App Bar Container Column Row
Text Scaffold Icon RaisedButton
https://flutter.dev/docs/development/ui/widgets

17. Ein Canvas Layer

18. Individuelles Look and Feel
Individuelles Design und Animationen
auf beiden Plattformen
gleichermaßen möglich.

19. Zwei Arten von Widgets
Stateful Widgets
Stateless Widgets

20. Stateful Widget und State
https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro

21. Widget Lifecycle
Stateless
- build() Methode wird nur
einmal ausgeführt
- Nach dem Rendern nicht
veränderbar
Stateful
- State kann sich verändern
- setState() triggert build()
Methode
- didUpdateConfig() triggert
build() Methode.
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

22. Widget Lifecycle

23. Livecycle Demo

25. Widgets Demo
https://github.com/coodoo-io/widgets-demo

26. Fazit

27. Warum sollte ich es lernen?
● Gleicher Quellcode, mehrere Plattformen
● Riesen UI-Bibliothek (Widgets)
● Stateful Hot Reload macht die Entwicklung extrem schnell
● Open Source erleichtert den Einstieg
● Wachsende Community

28. Flutter.de
https://flutter.de

29. Join the Community
Meetup: meetup.com/de-DE/Rhein-Main-Flutter-Meetup
Website: https://flutter.de
Slack: Flutter-de
Twitter: @flutter_de

30. Vielen Dank!