WTC 2019 – Flutter
Als PPTX, PDF herunterladen0 gefällt mir152 aufrufe
Die Webconia Technology Conference, geleitet von Jan Reichhardt, bietet eine Einführung in Flutter, eine plattformübergreifende Entwicklungsumgebung für hochleistungsfähige Apps mit einer einzigen Codebasis. Der Vortrag behandelt verschiedene Themen wie die Architektur von Flutter, die Programmiersprache Dart, deren Funktionen und Typen sowie die Einrichtung der Entwicklungsumgebung. Außerdem wird gezeigt, wie man einfache Flutter-Apps erstellen kann und welche Widget-Bibliotheken zur Gestaltung von Benutzeroberflächen zur Verfügung stehen.
![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;](https://image.slidesharecdn.com/flutter-191023084614/85/WTC-2019-Flutter-17-320.jpg)
![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'),
),
),
);
}
}](https://image.slidesharecdn.com/flutter-191023084614/85/WTC-2019-Flutter-22-320.jpg)
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
- #4: 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
- #6: 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)
- #7: 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.
- #8: 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.
- #9: Das Framework … … für die UI Komponenten
- #10: 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.
- #11: 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.
- #12: 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.
- #13: 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.
- #14: Hier werden Fakten aufgelistet 1.5 Somit laufen Dart Anwendungen ohne zusätzliche Installation in allen modernen browsern.
- #15: 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.
- #16: 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.
- #17: 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
- #18: 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; }
- #19: 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.
- #20: 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.
- #21: 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.
- #22: 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.
- #23: 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.