SlideShare ist ein Scribd-Unternehmen logo
Widgets
It’s all about widgets
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)
Über uns: Das Team
hinter coodoo
https://coodoo.de
Unser Team
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
App Entwicklung Produkte
HALBZEIT.app Alarmcloud
Workhorse
Unsere Arbeit
https://coodoo.de
Über Flutter
Was ist Flutter?
“Flutter is Google’s UI toolkit for
building beautiful, natively
compiled applications for mobile,
web, and desktop from a single
codebase.”
Cross-Platform Framework:
Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
Alles sind Widgets?
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.
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
Alles sind Widgets
Demo
Der Widget-Baum
Der Widget-Baum
Basis Widgets
App Bar Container Column Row
Text Scaffold Icon RaisedButton
https://flutter.dev/docs/development/ui/widgets
Ein Canvas Layer
Individuelles Look and Feel
Individuelles Design und Animationen
auf beiden Plattformen
gleichermaßen möglich.
Zwei Arten von Widgets
Stateful Widgets
Stateless Widgets
Stateful Widget und State
https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
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
Widget Lifecycle
Livecycle Demo
Widgets Demo
https://github.com/coodoo-io/widgets-demo
Fazit
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
Flutter.de
https://flutter.de
Join the Community
Meetup: meetup.com/de-DE/Rhein-Main-Flutter-Meetup
Website: https://flutter.de
Slack: Flutter-de
Twitter: @flutter_de
Vielen Dank!

Weitere ähnliche Inhalte

Was ist angesagt?

Flutter
FlutterFlutter
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
Apoorv Pandey
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
DSC IEM
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
Vishnu Suresh
 
Flutter tutorial for Beginner Step by Step
Flutter tutorial for Beginner Step by StepFlutter tutorial for Beginner Step by Step
Flutter tutorial for Beginner Step by Step
Chandramouli Biyyala
 
Flutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter applicationFlutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter application
Apoorv Pandey
 
Flutter & Firebase BootCamp.pdf
Flutter & Firebase BootCamp.pdfFlutter & Firebase BootCamp.pdf
Flutter & Firebase BootCamp.pdf
ShivamShrey1
 
A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
Ahmed Tarek
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
Võ Duy Tuấn
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx
20TUCS033DHAMODHARAK
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
SheilaJimenezMorejon
 
What is Flutter
What is FlutterWhat is Flutter
What is Flutter
Malan Amarasinghe
 
Flutter talkshow
Flutter talkshowFlutter talkshow
Flutter talkshow
Nhan Cao
 
Flutter
FlutterFlutter
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptx
DiffouoFopaEsdras
 
Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101
Arif Amirani
 
Flutter
Flutter Flutter
Flutter
Mohit Nainwal
 
Flutter UI Framework
Flutter UI FrameworkFlutter UI Framework
Flutter UI Framework
Yuliia Makarenko
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
Shady Selim
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with Flutter
Awok
 

Was ist angesagt? (20)

Flutter
FlutterFlutter
Flutter
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Flutter tutorial for Beginner Step by Step
Flutter tutorial for Beginner Step by StepFlutter tutorial for Beginner Step by Step
Flutter tutorial for Beginner Step by Step
 
Flutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter applicationFlutter festival - Write your first Flutter application
Flutter festival - Write your first Flutter application
 
Flutter & Firebase BootCamp.pdf
Flutter & Firebase BootCamp.pdfFlutter & Firebase BootCamp.pdf
Flutter & Firebase BootCamp.pdf
 
A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 
What is Flutter
What is FlutterWhat is Flutter
What is Flutter
 
Flutter talkshow
Flutter talkshowFlutter talkshow
Flutter talkshow
 
Flutter
FlutterFlutter
Flutter
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptx
 
Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101
 
Flutter
Flutter Flutter
Flutter
 
Flutter UI Framework
Flutter UI FrameworkFlutter UI Framework
Flutter UI Framework
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with Flutter
 

Ähnlich wie Flutter - it's all about widgets - Flutter Rhein-Main Meetup

Modern UI Design - FHDW AppNight
Modern UI Design - FHDW AppNightModern UI Design - FHDW AppNight
Modern UI Design - FHDW AppNight
Peter Nowak
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
Christian Heilmann
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsGünther Haslbeck
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
Ulrich Krause
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda Wien
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungRainer Gibbert
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototypingHausammann
 
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCILFUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
Jens Linnow
 
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCILFUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
Marc Wagner
 
2012_10 SNoUG Building Social Software
2012_10 SNoUG Building Social Software2012_10 SNoUG Building Social Software
2012_10 SNoUG Building Social Software
Roman Weber
 
Agentursoftware QuoJob ist das System für Kreativ-Agenturen
Agentursoftware QuoJob ist das System für Kreativ-AgenturenAgentursoftware QuoJob ist das System für Kreativ-Agenturen
Agentursoftware QuoJob ist das System für Kreativ-AgenturenASD Online Marketing UG
 
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
DNUG e.V.
 
Neue Tools für SAP Fiori
Neue Tools für SAP FioriNeue Tools für SAP Fiori
Neue Tools für SAP Fiori
IBsolution GmbH
 
Scrum live erleben // ADC Frankenthal
Scrum live erleben // ADC FrankenthalScrum live erleben // ADC Frankenthal
Scrum live erleben // ADC Frankenthal
Holger Wendel
 
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
Joachim Tillessen
 
Scrum live erleben // ADC Wien
Scrum live erleben // ADC WienScrum live erleben // ADC Wien
Scrum live erleben // ADC Wien
Holger Wendel
 
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
Marc Wagner
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
Rainer Stropek
 
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010Christian Baranowski
 
UX Army of One
UX Army of OneUX Army of One
UX Army of One
Thomas Gläser
 

Ähnlich wie Flutter - it's all about widgets - Flutter Rhein-Main Meetup (20)

Modern UI Design - FHDW AppNight
Modern UI Design - FHDW AppNightModern UI Design - FHDW AppNight
Modern UI Design - FHDW AppNight
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 
Fonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor BenutzeroberflächeFonda: Erfolgsfaktor Benutzeroberfläche
Fonda: Erfolgsfaktor Benutzeroberfläche
 
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten ProduktentwicklungAgile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
Agile UX - Wege zur agilen nutzerzentrierten Produktentwicklung
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
 
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCILFUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
 
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCILFUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
FUTURE-WORK TEASER - DETECON & ORANGE COUNCIL
 
2012_10 SNoUG Building Social Software
2012_10 SNoUG Building Social Software2012_10 SNoUG Building Social Software
2012_10 SNoUG Building Social Software
 
Agentursoftware QuoJob ist das System für Kreativ-Agenturen
Agentursoftware QuoJob ist das System für Kreativ-AgenturenAgentursoftware QuoJob ist das System für Kreativ-Agenturen
Agentursoftware QuoJob ist das System für Kreativ-Agenturen
 
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
DNUG Online Domino - OnTime | OnTime Gruppenkalender für Domino | 07.05.2024
 
Neue Tools für SAP Fiori
Neue Tools für SAP FioriNeue Tools für SAP Fiori
Neue Tools für SAP Fiori
 
Scrum live erleben // ADC Frankenthal
Scrum live erleben // ADC FrankenthalScrum live erleben // ADC Frankenthal
Scrum live erleben // ADC Frankenthal
 
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
5 Köche und ein Brei: Optimale Prototyping-Toolchain(s)
 
Scrum live erleben // ADC Wien
Scrum live erleben // ADC WienScrum live erleben // ADC Wien
Scrum live erleben // ADC Wien
 
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
FUTURE-WORK@DETECON - die Zukunft der ARBEIT inkl. Praxisbeispiele / Referenz...
 
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
BASTA Spring 2018: User Interface, quo vadis? Überlebensstrategien eines Soft...
 
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010
Agiles Lernen und Software Entwicklung das OSGi Code Camp 2010
 
UX Army of One
UX Army of OneUX Army of One
UX Army of One
 

Flutter - it's all about widgets - Flutter Rhein-Main Meetup