SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
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!

Contenu connexe

Tendances

Tendances (20)

What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?What and Why Flutter? What is a Widget in Flutter?
What and Why Flutter? What is a Widget in Flutter?
 
What is flutter and why should i care?
What is flutter and why should i care?What is flutter and why should i care?
What is flutter and why should i care?
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 
Flutter Intro
Flutter IntroFlutter Intro
Flutter Intro
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
The magic of flutter
The magic of flutterThe magic of flutter
The magic of flutter
 
Flutter for web
Flutter for web Flutter for web
Flutter for web
 
Flutter UI Framework
Flutter UI FrameworkFlutter UI Framework
Flutter UI Framework
 
Flutter Festivals GDSC ASEB | Introduction to Dart
Flutter Festivals GDSC ASEB | Introduction to DartFlutter Festivals GDSC ASEB | Introduction to Dart
Flutter Festivals GDSC ASEB | Introduction to Dart
 
Flutter
FlutterFlutter
Flutter
 
Introduction to flutter(1)
 Introduction to flutter(1) Introduction to flutter(1)
Introduction to flutter(1)
 
Flutter
Flutter Flutter
Flutter
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter Workshop
 
Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101
 
Flutter talkshow
Flutter talkshowFlutter talkshow
Flutter talkshow
 
Flutter
FlutterFlutter
Flutter
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Flutter Bootcamp
Flutter BootcampFlutter Bootcamp
Flutter Bootcamp
 
Dart presentation
Dart presentationDart presentation
Dart presentation
 
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
 

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

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 
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
Rainer Gibbert
 
Mockups prototyping
Mockups prototypingMockups prototyping
Mockups prototyping
Hausammann
 
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
ASD Online Marketing UG
 
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
Christian Baranowski
 

Similaire à 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
 
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
 
revision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH Internetagentur
revision6 GmbH Internetagentur
 

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