Flutter App Development - Teil 2 - Libraries und Architektur
Womit geht es in Teil zwei weiter habe ich mich gefragt. Sowohl die UI, wie auch die eigentliche Architektur könnten ein Thema sein. Ich persönlich bevorzuge erst die Logik, dann die UI und entsprechend machen wir heute auch weiter. Bevor wir jetzt aber alles selber schreiben, binden wir erst einmal relevante Libraries ein. Denn es gibt ein paar Dinge die man nicht unbedingt selber schreiben möchte.
pubspec.yaml (Code auf GitHub open_in_new)
name: fss
description: Fluttery Site Summaries - RSS the Flutter way
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
bloc: ^4.0.0
flutter_bloc: ^4.0.0
flutter_html: ^0.11.1
http: ^0.12.0+4
intl: ^0.16.1
path_provider: ^1.6.7
sembast: ^2.4.2
url_launcher: ^5.4.5
webfeed: ^0.4.2
dev_dependencies:
flutter_test:
sdk: flutter
pedantic: ^1.9.0
flutter:
uses-material-design: true
Bildquelle: flutter.io open_in_new
Flutter App Development - Teil 1 - Der Start
Wie man es im Leben kennt, hat alles wesentlich länger gedauert, sowohl die Planung für diese Newsreihe, wie auch die Entwicklung der App und die eigentliche Erstellung der Beiträge, doch heute geht es nun wirklich los.
Diese Tutorialreihe richte sich an Entwickler die bereits einige Erfahrungen sammeln konnten, bzw. die ein Grundverständnis für Dart open_in_new und Flutter open_in_new haben. Ich werde versuchen alles so umfangreich wie möglich zu erklären, allerdings werde ich nicht jeden Parameter eines jeden Widgets beschreiben. Dieses Tutorial soll vor allem auch Einblicke in Konzepte und Ideen geben, aber explizit kein Copy & Paste One-Page Tutorial sein. Geschriebener Code wird nach Möglichkeit gemäß den Effective Dart Style Guidelines open_in_new entwickelt.
Das gesamte Repository open_in_new ist im finalen Zustand bereits auf GitHub hinterlegt. Im Laufe der Tutorialreihe haben sich einige interne Strukturen und Bezeichnungen geändert, dies wird in den jeweiligen Beiträgen erläutert.
Ein neues Flutter Projekt startet immer mit einem kleinen Counter-App Beispiel. Dieses soll vor allem komplett neuen Entwicklern etwas Arbeit abnehmen und eine grundlegende Idee von Strukturen und dem Aufbau einer Flutter App vermitteln. Generell eine gute Idee, für uns nicht wirklich hilfreich, also räumen wir erstmal auf.
Ich werde, aufgrund meines Android Hintergrunds und weil es eines der wenigen Designkonzepte ist die selbst ich wirklich nachvollziehen kann, auf Material Design open_in_new setzen. In Flutter nutze ich entsprechend eine MaterialApp open_in_new.
Zudem werde ich in der App keine Übersetzungslogik einbauen und sie nur auf Englisch anbieten. Allerdings möchte ich explizit darauf hinweisen, dass ihr Apps, welche jemals produktiv genutzt werden sollen, von Anfang an lokalisiert entwickeln solltet. Zu diesem Thema findet ihr hier im Blog bald mehr. Dies gesagt möchte ich von jeglicher Form von Magic-Strings abraten, egal ob für Text den der Nutzer sieht oder für interne Inhalte. Strings sollte immer konstant definiert werden, ansonsten beißt man sich früher oder später ins Hinterteil.
Doch nun zum eigentlich Code. Als erstes entferne ich erklärende Kommentare aus der pubspec.yaml open_in_new und lib/main.dart open_in_new, denn selbige brauchen wir nicht. Ich versuche übrigens bei jeder ersten Erwähnung einer Datei den gesamten relativen Projektpfad anzugeben und anschließend nutze ich nur noch den Dateinamen. Ich hoffe dies hilf euch beim Finden der jeweiligen Dateien, überfrachtet den Beitrag selbst aber nicht zu sehr.
Bildquelle: flutter.io open_in_new
Flutter - Neue Version erscheint nächste Woche und weitere Anpassungen
Meine Flutter Newsreihe hängt gerade noch am letzten Feinschliff und ein paar Code Updates fehlen auch noch, da gerade relevante Libraries in einer neuen Major Version erschienen sind und ich dies gerne abbilden möchte. Damit euch aber nicht langweilig wird, an dieser Stelle eine andere erfreuliche News.
Bereits nächste Woche soll die nächste stabile Flutter Version erscheinen. Diese wird ein neues klareres Release-Modell verfolgen und um besser planen zu können, ist das Ziel von nun an regelmäßige Releases einmal pro Quartal durchführen. Weitere Informationen zu den Plänen gibt es in den Related Links.
Zusätzlich interessant finde ich, dass sich mittlerweile über zwei Millionen Entwickler mit Flutter befasst haben und derzeit ca. eine halbe Million aktive Entwickler pro Monat mit Flutter Projekten arbeiten. Damit das miteinander noch weiter verbessert wird und z.B. kritische Framework-Bugs besser behoben werden können, sind diverse kleine Optimierungen an Abläufen und ähnlichem geplant.
Sollte euch Flutter auch interessieren und ihr hattet noch keine Zeit euch damit auseinander zu setzen, gibt es neben diversen guten Online-Kursen open_in_new, bald wie oben erwähnt eine kleine Newsreihe zum Thema hier direkt im Blog. Bei Interesse schaut also gerne wieder vorbei.
Bildquelle: flutter.io open_in_new
Flutter Widget of the Week Youtube-Reihe
Falls ihr gerne neues lernt und im Flutter-Universum unterwegs seid, kann ich euch eine Videoreihe der Flutter-Entwickler ans Herz legen. Die Videos sind wenige Minuten lang und erklären jeweils ein Widget. Widgets open_in_new sind Flutters View-Komponenten, welche ihr nutzt um das User Interface zu bauen.
Dabei gibt es High-Level-Widgets, welche quasi vollwertige Inhalte darstellen, z.B. gemäß dem Material Design Konzept open_in_new oder aber Low-Level-Widgets, welche genutzt werden, um darauf aufbauend eigene Strukturen zu erstellen.
Die Flutter Widget of the Week Youtube-Reihe open_in_new bietet Einblicke in beide Ebenen. Dies geschieht wie erwähnt kurz und knapp, aber sehr hilfreich erklärt. Alleine das Wissen das bestimmte Widgets existieren ist manchmal Gold wert. In der Video-Reihe gibt es alles vom Expanded open_in_new Widget, bis hin zum StreamBuilder open_in_new und auch komplexe Dinge wie ClipRRect open_in_new oder DraggableScrollableSheet open_in_new werden gezeigt.
Ich habe hier zuletzt das generische Builder open_in_new Widget kennen gelernt, welches im Prinzip nur eine weitere Ebene in Bezug auf den BuildContext etabliert. Klingt nach unnötiger Schachtelung, aber gerade im Zusammenhang mit dem Provider Package open_in_new oder InheritedWidgets open_in_new generell ist dies extrem praktisch und erspart die Erstellung unnötiger neuer Widget-Strukturen.
Mittlerweile gibt es fast 75 Videos in der Playlist, welche einen schönen Überblick über verfügbare Widgets und generelle Ansätze des Frameworks liefert. Meiner Meinung nach auf jeden Fall einen Blick wert.
Bildquelle: flutter.io open_in_new
Flutter Web Support ausprobiert
Flutter ist aktuell sehr präsent bei mir, wenn es um die Entwicklung von Software geht. Aus diesem Grund habe ich mir nun auch die Flutter Web Integration angeschaut, welche aktuell auf dem Flutter Beta Channel verfügbar ist.
Nebenbei sei übrigens erwähnt, dass dies mein letztes Projekt war, welches meiner Flutter App Development Newsreihe im Wege steht. Doch nun zu meinen Erfahrungen mit dem Flutter Web Support. Generell funktionieren die meisten Dinge der bekannten App-Entwicklung auch im Web-Kontext, allerdings sollte man vor allem bei Third-Party-Libraries open_in_new darauf achten das Web-Support gegeben ist. Doch selbst dann sollte man lieber noch einmal konkret testen.
Related Links
Bildquelle: flutter.io open_in_new
Flutter App Development - Was entwickeln wir?
Meine Flutter Newsserie geht endlich weiter oder sollte man sagen sie startet nun wirklich? Nachdem ich vor einigen Monaten angefangen habe, schlief das ganze Projekt aus Zeitgründen leider sehr schnell ein. Nun geht es weiter, die Pläne sind geschmiedet und selbige werde ich heute mit euch teilen.
Voraussetzung für die App, die ich entwickeln und für Tutorial-Zwecke nutzen möchte, ist das sie einen Nutzen haben soll. Ich möchte nicht To-Do App 1337 entwickeln und da ich nur begrenzt Zeit zur Verfügung habe, möchte ich bei der Entwicklung Spaß haben. Anders könnte ich nicht ausreichend Motivation aufbringen.
Doch nun zum Thema, entwickelt wird ein RSS Reader, mit moderner leichtgewichtiger Persistenz, ordentlicher Architektur die zum Flutter Framework passt und einer flexiblen UI, welche sich im Rahmen des Projekts entwickeln wird. Vor allem im Bereich Animationen möchte ich das eine oder andere ausprobieren.
Bildquelle: flutter.io open_in_new
Google Play Pass angekündigt
Abos für Filme, Serien und PC-Spiele kennen wir und erst vor kurzem brachte Apple selbige auch auf die mobilen Geräte (Apple Arcade) und nun zieht Google nach. Der Google Play Pass, welcher vorerst nur in den USA verfügbar ist, wird über 350 Apps und Spiele auf euer Smartphone bringen. Keine Werbung, keine In-App-Käufe und das Ganze für 4,99 Dollar pro Monat. Zum Einstieg kann man 10 Tage lang testen und für einen begrenzten Zeitraum gibt es das Zwölf-Monats-Abonnement sogar für 1,99 Dollar pro Monat.
In der Content Auswahl befinden sich große und bekannte Apps und Spiele (z.B. AccuWeather, Terraria und Monument Valley), aber auch unbekannte Perlen (z.B. Mini Metro und Old Man’s Journey), sodass es auch einiges zu entdecken geben soll. Was konkret dabei ist könnt ihr den Related Links entnehmen, auch wenn wir in Deutschland ohnehin noch etwas warten müssen. Ein konkretes Datum für weitere Länder ist derzeit noch nicht bekannt.
Ich persönlich spiele sehr wenige Handy-Spiele, außer ich bin im Urlaub und habe etwas Ruhe. Dort Spiele ich dann auch gerne etwas länger und in diesem Kontext bevorzuge ich dann auch komplexere und umfangreichere Spiele, die für längere Sessions ausgelegt sind. Ich werde den Play Pass im Auge behalten, aber vermutlich nicht zuschlagen, da es sich Preis- / Leistungsmäßig für mich einfach nicht lohnt. Was denkt ihr zum Thema Abonnements im mobilen Bereich?
Bildquelle: play.google.com open_in_new
Android Q - Abschied von den Süßigkeiten
Während ich aktuell die neue Android Studio Version 3.5 teste, zu welcher bald eine weitere News folgt, wurde gestern der finale Name der nächsten Android Version bekanntgegeben. Es wird Android 10 heißen - keine Süßigkeiten, kein spezieller Name - einfach nur Android 10. Grund dafür ist vor allem die bessere Erkennbarkeit und einfacherer Einordnung durch Nutzer. So soll durch die Nummerierung schneller klar sein welche Version neuer und welche älter ist.
Zusätzlich wurden die Brand Farben und das Logo angepasst. Es gibt nun klarere Farben und der Roboter ist jetzt immer mit dabei. Dadurch soll eine bessere Lesbarkeit und Wiedererkennbarkeit gegeben sein. Zum Branding gibt es ein kleines Youtube Video im unteren Teil der News.
Allgemein finde ich es etwas schade, dass das Rätselraten rund um die Android-Namensvergabe ein Ende hat, auf der anderen Seite kann ich die Entscheidung aber auch nachvollziehen. Generell ist das Ganze wenn man ehrlich ist ja auch nicht die Welt und für die Nutzer ändert sich nichts, entsprechend kann ich die Änderung gut akzeptieren und freue mich auf ein hoffentlich bald erscheinendes Android 10 für mein OnePlus 5T.
Bildquelle: www.blog.google open_in_new
Flutter App Development - Einleitung und Setup
Seit dem Jahresstart entwickle ich aktiv Flutter Apps und meine Erfahrungen und Learnings möchte ich gerne mit euch teilen. Aus diesem Grund starte ich heute meine Newsreihe zum Thema Flutter App Development. Der Fokus liegt dabei vorerst auf dem Smartphone Teil von Flutter, auch wenn die ersten Flutter Desktop open_in_new und Flutter Web open_in_new Vorschauversionen bereits zu haben sind.
Als kleine Einleitung zum Thema ein paar Worte zu Flutter selbst. Flutter ist ein Framework für die Programmiersprache Dart open_in_new. Diese beiden Komponenten bilden die Basis für Googles Cross-Platform Lösung. Flutter ist sehr User Interface zentriert und erlaubt entsprechend diverse Dinge einfach und schnell umzusetzen. Dabei wird eine eigene Rendering-Engine eingesetzt, um alles mit flüssigen 60+ Frames anzeigen zu können. Die nativen UI-Elemente werden dafür vom Flutter Team nachprogrammiert. Die Entwicklung selbst erfolgt mit bekannten IDEs wie Visual Studio Code, Xcode oder Android Studio. Hot Reload macht die Entwicklung dabei extrem schnell. Im unteren Teil der News findet ihr ein kurzes Teaser Video, welches euch diverse relevante Punkte zu Flutter in unter drei Minuten präsentiert.
Bildquelle: flutter.io open_in_new
Google Pay mit Paypal - Ein erster Test
Nachdem ich vor kurzem über Google Pay in Verbindung mit Paypal und kontaktlosem Bezahlen berichtete, folgt nun ein kurzes Feedback wie ein erster Testlauf lief. Nach der Einrichtung, welche ich über die Paypal App startete, da das Ganze bei Google Pay noch nicht freigeschaltet war, erschien mein Paypal Konto direkt als mögliches Zahlungsmittel. Entsprechend markiert mit dem kontaktlos Bezahlen Logo und als Standard vorausgewählt.
Die ersten beiden Tests führte ich bei Edeka durch, da ich dort wusste das kontaktloses Bezahlen funktioniert. Gesagt, getan, das Smartphone mit aktiviertem NFC entsperrt, die App gestartet - was soweit ich weiß nicht mal nötig ist - und das Gerät über den Kartenleser gehalten. Bei zwei von zwei Versuchen funktionierte es jeweils sofort, ohne Probleme und auch sehr schnell. Die Beträge waren jeweils unter 20 Euro. Das Ganze gefällt mir extrem gut, ist praktisch, einfach und scheinbar auch verlässlich, sodass ich in nächster Zeit auf jeden Fall häufiger darauf zurückgreifen werde.
Wie sieht es bei euch aus, habt ihr kontaktloses Bezahlen schon genutzt und habt ihr es auch schon mit dem Handy ausprobiert?
Related Links
Bildquelle: pay.google.com open_in_new