2. Webconia Technology Conference
Jan Reichhardt
1. Was ist Flutter ?
2. Warum Flutter ?
3. Hot Reload/Hot Restart
4. Flutter Architektur
5. Flutter Setup
6. Was ist Dart ?
7. Flutter Layout
8. Beispiel Flutter App
Inhalt
22.10.2019 1
3. Webconia Technology Conference
Jan Reichhardt
22.10.2019 2
• App SDK
• Cross-Plattform-Entwicklung
• Entwickeln high-performance, hochauflösende Apps
• Single Codebase
Was ist Flutter ?
4. Webconia Technology Conference
Jan Reichhardt
22.10.2019 3
• Single Codebase
• Entwickle mehr mit weniger Code
• Hot Reload
• Moderne, ausdrucksstarke Sprache, deklarativen Ansatz
Sei Effizent
• Material Design und Cupertino Widget Bibliotheken
• Große Auswahl von Widgets
Realisiere
wunderschöne,
hochindividuelle user
experiences
Warum Flutter ?
5. Webconia Technology Conference
Jan Reichhardt
22.10.2019 4
• Experimentiere schnell und einfach
• Entwickle UIs, neue features, behebe Bugs
• Frührer Stand wird kombiniert mit dem neuen
Code
Was ist Hot Reload ?
6. Webconia Technology Conference
Jan Reichhardt
Funktionsweise Hot Reload
22.10.2019 5
Injiziert die updated source
code files in die VM
Framework baut automatisch
den Widget Tree neu
Zeigt dir schnell den Effekt
deiner Änderungen
7. Webconia Technology Conference
Jan Reichhardt
Flutter Architektur
Engine
portable Laufzeitumgebung
zum Hosten von Flutter
Anwendungen in einer
plattformabhängigen Shell
Aufbau:
Skia 2D Rendering Engine
Dart Runtime
8. Webconia Technology Conference
Jan Reichhardt
22.10.2019 7
stellt alles bereit, was für
die Entwicklung von User
Interfaces benötigt wird
Components Widgets Animationen Framework Foundations
Flutter Architektur
9. Webconia Technology Conference
Jan Reichhardt
22.10.2019 8
• Download der Flutter SDK
• Zu dem Projekt Ordner gehen und Zip file Extrahieren
• Flutter zur PATH Variable hinzufügen
• Shell neustarten
Flutter Setup
nano$HOME/.bash_profile
ExportPATH=„/Users/jr/Documents/projects/flutter/flutter/bin:$PATH“
cd ~/development
Unzip~/Downloads/flutter_macos_vX.X.X-stable.zip
11. Webconia Technology Conference
Jan Reichhardt
22.10.2019 10
• Android Studio installieren
Emulator
• Android Studio -> Tools -> AVD Manager -> Create Virtual Device
• Wähle ein System Image
Flutter Android Setup
12. Webconia Technology Conference
Jan Reichhardt
22.10.2019 11
Flutter Setup Web
flutterrun–d chrome
flutterconfig–enable-web
flutterdevices
fluttercreate.
13. Webconia Technology Conference
Jan Reichhardt
22.10.2019 12
Open-Source Web
Programmiersprache
von Google
2011 veröffentlicht,
2014 standardisiert
(ECMA 408) aktuell 2.5
Dart Runtime
Angelehnt an Java und
C#
Lässt sich in JavaScript
Übersetzen
Programmieranfänger
freundlich
Dart
14. Webconia Technology Conference
Jan Reichhardt
22.10.2019 13
Alles ist ein Objekt
1
Jedes Objekt ist eine
Instanz von einer
Klasse
2
Kein Support für die
keywords public,
protected, private
3
Dart
15. Webconia Technology Conference
Jan Reichhardt
22.10.2019 14
Variablen
• Deklaration mit var, dynamic oder ein Datentyp
Dart
dynamic name = 'Bob';
final String nickname = 'Bobby';
17. Webconia Technology Conference
Jan Reichhardt
22.10.2019 16
Strings
• Interpolation
Dart
var s = 'string interpolation';
assert('Dart has $s, which is very handy.' ==
'Dart has string interpolation, ' +
'which is very handy.');
assert('That deserves all caps. ' +
'${s.toUpperCase()} is very handy!' ==
'That deserves all caps. ' +
'STRING INTERPOLATION is very handy!');
functions
String say(String from, String msg, [String dev
ice]) {
var result = '$from says $msg';
if (device != null) {
result = '$result with a $device';
}
return result;
}
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;
18. Webconia Technology Conference
Jan Reichhardt
22.10.2019 17
Constructor
Dart
class Point {
num x, y;
Point(num x, num y) {
this.x = x;
this.y = y;
}
}
class Point {
num x, y;
Point(this.x, this.y);
Point.origin() {
x = 0;
y = 0;
}
}
Named Constructor
19. Webconia Technology Conference
Jan Reichhardt
22.10.2019 18
Flutter Design I
• Alles ist ein Widget
• Widgets sind in Flutter unveränderliche Beschreibungen von Elementen
• alle Grafiken, einschließlich Texte, Formen und Animationen
Flutter Design II
• Material Design-Widgets
• Cupertino-Widgets
Flutter Layout
24. Webconia Technology Conference
Jan Reichhardt
22.10.2019 23
• Am ende beispiel app zeigen (erklären stateful widget sowie zeigen wie funtkioniert auf ios sowie auf
android und web zeigen wie es aussieht) sowie zeigen wie man die app builded sowie ordner struktur
erklären
• IOS: flutter build ios und dort die steps ausführen
• Android: APK: flutter build apk --split-per-abi
App Bundle: flutter build appbundle (vielleicht steps ausführen)
Hinweis der Redaktion
3. für iOS, Android, und web (tech preview).
Ziel: Google möchte mit dem neuen Framework eine durchaus vorhandene Barriere für Entwickler durchbrechen: wer für Android und iOS effizient und schnell entwickeln möchte, muss mindestens zwei Programmiersprachen beherrschen
1. Bietet dir die Möglichkeit schnell und einfach mit deinem Code herum zu experiementieren.
2. Füge neue Features hinzu … und das alles nur in Milisekunden.
3. Hot Reload bewahrt den Stand deiner App. So kannst du deine Aktuellen Änderungen sehen ohne den Stand zu verlieren (siehe gif oben das ist das beispiel). Weiteres Beispiel: Du hast einen User Login, du möchtest das testen und Loggst dich ein ein und wirst dann weiter geleitet zu deinen Konto Einstellungen und möchtest dort das Profil Icon ändern, durch Hot Reload kannst du das so oft ändern wie du möchtest ohne Dich nochmal einloggen zu müssen.
3. Aber wenn der neue Code den Stand der App ändert z.b. Den Stand eines Widgets von Stateful zu Stateless muss man einen Hot restart durchführen (auch nur 1s)
Injiziert die updated source code files in die laufende Dart Virtual Machine (also VM in der die App läuft)
Nach dem die VM die Klassen geupdated hat mit deinem neuen Code baut das Flutter Framework automatisch den Widget Tree neu
Wodurch dir die Möglichkeit gegeben wird schnell den Effekt deiner Änderungen zu sehen.
1. Die Flutter Engine ist eine … z.b Android, IOS oder jetzt auch Chromium
Aufbau:
1. die von Google entwicklet wird z.b. auch Anwendung in Chrome und Firefox findet
2. die unteranderem Hot Reload bereitstellt.
Das Framework …
… für die UI Komponenten
3. Zu aller erst in die .bash_profile Datei hinein gehen und dann diesen Code snippet dort einfügen mit deinem Pfad zu deinem Projekt ordner. Danach einem die Shell neustarten
4. Und mit dem Befehl which flutter in der Konsole überprüfen ob du auf flutter zugreifen kannst
Zusatz:
Jetzt noch bash_profile ab catalina zsh_profile den momentan wird noch die Bash Konsole benutzt ab Catalina dann aber die Z Konsole.
um für IOS Entwickeln zu können benötigt man …
Wenn man cocoapods installiert hat und flutter doctor trotzdem sagt das es nicht installiert wurde ist es ein aktueller Issue mit der version 1.8. Dann einfach eine niedrigere version Installieren.
Um für Android zu entwickeln benötigt man …
Android Studio installieren, um die benötigte Android SDK sowie die Platform Tools und die Android ADK Build Tools zu installieren.
Wie schon erwähnt befindet sich die Entwicklung für das Web noch in der tech-preview also könnte es noch zu problemen führen.
1. Command auführen um den Web zugriff zu aktivieren
2. Flutter devices ausführen um zu überprüfen ob der command erfolgreich ausgeführt wurde es müsste dort dann im terminal chrome auftauchen
3. Flutter create . Ausführen um web support also die benötigteb Dateien zum Projekt hinzu zufügen
4. Zum Testen den command ausführen.
Hier werden Fakten aufgelistet
1.5 Somit laufen Dart Anwendungen ohne zusätzliche Installation in allen modernen browsern.
Hier wird das Konzept gezeigt:
1. Alles was du in eine Variable Packen kannst ist ein Objekt
3. Anders als in Java und anderen Objektorientierten Programmiersprachen hat Dart die Keywords public, protected und private nicht, aber man kann trotzdem ein Objekt auf private setzen indem man ein unterstrich vor dem Namen hinzufügt.
Als nächstes würde ich die unterschiede von dart zu anderen sprachen zeigen. If/else, switch case, for/for in schleife sowie while schleifen sind komplett identisch
Wie z.b ein String, Integer, Double usw.
Final: oder die Variable kann auch mit Final deklariert werden wodurch die Variable nur einmal gesetzt werden kann.
Numbers: wie Integer, Double
Lists: kennt man aus anderen Sprachen als Arrays auch mit der gleichen Syntax
Sets: ist einfach nur eine ungeordnete Sammlung von einzigartigen Elementen
Sets und Maps rechts an der Seite anzeigen
Du kannst den Wert einer expression in einem String mit ${expression} einfügen und wenn es sich um eine Variable handelt $variable
Ein Parameter in [] ist optional, => expr steht für {return expr; }
Ein Constructor wird erstellt indem eine funktion mit dem gleichen Namen wie die Klasse erstellt wird . Die meiste vorkommende Form eines constructors ist der generative constructor der eine neue Instanz der Klasse erzeugt.
Man kann einem constructor auch noch einen Namen geben.
Egal welches Element ob eine Produkt Liste oder nur die Page Überschrift oder ein Navigations Item alles ist ein Widget.
Das User Interface Design funktioniert bei Flutter primär über das Erstellen oder Zusammenbauen von Widgets. Widgets sind in Flutter unveränderliche Beschreibungen von Elementen in der Benutzeroberfläche. Hierzu gehören alle Grafiken, einschließlich Texte, Formen und Animationen.
Flutter Design II: Zusätzlich erhält das Flutter Framework zwei Widget Bibliotheken aus denen man seine App Baut nämlich die Material Design-Widgets die Googles gleichnamige Design Sprache implementieren sowie die Cupertino Widgets die das IOS Design von Apple imitieren. Dies macht die App Entwicklung noch einfacher und so können ganz einfach gut aussehende User Interfaces erstellt werden.
3. Nämlich zu Stateful
Stateful: zum Beispiel es kann seine Erscheinung ändern durch ein User Input oder wenn es Daten bekommt. Der Zustand besteht aus Werten die sich ändern können. Z.b. der aktuelle Slider Slide oder eine checkbox die checked ist. Wenn der Widget Zustand sich ändert ruft das Status Objekt die funktion setState() auf, wodurch dem Framework gesagt wird das er das Widget neu builden soll.
Hier sieht man eine Flutter app die Hello World auf dem Screen ausgibt.
2 Widgets Center und Text und die runApp funtkion nimmt das Center Widget und macht es zum Root im Widget Tree.
Center und Text sind Basic Widgets deswegen müssen sie nicht von Stateful oder Stateless abgeleitet werden. Genau so wie z.b Container, Row, Column um das Layout der App zubauen.
Die meisten Apps beinhalten user interaktionen mit dem system. Der erste Schritt um eine interaktive App zubauen ist es die Inputs der User warzunehmen. In diesem Beispiel wird es anhand eines Buttons gezeigt.
Gesturedetector: Basic Widget um jegliche Gesten warzunehmen z.b tap, Long Tap, double tap usw.