SlideShare ist ein Scribd-Unternehmen logo
Webconia Technology Conference
Jan Reichhardt
Flutter
Webconia Technology Conference
Vortrag von: Jan Reichhardt
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
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 ?
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 ?
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 ?
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
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
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
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
Webconia Technology Conference
Jan Reichhardt
22.10.2019 9
• Xcode installieren
• Lizenz Vereinbarungen Akzeptieren
• Cocoapods Installieren
Flutter IOS Setup
sudoxcode-select–switch/Applications/Xcode.app/Contents/Developer
sudogeminstallcocoapods
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
Webconia Technology Conference
Jan Reichhardt
22.10.2019 11
Flutter Setup Web
flutterrun–d chrome
flutterconfig–enable-web
flutterdevices
fluttercreate.
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
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
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';
Webconia Technology Conference
Jan Reichhardt
22.10.2019 15
Unterstütze Typen
• Numbers
• Strings
• Booleans
• Lists
• Sets
• Maps
• Runes
• Symbols
Dart
Maps
Sets
var gifts = {
// Key: Value
'first': 'partridge',
'second': 'turtledoves',
'fifth': 'golden rings'
};
var halogens = {'fluorine', 'chlorine', 'bromine', 'iodine', 'astatine'};
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;
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
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
Webconia Technology Conference
Jan Reichhardt
22.10.2019 19
Widgets
Webconia Technology Conference
Jan Reichhardt
22.10.2019 20
Hello World
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
Webconia Technology Conference
Jan Reichhardt
22.10.2019 21
Widget User Gesten
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('MyButton was tapped!');
},
child: Container(
height: 36.0,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.lightGreen[500],
),
child: Center(
child: Text('Engage'),
),
),
);
}
}
Webconia Technology Conference
Jan Reichhardt
22.10.2019 22
• https://flutter.dev/
• https://blog.coodoo.io/was-ist-eigentlich-flutter-96e6a91a39bc
Quellen
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)

Weitere ähnliche Inhalte

Ähnlich wie WTC 2019 – Flutter

Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main MeetupFlutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Markus Kühle
 
FMK2018- Virtuelle Server Peter Schubert
FMK2018- Virtuelle Server Peter SchubertFMK2018- Virtuelle Server Peter Schubert
FMK2018- Virtuelle Server Peter Schubert
Verein FM Konferenz
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
Ralf Schwoebel
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Gregor Biswanger
 
Code-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-EntwicklungCode-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-Entwicklung
bhoeck
 
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
Peter Hecker
 
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbHDocker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
agilemethoden
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
Ulrich Krause
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
Ulrich Krause
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
Jens Siebert
 
Domain-Driven Design in der Praxis
Domain-Driven Design in der PraxisDomain-Driven Design in der Praxis
Domain-Driven Design in der Praxis
Michael Mirold
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
IndieOutpost
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
Andreas Koop
 
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...
Gregor Biswanger
 
FMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen by Adam AugustinFMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
Verein FM Konferenz
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
Hendrik Lösch
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
enpit GmbH & Co. KG
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
Oliver Busse
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
Christian Giesswein
 

Ähnlich wie WTC 2019 – Flutter (20)

Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main MeetupFlutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
 
FMK2018- Virtuelle Server Peter Schubert
FMK2018- Virtuelle Server Peter SchubertFMK2018- Virtuelle Server Peter Schubert
FMK2018- Virtuelle Server Peter Schubert
 
German: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit JavascriptGerman: Softwareprodukte aus einem Source Code mit Javascript
German: Softwareprodukte aus einem Source Code mit Javascript
 
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET CoreElectron.NET: Cross-Platform Desktop Software mit ASP.NET Core
Electron.NET: Cross-Platform Desktop Software mit ASP.NET Core
 
Code-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-EntwicklungCode-Generierung vereinfacht IoT-Entwicklung
Code-Generierung vereinfacht IoT-Entwicklung
 
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
 
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbHDocker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
Windows 10 IoT Core
Windows 10 IoT CoreWindows 10 IoT Core
Windows 10 IoT Core
 
Domain-Driven Design in der Praxis
Domain-Driven Design in der PraxisDomain-Driven Design in der Praxis
Domain-Driven Design in der Praxis
 
Spiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDKSpiele entwickeln mit dem Adobe AIR SDK
Spiele entwickeln mit dem Adobe AIR SDK
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
 
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...
 
FMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen by Adam AugustinFMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
FMK2019 FileMaker Data API mit Node.js nutzen by Adam Augustin
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
WebLogic im Docker Container
WebLogic im Docker ContainerWebLogic im Docker Container
WebLogic im Docker Container
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014Roslyn DDC Kompakt 2014
Roslyn DDC Kompakt 2014
 

WTC 2019 – Flutter

  • 1. Webconia Technology Conference Jan Reichhardt Flutter Webconia Technology Conference Vortrag von: Jan Reichhardt
  • 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
  • 10. Webconia Technology Conference Jan Reichhardt 22.10.2019 9 • Xcode installieren • Lizenz Vereinbarungen Akzeptieren • Cocoapods Installieren Flutter IOS Setup sudoxcode-select–switch/Applications/Xcode.app/Contents/Developer sudogeminstallcocoapods
  • 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';
  • 16. Webconia Technology Conference Jan Reichhardt 22.10.2019 15 Unterstütze Typen • Numbers • Strings • Booleans • Lists • Sets • Maps • Runes • Symbols Dart Maps Sets var gifts = { // Key: Value 'first': 'partridge', 'second': 'turtledoves', 'fifth': 'golden rings' }; var halogens = {'fluorine', 'chlorine', 'bromine', 'iodine', 'astatine'};
  • 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
  • 20. Webconia Technology Conference Jan Reichhardt 22.10.2019 19 Widgets
  • 21. Webconia Technology Conference Jan Reichhardt 22.10.2019 20 Hello World import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
  • 22. Webconia Technology Conference Jan Reichhardt 22.10.2019 21 Widget User Gesten class MyButton extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () { print('MyButton was tapped!'); }, child: Container( height: 36.0, padding: const EdgeInsets.all(8.0), margin: const EdgeInsets.symmetric(horizontal: 8.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(5.0), color: Colors.lightGreen[500], ), child: Center( child: Text('Engage'), ), ), ); } }
  • 23. Webconia Technology Conference Jan Reichhardt 22.10.2019 22 • https://flutter.dev/ • https://blog.coodoo.io/was-ist-eigentlich-flutter-96e6a91a39bc Quellen
  • 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

  1. 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
  2. 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)
  3. 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.
  4. 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.
  5. Das Framework … … für die UI Komponenten
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. Hier werden Fakten aufgelistet 1.5 Somit laufen Dart Anwendungen ohne zusätzliche Installation in allen modernen browsern.
  11. 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.
  12. 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.
  13. 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
  14. 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; }
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.