1.
Flutter 101
Eine kleine Einführung

2.
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)

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.
Consulting 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.
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.

10.
Ein Framework hebt ab
Sucheingaben auf Google von 2014 bis 2019

11.
Ein Framework hebt ab
Sternvergabe für Flutter auf Github
https://github.com/flutter/flutter
73.554

12.
Ein Framework hebt ab
2 Flutter Meetups pro Tag
finden durchschnittlich auf
der ganzen Welt statt.

13.
Flutter: Beispiele
Google Adwords
10.000.000 Downloads
Alibaba
50.000.000 Downloads
Hamilton Musical
500.000 Downloads
Reflectly
500.000 Downloads

14.
Flutter: Wie bekomm ich es?
https://flutter.dev/docs/get-started/install
https://flutter.de/artikel/flutter-entwicklungsumgebung-einrichten.html

15.
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

16.
Zeit zum Davonfluttern :)

17.
Dart: Basiswissen

18.
● 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.)

19.
Dart: Programmiersprache (in 2min.)

20.
Dart: Eigenheiten

21.
Dart: Packages
https://pub.dev

22.
Flutter: Basiswissen

23.
Cross-Platform Landscape

24.
Cross-Platform Framework:
1.Generation

25.
Cross-Platform Framework:
2.Generation

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

27.
Everything is a Widget
https://flutter.dev/docs/reference/widgets

28.
Layouts
https://flutter.dev/docs/reference/widgets

29.
Inputs
https://flutter.dev/docs/reference/widgets

30.
Dialogs
https://flutter.dev/docs/reference/widgets

31.
Flutter: Der Widget-Baum

32.
Flutter: Der Widget-Baum

33.
Flutter: Web/Flutter Syntax

34.
● Eine Sprache für die gesamte Logik
● Einfaches Debugging (One Debugger, Formatter)
● Easy Code Refactoring (Try refactoring HTML/CSS)
Warum keine Markup-Syntax?

35.
Flutter: Base Widgets

36.
Testen wir unser neues
Wissen!

37.
Flutter: Ausblick

38.
Flutter: Mind-Blowing
https://fuchsia.dev/fuchsia-src/glossary

39.
Web, Desktop: Erste Prototypen
https://flutter-widget-livebook.blankapp.org/basics/introduction/

40.
Web, Desktop: Erste Prototypen
https://www.nytimes.com/games/prototype/kenken

41.
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

42.
Bootcamp: Proof of concept (48h)
Java Developer JavaScript Developer
Text to Speech Pong Game

43.
Fazit

44.
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

45.
Flutter.de
https://flutter.de

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

47.
Wie geht’s weiter?
24.10.2019
Flutter: It’s all about Widgets

48.
Vielen Dank!