Flutter, Dart und mehr !

Dart Die Manipulation von Zeichenketten ist eine wiederkehrende Aufgabe in der Programmierung. Natürlich hat auch Dart diverse Möglichkeiten mit Zeichenketten umzugehen. Dieser Serie wird auf einige eingehen. Basis Alles in Dart ist letztendlich ein Objekt. Auch der Datentyp String ist ein Objekt, beziehungsweise, die entsprechenden Variablen die wir erstellen. In der dart:core Library ist die String Klasse implementiert. Die Dokumentation dazu ist, wie bei Dart üblich, hervorragend. Ich kann nur empfehlen, sich eingehend damit zu beschäftigen. Zum testen kann man das DartPad verwenden. Es ist ideal für kleine Programme und erste Schritte in Dart. Eine Zeichenkette einer Variablen zuweisen Einfache Zuweisung von Strings Links sehen wir zwei einfache Zuweisungen. Einmal an die Variable test , diese ist vom Typ String . Das andere Mal an test1 , diese wiederum ist vom Typ var . Beides ist legitim, obwohl ein kleiner Unterschied besteht. Während String test ...

Willkommen zum nächsten Artikel in der AngularDart Reihe. In den letzten Teilen dieser kleinen Serie haben wir uns Zug um Zug dem Thema genährt. Wie immer in diesem Blog aus dem Blickwinkel eines absoluten Anfängers. Das heisst, wenig als bekannt voraussetzen, und immer davon ausgehen, das das Thema für den Leser ebenso Neuland ist, wie für mich selbst. Auf dem Lernweg braucht es aber immer wieder Erkenntnisse und kleine Erfolge um die Motivation nicht zu verlieren. Wo wir aktuell stehen: AngularDart Part 1 -- eine erste Annäherung AngularDart Part 2 -- Installation Boilerprojekt AngularDart Part 3 -- das Verständnis vertiefen AngularDart Part 4 -- erste Schritte AngularDart Part 5 -- template -- Du befindest Dich hier ! Komponenten app_component.dart Mit diesem Begriff sind wir schon in einem der letzten Artikel zu AngularDart in Berührung gekommen. Jetzt schauen wir uns das noch einmal genauer an. Um das zu tun, arbeiten wir mit unserem eigenen BoilerProjek...

Programmiersprache Dart Im ersten Teil sind wir in das Thema Listen in der Programmiersprache Dart eingestiegen, jetzt wollen wir es vertiefen. Um den Umgang mit Listen zu lernen, bietet es sich an zuerst ein Projekt zu erstellen, das dies einfach ermöglicht. Dazu habe ich neben dem main.dart File ein zweites File erstellt. In  meine_funktionen.dart erstelle Funktionen, um die verschiedenen Werkzeuge die Dart für die Bearbeitung von Listen zur Verfügung stellt, zu testen. Der Code selbst ist sehr einfach. Als erstes erstellen wir eine abstract class User . Wir erinnern uns, das wir aus einer abstrakten Klasse selbst, keine Objekte erzeugen können. Wer die zwei Post zum Thema abstract class noch einmal nachlesen möchte, findet hier den ersten Artikel und hier den zweiten. Folgerichtig erweitern wir anschließend diese Klasse mit extend zu der neuen Klasse Benutzer . Wenn wir im Quellcode die abstrakte Klasse betrachten, sehen wir das im Konstruktor die Va...

Im letzten Artikel zu Dart haben wir uns ja mit, abstrakten Klassen beschäftigt. Ein zugegebener Massen abstraktes Thema (dieser flache Scherz musste jetzt sein) . In diesem Artikel geht es um Parameter, also Übergabewerte. Nicht wenige Funktionen verrichten ihre Arbeit nur, wenn wir Ihnen einen, oder mehrere Werte beim Aufruf übergeben. Dabei kann jede Funktion zwei Arten von Parametern übernehmen: benötige(Pflicht) Werte und optionale . Beispiel: Funktion mit Parametern In diesem sehr einfach Beispielcode wird eine Funktion benutzt, die zwei Zeichenketten als Übergabewerte erwartet. Sollten wir diese Funktion ohne, oder mit nur einem Parameter aufrufen, oder sollten die Übergabewerte den falschen Typ haben, wird uns der Compiler einen Fehler melden . Im Beispiel haben wir also zwei Pflichtwerte zu übergeben. Das Beispiel können wir jetzt um optionale Parameter erweitern. Optionale Parameter gibt es in zwei Varianten : solche die wir durch ihre Position definier...

Im letzten Artikel zu diesem Thema, sind wir in die Materie abstract class in Dart eingestiegen. In diesem Post schauen wir uns weitere Aspekte an. Wir haben gelernt, das wir von einer abstrakten Klasse nicht direkt ein Objekt erzeugen können. Wir können sie aber mit extends erweitern und ergänzen. Sollte diese Klasse auch abstrakte Methoden implementieren, müssen wir diese zwingend in unserer "erweiterten" Klasse umsetzen. Jetzt hatten wir schon im letzten Artikel zu diesem Thema die Frage nach dem Nutzen gestellt und das Beispiel einer Benutzerverwaltung  erwähnt. Hier noch ein anderer Blickwinkel: Wenn wir mit abstrakten Klassen arbeiten, zwingen wir uns, oder wenn sie vorgegeben werden, werden wir gezwungen, uns an gewisse Vorgaben zu halten.  Vor allem in grösseren Codeprojekten ist das ein nicht zu unterschätzender Faktor. Im Code oben sehen wir eine abstrakte Klasse mit zwei abstrakten Methoden und einer "normalen". Anschließend implement...

Photo by Elijah O'Donnell / unsplash.com In diesem Artikel betrachten wir die abstrakte Klassen in Dart. Was ist der Nutzen ? Normale Klassen können auf eine Vielzahl von Arten benutzt und manipuliert werden. Dabei steht die Wiederverwendbarkeit der Klassen und den davon abgeleiteten Objekten im Vordergrund. Abstrakte Klassen bringen nun auf der einten Seite Einschränkungen mit sich, gewähren dafür aber in gewisser Beziehung auch grössere Freiheiten . Wenn man durch die Dart Bibliotheken stöbert wird man auf nicht wenige davon stoßen. Man darf ruhig davon sprechen, das sie eine elementare Rolle in Dart spielen Details Hier links sehen wir, das das Schlüsselwort abstract den Unterschied zu der normalen Klassendefinition ausmacht.   Hier aber gleich zum ersten, wesentlichen Unterschied zu"normalen" Klassen in Dart : von einer abstrakten Klasse, kann man nicht direkt ein Objekt ableiten!  Jeder Versuch das zu tun wird am Compiler scheitern. Selbs...

Im letzten Teil dieses Tutorials haben wir uns die Ordnerstruktur einer  AngularDart App angesehen. Nun wird es Zeit näher auf die @Component Syntax einzugehen. Wenn wir das Bild links anschauen, sehen wir eine Klasse class AppComponent . Wir wissen, das diese Komponente die root Komponente unserer AngularDart App ist. Was bedeuten aber die einzelnen Einträge von @Component (....) ? selector selector: 'my-app' , : ein CSS Selektor der AngularDart anweist eine Instanz dieser Komponente zu erzeugen und sie überall dort in das Eltern Html File (parent) einzufügen, wo es auf den Tag <my-app> .... </my-app> stößt. Wenn wir das Boiler-Projekt anschauen, sehen wir, das dieses Tag im index.html File gesetzt ist. Mit diesem selector definieren wir also einen Tag, den wir später im html File verwenden können. styleUrls Dieser Eintrag ist fast selbsterklärend. Wehr mehr zu css ( Cascading Style Sheets ) wissen möchte, findet im Netz sehr viele gute Tu...

In diese Teil dieser Tutorial Serie befassen wir uns mit dem Einsatz von StatefulWidgets und StatelessWidgets . Diese beide Klassen eröffnen uns in Flutter eine zentrale Möglichkeit unsere App zu strukturieren. Zentraler Punkt bei diesen zwei Varianten ist die build(...) Methode. Sie veranlasst Flutter, das Widget zu "bauen". build(...) baut dabei alle miteinander verketteten Widgets auf, die sich innerhalb des Funktionskörpers der build(...) {....} befinden. Die Anzahl der Widgets, die sich innerhalb dieses Funktionskörpers {...} befinden, ist dabei nicht entscheidend. Im letzten Teil dieses Tutorials haben wir uns schon ein wenig mit dem StatefulWidget befasst. Hier noch einmal das ein Schaubild dazu: Schema 1 Vom letzten Teil dieses Tutorials wissen wir, das ein StatefulWidget dann nützlich ist, wenn wir auf eine Veränderung reagieren müssen. Das kann ein Button sein, der gedrückt wurde, oder ein Textfeld, welches vom User benutzt wurde. Schauen wir un...

Im ersten Teil dieser Serie haben wir uns dem  Framework AngularDart angenähert, im zweiten Teil die Voraussetzungen in Visual Studio Code geschaffen, um aktiv zu testen. Moderne Websiten sind ja bekanntlich viel mehr als eine Ansammlung von Html Codes. Während früher JavaScript, zum Einbau von Funktionalität jenseits von Html genutzt wurde, sind die Ansprüche heute grösser. Ein Angular Framework soll die Entwicklung unterstützen und vereinfachen. Die wahre Stärke liegt dabei in der Modularität des Framework's. Sie ermöglicht nicht nur eine vereinfachte Fehlersuche, auch eine verbesserte Wiederverwendbarkeit von Code. Um Missverständnissen vorzubeugen, gleich eine sprachliche Klarstellung. Wir sprechen bei einer Website die mit AngularDart erzeugt wurde, von einer Angular App . Während es in der Urzeit des Internets sicher weit hergeholt gewesen wäre, eine Website eine App zu nennen, ist das aktuell anders. Die enge Verflechtung zwischen Html und einer Programmierspra...

Im ersten Teil dieser kleinen Serie haben wir begonnen uns mit Iterable zu befassen. Eine Erkenntnis war, das ein Iterable nicht ein Datentyp wie zum Beispiel Integer oder String ist. Ein Datenobjekt ist dann ein Iterable, wenn auf definierte Art und Weise mit ihm umgegangen werden kann. Damit ist gemeint:  we say that a value is an iterable when your program can iterate over it. In short, an iterable is a value that represents a sequence of one more values. To iterate over a sequence means to visit each element of the sequence, and do some operation for each element. Alles klart, denkt man jetzt vielleicht als Anfänger. Wobei eigentlich klar ist nur, was für einen Nutzen wir aus der Tatsache ziehen können, wenn ein Datenobjekt ein Iterable ist. Das Iterable von Dart ist ein Teil der dart:core library . Auf der Seite zu der Iterable Klasse tritt uns dann die Bezeichnung rechts entgegen. Iterable<E>class liest sich seltsam, bzw wie kann man das lesen und d...

AngularDart Logo Im ersten Teil zu AngularDart, haben wir schon eine Annäherung versucht. In diesem Post setzten wir das fort und erstellen nun das BoilerProjekt in Visual Studio Code . Wer regelmäßig alle Updates, sowohl für VSC , als auch für Dart installiert hat, sollte keine Probleme haben, schließlich erledigt die IDE alles für uns. Wir öffnen die Befehlspalette in Visual Studio Code , wählen Dart: neues Projekt und dort AngularDart. Unten ein kleines Video dazu. Aber es ist wirklich einfach... Nach dem das Boiler Projekt steht, sollte man noch sicherheitshalber die installierten Abhängigkeiten updaten. Entweder über $pub get im Terminal (bitte kontrollieren ob man sich im richtigen Verzeichnis befindet), oder einfacher über den vorhandenen Button von Visual Studio Code. Diesen erhält man, wenn man die pubspec.yaml Datei geöffnet hat, oben rechts. Wenn das geschehen ist und wir keine Fehlermeldungen bekommen haben, sind wir schon fast startbereit. Was j...

Unser Blog befasst sich ja offensichtlich mit Flutter und der Programmiersprache Dart, die dem SDK zu Grunde liegt. Mit zu dieser "Familie" gehört aber auch AngularDart . (zum zweiten Teil dieser kleinen Serie geht es hier lang !) Was ist Angular ? Für mich als absoluten Anfänger ist das natürlich die nächste Frage. Die Antwort ist im ersten Moment kurz: Angular ist ein Webframework . Natürlich liegt hier die Würze nicht in der Kürze und es ist stark zu empfehlen sich mit den Begriffen rund um Angular vertraut zu machen. Oberflächlich betrachtet sind moderne Websiten eine Mischung aus HTML und diversen Webtechnologien. Webtechnologien können unterschiedliche Programmiersprachen oder Konzepte als Grundlage haben. Dominierend sind Javascript und auf dieser Programmiersprache aufbauende Varianten. Es kann relativ aufwendig sein, sich hier einen kompletten Überblick zu verschaffen. Selbstverständlich haben diese Technologien das Ziel Mehrwert für den User zu schaffen. W...

In Dart stößt man immer wieder auf den Begriff Iterable . Fragt man dann Onkel Google , was es bitteschön auf Deutsch zu bedeuten hat, findet man, bzw fand ich, keine befriedigende Information. Nach einigem stöbern, fand sich dann doch eine Erklärung, natürlich in Englisch, die ich nachvollziehen konnte. Iterable class To  iterate over  a sequence means to visit each element of the sequence, and do some operation for each element. Sequence , steht hier für lineare Abfolge oder Reihenfolge. Meine Verständnis von Iterable: Ein Iterable, ist Datenobjekt, das Daten in linearer Reihenfolge enthält, wobei auf jeden Datensatz zugegriffen werden kann. we say that a value is an  iterable  when your program can iterate over it. In short, an iterable is a value that represents a sequence of one more values Mit Iterable ist also nicht ein Datentyp gemeint, wie zum Beispiel String oder Integer . Ein Datenobjekt ist dann ein Iterable , wenn auf definierte Art un...

Es war ja schon bekannt das Google mit Flutter mehr vor hat, als "bloß" eine weitere Variante für App Entwicklung bereitzustellen. Heute, passend natürlich zu der Google i/o 1 9 , die aktuelle über die Bühne geht, meldet mir Visual Studio Code, neue Versionen von Dart und Flutter . Erstaunt stellte ich fest, das auch die Dart Homepage ein Facelifting bekam, was ich im übrigen gelungen finde. Aber Achtung:... Auf der Frontpage von Dart wird 2.2. angeführt,  geht man weiter, stößt man auf diese Version: Im ersten Moment hat das bei meiner Installation Probleme gemacht. Vor allem beim erstellen eines Flutter Web Projekts, erhielt ich Fehlermeldungen, was die Auflösung der Abhängigkeiten betraf. Flutter Web Beispiel Das von Hand updaten der Packages etc hat nicht geholfen, erst zum Schluss, als ich das Beispiel Web Projekt von Visual Studio Code per F5 gestartet hatte, lösten sich die Probleme auf. Eine Komponente wurde aktualisiert und siehe da, es fun...

Im zweiten Teil dieser Serie hatten wir uns mit primarySwatch beschäftigt, Farbpaletten also, die konform gehen mit Google's Vision von Material Design. Was aber wenn wir unsere ganz eigene Farbpalette haben möchten ? Vorbereitung: Farbauswahl Wie schon in den letzten zwei Posts erwähnt kann man die Farben ganz einfach aus den vorgegebenen Paletten auswählen, oder über einen Farbmixer. Eine eigene MaterialColor Klasse Anschließend benötigen wir eine eigene Theme Definition und eine Material Color Klasse . Die Material Color Klasse wird in der Theme Definition verankert und diese wiederum in die MaterialApp eingetragen. Dabei ist wichtig, das Änderungen im Emulator nicht über Hot Reload sichtbar sind, sondern ein Neustart notwendig ist. Wenn man sich den ganzen Prozess vor Augen hält, ist wohl sinnvoll sich Gedanken darüber zu machen, welche Farben in der App verwendet werden und an welchen Stellen man "Sonderfarben" braucht. Genau so, wie es theme...