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!

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