Flutter, Dart und mehr !

Vielleicht ist es nicht das ganze Bild, was Flutter angeht, aber die aktuellen Zeichen für dieses SDK von Google stehen gut. Wenn man Medienberichten glauben darf und will nimmt die Anzahl von Entwicklern die sich für Flutter entscheiden zu. Nimmt man eine aktive Flutter Gemeinde und die sehr gute Dokumentation hinzu, dürfte das nicht weiter überraschen. LinkedIn hat dazu Zahlen publiziert. Eine gute Gelegenheit eine Website weiter zu empfehlen, die für einige interessant sein dürfte: ADTMag . Es sei mir als deutsch sprachiger Amateur erlaubt, es schade zu finden, wie dünn gesät ähnliche Publikationen auf deutsch sind. Vielleicht habe ich sie aber auch einfach noch nicht gefunden.

Wie dem interessierten Leser sicherlich schon bekannt sein dürfte, ist Dart eine objektorientierte Programmiersprache, kurz OOP. Zu OOP gehören Objekte und Klassen. Wie vieles im Leben ist der Start in das Thema einfach, kann und wird aber mit zunehmender Tiefe anspruchsvoller. Klassen Eine Klasse, oder auch Objekttyp, kann man als Bauplan verstehen, um eine reale Problemstellung in einem Softwareobjekt abzubilden. Wir könnten zum Beispiel die Klasse Schach definieren, um anschließend die einzelnen Figuren aus dieser Klasse zu generieren. Eine Klasse besitzt Attribute und Methoden/Funktionen . Wenn wir jetzt das Beispiel Schach umsetzen möchten, können wir uns an dem realen Schach orientieren. In der Theorie ist das immer die richtige Vorgehensweise, das heißt: ein Objekt / Problemstellung aus der realen Welt, wird analysiert und in eine Klasse umgewandelt. class Schach Farbe Form erlaubteBewegungen Mit der Klasse Schach könnten wir jetzt ein Objekt erzeugen, das e...

Android Asset Studio Nützliche Websiten die Unterstützung bitten, bei alltäglichen Aufgaben für einen Entwickler gibt es viele. Hier meine Auswahl an großen und kleinen Hilfen. Images Bilder anzupassen, ihre Größe zu ändern, der Umgang mit Icons, all das ist mehr oder weniger eine häufige Notwendigkeit. Die erste Empfehlung gilt daher Android Asset Studio . Eine einfach konzipierte Website mit nicht geringer Funktionalität. Die nächste Website zum Thema Images kommt sehr aufgeräumt daher. Sie eignet sich vor allem für Generierung von  Icons und Bildern für verschiedene Bildschirmauflösungen bei Smartphones. App Icon Generator gibt es sowohl online, als auch als Desktop Version für Windows und Mac. Die Größe eines Bildes zu ändern, aber noch viele weitere nützliche Helfer gibt es auf auf iLoveIMG . Auch wenn ich persönlich Bild Verkleinern vorziehe. Bevor man aber ein Bild manipulieren kann, braucht man zuerst eines. Eine sehr gute Quelle dabei, ist unsplash . Die Bild...

New York Jedes Bildschirmbild besteht aus Pixeln, was eigentlich in unserer Zeit schon Kindern klar ist. Für Programmierer von App's hat dieses Thema aber noch einen anderen Hintergrund.  Zwar ähneln sich viele Smartphones in der Größe, aber die tatsächliche Bildschirmauflösung kennt dann doch Unterschiede. In diesem Zusammenhang gibt einige Fachbegriffe, die zum Teil fast das Gleiche meinen. Eine der Kennzeichnungen die sich allgemein durchgesetzt hat ist folgende: dpi - ein englischer Fachbegriff, der für "Dots per Inch" steht. Diese Abkürzung ist schon lange geläufig. Vor allem im Druckbereich eine gängige Masseinheit. ldpi - low density oder low dots per Inch. Entspricht  ungefähr 120 dpi mdpi - medium density oder medium dots per Inch. Entspricht ungefähr 160 dpi hdpi - high density oder dots per Inch. Entspricht ungefähr 240 dpi xhdpi - extra high density oder dots per Inch. Entspricht etwa 320 dpi xxhdpi - extra extra high density oder dots ...

Cards in Flutter sind gedacht für die optische Darstellung einer überschaubaren Anzahl von Informationen. Während ich mir im ersten Teil das grundsätzliche angeschaut habe, waren mir jetzt die abgerundeten Ecken der Designelemente wichtig. Beim erstellen des Codes ist mir aufgefallen, das mir noch einiges nicht ganz klar ist, vor allem im Umgang mit Bildern, sprich Icons. Beim Card Widget erhält man die abgerundeten Ecken über folgenden Code: shape: RoundedRectangleBorder Wobei hier shape eine Eigenschaft der Card Klasse ist. Beim Bild selbst, kann man das gleiche über folgenden Code erreichen: child: ClipRRect (...child:Image.asset(...)..borderRadius:..) Obwohl im Code alle Card Widgets die gleichen Werte besitzen, was Padding etc angeht, werden sie in unterschiedlichen Dimensionen angezeigt. Das ist etwas, was ich noch genauer anschauen muss und will :-)) Vielleicht mache ich das alles, aber auch viel zu kompliziert.. Hier der Code: Das Ergebnis meiner Bemü...

Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex...

Material.io Bei der Entwicklung einer App spielt nicht nur die Funktionalität eine Rolle. Das andere, wichtige Merkmal ist das Design, sprich, die Darstellung der App. Welche Farben verwenden wir, welchen Schriftsatz in welcher Größe, sind Fragen die es zu beantworten gilt. Flutter bietet für die Lösung dieser Frage, die Integration von Material Design an. Wer sich hierzu einen Überblick verschaffen möchte, besucht am besten die Homepage dazu. Was die Farben betrifft wird gerne von Primären und Sekundären Farben gesprochen. Die Primären werden oft für  App Bars und Buttons benutzt, während die Sekundären zum Beispiel für den Floating Action Button oder Kontrollelemente eingesetzt werden. Zum erkunden von Farben eignet sich auch das Color Tool auf Material.io .  Eine Variante davon, leider ein wenig umständlich zu erreichen, findet man ebenfalls auf der Material Seite, hier der Link dazu! Fallstricke Bevor wir mit dem Code loslegen, hier noch ein kleiner Hinweis: O...

Google's Fontseite Wer mit Flutter eine App entwickeln möchte, sollte wissen wie man Fonts, Zeichensätze, in Flutter einbindet. Es gibt verschiedene Quellen für Fonts, die bekannteste ist die von Google .  Sie bietet verschiedene Optionen und auch die Möglichkeit, Fonts herunterzuladen. Wenn wir unsere App um Fonts erweitern wollen, müssen wir das zuerst vorbereiten. Fonts suchen / auswählen und lokal speichern einen Fonts Ordner in unserem App Projekt erstellen in diesen Ordner den Font speichern bzw den Font dorthin entpacken (Zip) Fonts Ordner Im Bild rechts sehen wir, wie das zum Beispiel in Visual Studio Code aussehen würde. Als nächstes muss der Font oder, falls man mehrere benötigt, die Fonts, in das Projekt eingebunden werden. Das geschieht bei Flutter über das pubspec.yaml File. In diesem File werden nicht nur Fonts, sondern auch z.B. Bilder, Bibliotheken und anderes in das eigene Projekt eingebunden. In diesem File wird der Font (family:) und der spezi...