SlideShare una empresa de Scribd logo
1 de 49
Descargar para leer sin conexión
Flutter 101
Eine kleine Einführung
Agenda
● Was ist dieses Flutter und warum sollte ich es lernen? (10 min)
● Was kann ich mit diesem Flutter cooles machen? (45 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
Consulting 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.”
Flutter hilft das eigene Branding
und Design in einer mobilen
App zu verwirklichen ohne
Abstriche machen zu müssen.
Für wen eignet sich Flutter?
Design Prototyp Entwicklung
Prototypen lassen sich in
Rekordzeit erstellen. Man
erhält in extrem kurzer Zeit
eine klickbare App.
Entwickler profitieren von
einer sehr guten IDE
Unterstützung, großer Auswahl
von Widgets und weiteren
Features wie z.B. Hot Reload.
Dem eigenen Branding
steht nichts im Weg.
Die Hürde zum Einstieg in
die Entwicklung sinkt.
Entwicklung von Features
steht im Vordergrund.
Ein Framework hebt ab
Sucheingaben auf Google von 2014 bis 2019
Ein Framework hebt ab
Sternvergabe für Flutter auf Github
https://github.com/flutter/flutter
73.554
Ein Framework hebt ab
2 Flutter Meetups pro Tag
finden durchschnittlich auf
der ganzen Welt statt.
Flutter: Beispiele
Google Adwords
10.000.000 Downloads
Alibaba
50.000.000 Downloads
Hamilton Musical
500.000 Downloads
Reflectly
500.000 Downloads
Flutter: Wie bekomm ich es?
https://flutter.dev/docs/get-started/install
https://flutter.de/artikel/flutter-entwicklungsumgebung-einrichten.html
Flutter: Kurzes Cheatsheet!
flutter create app Erstellt eine neue Flutter-App
--template = app, plugin, package
--sample = id of scaffold
--list-samples = json output filename
flutter doctor Prüft ob dein Setup korrekt ist
flutter install Installiert die App und alle Abhängigkeiten der pubspec
flutter devices Show a list of connected devices
flutter run Startet eine Debug Version der App
--release = Startet eine Release Version der App
-d = Id des gewünschten Device
flutter upgrade Automatisches Updaten der Flutter Installation
flutter build Baut ein Release für Android & iOS
flutter channel Welche Flutter Version gerade genutzt wird
Zeit zum Davonfluttern :)
Dart: Basiswissen
● Open-Source Web Programmiersprache von Google
● 2011 veröffentlicht, 2014 standardisiert (ECMA 408), aktuell 2.4.0
● Kompiliert in ARM and x86 Code, Dart VM & Javascript Cross-Compiler für
Webapps
● Features
○ Strongly Typed (Type Checking)
○ Klassen, Abstrakte Klassen, Interfaces, Mixins
○ Functions
○ Getter & Setter
○ Lambda’s
○ Async/Future
○ Generics
Dart: Programmiersprache (in 2min.)
Dart: Programmiersprache (in 2min.)
Dart: Eigenheiten
Dart: Packages
https://pub.dev
Flutter: Basiswissen
Cross-Platform Landscape
Cross-Platform Framework:
1.Generation
Cross-Platform Framework:
2.Generation
Cross-Platform Framework:
Flutter
https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
Everything is a Widget
https://flutter.dev/docs/reference/widgets
Layouts
https://flutter.dev/docs/reference/widgets
Inputs
https://flutter.dev/docs/reference/widgets
Dialogs
https://flutter.dev/docs/reference/widgets
Flutter: Der Widget-Baum
Flutter: Der Widget-Baum
Flutter: Web/Flutter Syntax
● Eine Sprache für die gesamte Logik
● Einfaches Debugging (One Debugger, Formatter)
● Easy Code Refactoring (Try refactoring HTML/CSS)
Warum keine Markup-Syntax?
Flutter: Base Widgets
Testen wir unser neues
Wissen!
Flutter: Ausblick
Flutter: Mind-Blowing
https://fuchsia.dev/fuchsia-src/glossary
Web, Desktop: Erste Prototypen
https://flutter-widget-livebook.blankapp.org/basics/introduction/
Web, Desktop: Erste Prototypen
https://www.nytimes.com/games/prototype/kenken
Flutter: Lernkurve
React-Native, NativeScript, PhoneGap... Flutter
3. Party Plugins + Framework Updates
Basiswissen Java, C#, C++ vorhanden
Time Time
Komplexität
Komplexität
Basiswissen Skriptsprache JS, Python, PHP vorhanden
Bootcamp: Proof of concept (48h)
Java Developer JavaScript Developer
Text to Speech Pong Game
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
Wie geht’s weiter?
24.10.2019
Flutter: It’s all about Widgets
Vielen Dank!

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
 
Flutter
FlutterFlutter
Flutter
 
Flutter for web
Flutter for web Flutter for web
Flutter for web
 
What is Flutter
What is FlutterWhat is Flutter
What is 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
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDK
 
Flutter
FlutterFlutter
Flutter
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx
 
Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101Pune Flutter Presents - Flutter 101
Pune Flutter Presents - Flutter 101
 
Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)Developing Cross platform apps in flutter (Android, iOS, Web)
Developing Cross platform apps in flutter (Android, iOS, Web)
 
A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
 
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Flutter - it's all about widgets - Flutter Rhein-Main Meetup Flutter - it's all about widgets - Flutter Rhein-Main Meetup
Flutter - it's all about widgets - Flutter Rhein-Main Meetup
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
 
Flutter
FlutterFlutter
Flutter
 
Introduction to flutter
Introduction to flutter Introduction to flutter
Introduction to flutter
 
DSC IIITL Flutter Workshop
DSC IIITL Flutter WorkshopDSC IIITL Flutter Workshop
DSC IIITL Flutter Workshop
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 

Similar a Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 
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
 

Similar a Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup (20)

Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
Intel XDK: Cross-Plattform Entwicklung – Apps Entwickeln für alle Plattformen...
 
Cross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache CordovaCross Plattform Apps mit Visual Studio und Apache Cordova
Cross Plattform Apps mit Visual Studio und Apache Cordova
 
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...
 
WTC 2019 – Flutter
WTC 2019 – FlutterWTC 2019 – Flutter
WTC 2019 – Flutter
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET CoreHands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
Hands-on Workshop: API-Dokumentation mit OpenAPI / Swagger in ASP.NET Core
 
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
 
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
.NET Core, .NET Standard & ASP.NET Core - Eine Übersicht
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
 
Django trifft Flutter
Django trifft FlutterDjango trifft Flutter
Django trifft Flutter
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
B3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite ApplicationsB3 Lotus Expeditor Und Composite Applications
B3 Lotus Expeditor Und Composite Applications
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
 
Mobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache CordovaMobile Anwendungen mit Apache Cordova
Mobile Anwendungen mit Apache Cordova
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 
20091203 Peters Munich Talk1
20091203 Peters Munich Talk120091203 Peters Munich Talk1
20091203 Peters Munich Talk1
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 
Open Source und Free Software unter Windows
Open Source und Free Software unter WindowsOpen Source und Free Software unter Windows
Open Source und Free Software unter Windows
 
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
 

Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup