Flutter Tutorial für Anfänger: App programmieren (Deutsch)

In diesem Tutorial zeige ich dir, wie man eine App mit Flutter programmiert, selbst wenn du Programmierer-Anfänger bist. Die App, die wir heute gemeinsam erstellen werden, ist diese hier: eine einfache Fitness-App, wo man verschiedene Werte zu seiner Gesundheit eintragen kann. Du kannst in dieser App eintragen, ob du heute genug gelaufen bist, ob du genug getrunken hast und ob du zu viel Kilokalorien zu dir genommen hast. Außerdem hast du noch eine Historie und kannst auch die Werte von den Tagen davor angucken.

Solche Tracking-Apps können übrigens echt viel bewirken. Ich habe damals in einem Startup gearbeitet, was für Hunde- und Katzen-Gesundheit verantwortlich war, und da konnte man auch verschiedene Werte für seinen Hund oder seine Katze hinzufügen in der App, und dann ist ein Algorithmus drüber gelaufen und hat verschiedene Warnungen ausgegeben, wenn dein Haustier aufgrund mancher Werte gefährdet war.

Das Positive an Flutter ist, dass du Apps, die du dann auf allen möglichen Plattformen veröffentlichen kannst. Du kannst diese App als Android-App im Play Store veröffentlichen, du kannst sie als iPhone-App im App Store veröffentlichen, du kannst sie als Web-App im Webbrowser veröffentlichen oder sogar als Windows- oder Mac-Programm exportieren. Flutter ist also eine großartige Technologie, um Software zu erstellen. Ich würde sagen, wir fangen direkt an und klären erst einmal die Frage, was denn überhaupt Flutter genau ist, bevor wir anfangen zu coden.

Stellen wir uns aber noch einmal die Frage: Was genau ist eigentlich Flutter? Flutter ist letztendlich einfach nur eine Technologie, um Apps zu schreiben. Das heißt, wir schreiben Quellcode auf unserem Computer und wandeln diesen dann um in eine App, die auf unserem Handy läuft. Was Flutter so besonders macht, ist, dass wir tatsächlich native Apps für alle möglichen Geräte erstellen können. Das heißt, wir schreiben eine Codebase und können damit Apps generieren, die im Webbrowser laufen, die auf Android-Telefonen laufen, auf iPhones laufen und so weiter. Man spart sich also sehr viel Entwicklungsaufwand, weil es sich hier um native Apps handelt, sind die Apps auch sehr, sehr schnell.

Flutter ist dabei keine Programmiersprache. Die Programmiersprache, die hier verwendet wird, heißt Dart. Das ist eine relativ moderne Programmiersprache, die im Auftrag von Google entwickelt wurde. Ziel ist es, eine moderne Alternative zu JavaScript zu schaffen. Der Code soll dabei mindestens genauso verständlich, wenn nicht noch ein klein bisschen einfacher sein. Hier sehen wir zum Beispiel, wie man "Hello World", also das simpelste Programm überhaupt, mit Dart schreibt. Werden wir also mit Flutter und Dart etwas schreiben, können wir den Code automatisch umwandeln in JavaScript-Code für iPhone-Apps, Kotlin-Code für Android-Apps und auch noch viel, viel mehr, beispielsweise in Java, in Objective-C und auch noch weitere Sprachen.

Die wichtigste Frage, bevor wir jetzt anfangen, lautet natürlich: Was brauchen wir, um zu starten? Na ja, vor allem brauchst du natürlich einen Computer, auf den du deinen Code schreiben kannst. Zusätzlich brauchst du natürlich ebenfalls ein Handy. Du kannst Flutter sowohl in Android-Code als auch in iPhone-Code umwandeln oder sogar einfach Applikationen für den Webbrowser starten. Dann brauchst du nicht mal ein Handy.

Damit das Ganze so funktioniert, brauchen wir allerdings noch eine Komponente mehr, die wir bis jetzt noch nicht betrachtet haben: jede Menge Software. Vor allem brauchen wir natürlich Flutter selbst. Das kann man einfach auf der Flutter-Homepage herunterladen. Keine Sorge, das machen wir gleich alles zusammen. Dann brauchen wir natürlich, weil Flutter nicht die Programmiersprache ist, die eine Programmiersprache: Dart. Das gute ist, wenn wir Flutter herunterladen und das installieren, dann ist Dart automatisch mit dabei und muss nicht noch zusätzlich installiert werden.

Dann brauchen wir noch eine Entwicklungsumgebung. Wenn du schon das ein oder andere Tutorial auf diesem Kanal gemacht hast, dann kannst du wahrscheinlich die ganz linke: Visual Studio Code. Damit kann man arbeiten, das ist möglich. Man kann aber auch mit Android Studio oder mit IntelliJ. Ich empfehle Android Studio, also das Ding in der Mitte hier. Wenn wir unsere App für Android exportieren wollen, dann brauchen wir auch noch das Android Software Development Kit, kurz Android SDK. Auch das werden wir hier gemeinsam installieren. Und dann brauchen wir, wenn wir das Ganze für Apple exportieren wollen, also für iPhones, auch noch das Programm Xcode. Das heißt, wenn du deine Apps für iPhones umwandeln möchtest, dann brauchst du unbedingt einen Computer von Apple. Ohne macOS wirst du deine App nämlich nicht für iPhones umwandeln können.

Ich würde sagen, wir fangen direkt an, alles hier zu installieren.

In diesem Abschnitt werden wir Flutter installieren. Was wir dafür machen müssen, ist einfach der Anleitung zu folgen. Flutter hat nämlich eine sehr, sehr gute Anleitung, was wir dafür alles brauchen, und die schauen wir uns jetzt einmal gemeinsam an. Dafür habe ich jetzt bei Google erst einmal nur "Flutter Getting Started" eingegeben, und wenn ich jetzt hier auf die Ergebnisse gehe, dann sehe ich auch gleich, dass hier "Install Flutter" steht. Da drücke ich drauf.

Und nun sehen wir, dass es hier verschiedene Betriebssysteme gibt, für die wir Flutter installieren können. Ich habe jetzt Windows in meinem Fall, deswegen drücke ich hier auf Windows. Wenn du Mac-Nutzer bist, dann solltest du natürlich auf macOS klicken. Wenn ich hier draufdrücke, dann sehe ich auch hier ist gleich eine schöne schriftliche Auflistung von den Sachen, die ich machen muss. Erstmal die Systemvoraussetzungen, die sollte jeder von uns, außer Computer aus der Steinzeit, erfüllt haben. Also Betriebssystem mindestens Windows 10 oder höher, also ich habe jetzt Windows 10, langsam switchen schon die ersten Windows 11, 1,6 GB Speicher und man sollte vielleicht noch sowas wie PowerShell 5.0 haben oder gibt keine Sorge, das ist also PowerShell ist garantiert schon vorinstalliert, wenn dein Computer neu genug ist.

Ansonsten fangen wir jetzt an und laden uns erst einmal Flutter herunter. Dafür klicken wir jetzt einfach hier drauf und dann wird das Ganze hier links unten auch schon runtergeladen. Das dauert ein klein bisschen, das sind 736 MB in dem Fall. Und so weit das Ganze fertig ist, kann man das nun installieren.

In der Zeit können wir uns auch schon den nächsten Schritt durchlesen und zwar müssen wir jetzt diesen ZIP-Ordner, den wir hier herunterladen, also ein gepackter Ordner, in einen Ordner auf unserer Festplatte kopieren. Bei Flutter ist es nämlich so, dass wir nicht einfach einen Setup haben, was wir so durchklicken können, wo wir immer auf "Weiter" klicken können, sondern wir müssen das Programm manuell installieren. Ist aber gar nicht schlimm, weil was dieses Setup macht, ist einfach nur, dass gewisse Dateien an einen gewissen Ort auf deinem Computer kopiert werden, und genau das gleiche werden wir jetzt auch gemeinsam machen. Anschließend muss man vielleicht noch ein paar kleine Sachen verlinken im Betriebssystem, Stichwort Umgebungsvariablen. Keine Sorge, wenn du noch nicht weißt, was das ist, das schauen wir uns jetzt einfach gemeinsam an.

Hier steht, wir sollten unseren ZIP-Ordner an einem Platz auf unserem Computer kopieren, auf der Festplatte zum Beispiel, und auf keinen Fall in C:\Programme. Das heißt, ich gehe jetzt einfach mal auf C: und dann gucke ich mal, ob ich den gleichen Ordner hier finde, der hier angegeben ist, nämlich C:\Users (auf Deutsch steht da einfach "Benutzer"), dann in meinen Nutzerordner, also hier in diesem Fall "Max Mustermann", und dann in "Dokumente" (hier steht auf Englisch "Documents", ist aber der gleiche Ordner). Wenn ich jetzt hier drin bin, dann soll hier mein Ordner rein entpackt werden. Das heißt, ich öffne jetzt diesen Ordner hier, den ich heruntergeladen habe, und den Inhalt dieses Ordners, den extrahiere ich mir in diesem C:\Dokumente-Ordner hier. Hierfür einfach Rechtsklick, dann auf "Kopieren" gehen und jetzt öffnen wir unseren Dokumente-Ordner, machen hier wieder Rechtsklick und gehen auf "Einfügen" und zack, wird das Ganze auch schon rüber kopiert. Das ist ein großer Ordner, also kann es auch ein bisschen dauern.

Während das Ganze entpackt, gucken wir uns schon mal den nächsten Schritt an. Hier steht, dass es noch eine Alternative gibt, das Ganze zu installieren. Das müssen wir allerdings nicht machen, wir haben ja schon den normalen Weg gemacht. Hier steht auch noch, dass wir unseren Pfad updaten sollen. Was bedeutet das jetzt wieder? Programme kann man ja normalerweise einfach mit einem Doppelklick öffnen. Manche Programme wollen wir allerdings auch über die Kommandozeile öffnen, so wie zum Beispiel Flutter. Das bedeutet, wenn ich jetzt bei Windows hier links unten "cmd" eingebe und dann auf Enter drücke, oder bei Mac-Nutzern halt auf Command und Leertaste und dann "Terminal" aufrufe, dann öffnet sich ja dieses Ding hier. Und wenn ich hier nun "flutter" eingebe, dann möchte ich, dass das Programm "flutter" gestartet wird. Hier steht jetzt aktuell noch der Befehl "flutter ist entweder falsch geschrieben oder konnte nicht gefunden werden". Deswegen müssen wir nun unseren Umgebungsvariablen dieses Programm erst einmal hinzufügen. Und das Programm, das ist ja das, was wir hier nun gerade extrahieren. Das heißt, sobald das Programm fertig extrahiert ist, können wir dieses Programm nun mit unseren Umgebungsvariablen verlinken, um es über die Kommandozeile aufzurufen.

Das heißt, ich öffne die Umgebungsvariablen bei Windows, indem ich hier "Umgebungsvariablen" einfach eintippe und dann steht hier schon "Systemumgebungsvariablen bearbeiten". Ich da drauf gehen und dann auf "Umgebungsvariablen" hier klicken. Dann sehen wir hier bei den Benutzer-Variablen eine Variable namens "Path". Und hier steht nun, dass wir den Pfad zum Flutter-Ordner und zum Unterordner "bin" dort hinzufügen müssen. Bedeutet, im Flutter-Ordner ist ein Unterordner namens "bin", und den Link zu diesem Ordner, also das, was hier oben drin steht, das müssen wir nun unseren Umgebungsvariablen hinzufügen. Also gehe ich hier drauf, gehe dann auf "Path" und dann füge ich, indem ich hier auf "Bearbeiten" gehe, hier unten eine neue Zeile hinzu. Doppelklick rein und füge hier den Pfad ein. Enter, dann hier auf "OK", "OK" und auch "OK". Und damit ist das Ganze nun gespeichert.

Wenn ich hier ist ein bisschen runter gehe, dann sehen wir hier unten, dass man nun Flutter so aufrufen kann. Das bedeutet, ich kann hier ist beispielsweise "cmd" eingeben und dann einfach "flutter doctor" schreiben. Wenn ich das mache, dann wird mir gezeigt, was denn schon funktioniert und wo es vielleicht noch Probleme gibt, das vielleicht zum Beispiel bei der Installation noch fehlt. Hier steht nun, was auf meinem Computer schon richtig ist und was noch fehlt. Flutter ist installiert, Chrome haben wir auch. Wenn du das nicht hast, dann solltest du unbedingt den Chrome-Browser installieren. IntelliJ ist auch ein Programm, was installiert sein sollte. Wenn du das noch nicht hast, einfach googeln nach "IntelliJ", dann das Ganze herunterladen von JetBrains, einfach hier auf "Herunterladen" gehen und dann hast du das auch installiert. Dann Visual Studio Code ist ebenfalls ein Programm, was wir brauchen. Dafür suchst du einfach nach "VS Code". Das ist ein weiterer Code-Editor. Du kannst nämlich den Code sowohl mit Visual Studio Code schreiben als auch mit IntelliJ. Das macht keinen großen Unterschied.

Und was ist noch empfohlen wird, ist, dass Android Studio installiert ist. Das ist ein Ausrufezeichen, das heißt, es braucht man nicht unbedingt, aber es wird empfohlen. Und vor allen Dingen ist es so, dass wenn wir Android Studio installieren, das dann hier auch schon einige Android-Tools mitbringt, wie zum Beispiel diese Toolchain hier, und die brauchen wir auf jeden Fall auch. Also installieren wir hier ist einfach mal. Hier steht auch "Install Android Studio from" diesem Pfad hier. Also kopiere ich mit diesem Pfad hier und gebe dem oben einfach mal in meinem Webbrowser ein. Auf der Seite von Android Studio laden wir das Ganze einfach mal herunter und akzeptieren hier noch die Lizenzvereinbarungen und drücken auf "Herunterladen".

Letztendlich müssen wir einfach solange die Programme installieren, dass wir hier kein Fehler mehr haben. Das heißt, es über ein grünes ist, dann sind wir auf jeden Fall auf der sicheren Seite.

In diesem Abschnitt schauen wir uns noch einmal kurz an, was du machen musst, wenn du einen Mac-Computer hast. Dann musst du nämlich bei der Installation vielleicht die ein oder andere Sache ein bisschen anders machen. Wenn wir suchen nach "Flutter Getting Started", dann gibt es hier auch eine extra Anleitung für Mac. Ja, die hat man auch eben am Anfang gesehen, da musste man ja auswählen, ob man jetzt Windows oder Mac-Nutzer ist. Steht wieder ein bisschen was über System Requirements. Ja, dann Mac sollte nicht aus dem letzten Jahrhundert kommen, sondern vielleicht eher so maximal drei, vier Jahre alt sein. Und dann steht hier auch schon, dass du ebenfalls dieses Flutter SDK herunterladen musst.

Während du das Ganze Ding herunterlädst, musst du nun ein bisschen Kram in deinem Terminal machen. Das öffnest du, indem du Command und Space drückst und dann hier einfach mal nach "Terminal" suchst, dann auf Enter. Und dann öffnet sich hier so ein Ding, womit du dich jetzt durch deine einzelnen Ordner klicken kannst. Wenn du hier zum Beispiel "pwd" eingibst, dann siehst du, in welchem Ordner du dich gerade befindest, nämlich im Ordner "Users" und dann im Unterordner "Max Mustermann". Wenn ich hier "ls -lr" eingebe und dann auf Enter gehe, dann sehe ich übrigens alle Ordner, die sich in meinem Ordner "Max Mustermann" befinden. Ja, und hier gibt es unter anderem auch einen Ordner namens "Downloads". Wenn ich in den Download-Ordner rein gehen möchte, dann drücke ich "cd" und Leerzeichen und sage jetzt "Downloads". Ich kann ja auch nur "D" schreiben und auf Tab drücken, dann wird das automatisch vervollständigt. Hier gibt es jetzt zwei Ordner, die mit den Anfängen. Ich sage jetzt "Dow", dann bin ich auf der sicheren Seite und drücke auf Tab.

Soweit ich hier bin, bin ich nun in meinem Download-Ordner. Jetzt müssen wir natürlich erst einmal warten, bis der Download hier abgeschlossen ist. Nachdem ein Download abgeschlossen ist, kann ich nun hier links unten auf "Finder" drücken und in den Download-Ordner reinschauen. Und hier steht nun ein Flutter-Ordner. Den hat jetzt mein Betriebssystem schon automatisch für mich entpackt. Wenn das nicht der Fall ist, da musst du diese ZIP hier noch entpacken. Ich denke, das kriegst du hin. Genau. Und nachdem das Ganze Ding entpackt ist, das muss man auch nicht so wie hier über die Kommandozeile machen, sondern kann man direkt machen, würde ich dieses ganze Ding hier noch in den Ordner verschieben, wo ich das Ganze denn später mal installiert haben möchte und es nicht im Download-Ordner lassen. Dafür kann ich das einfach nehmen und hier rüberziehen in "Documents" zum Beispiel, oder halt den Ordner bis reinpacken, wo ich sage, es ist im Dokument. Ich könnte auch hier in "Applications" gehen. Ich bin kein Mac-Nutzer und im Dokument weiß ich auf jeden Fall, wie ich diesen Ordner über die Kommandos hier finden kann, weil das brauchen wir jetzt.

Wir müssen nämlich jetzt das Ganze so, wie wir es in Windows auch gemacht haben, zu unseren Umgebungsvariablen hinzufügen. Das Ganze klappt nicht so mit diesen grafischen Interface, wie wir das bei Windows hatten, sondern wir brauchen hier diese Zeile. Ist auch gar nicht so schwer. Also letztendlich müssen wir diese Zeile einfach nur kopieren. Ja, Rechtsklick und "Copy".

Also nachdem wir die Zeile kopiert haben, müssen wir nun erstmal gucken, in welchem Ordner wir uns hier gerade in der Kommandozeile befinden. Dafür tippen wir "pwd" ein und wir sehen, wir sind im Ordner "Users/Max Mustermann", also meinem Ordner, in dem ja auch dieser "Documents"-Ordner drin ist. Das heißt, wenn ich jetzt hier "cd Documents" sage und Enter und dann erneut "pwd" eingebe, dann sehen wir, dass wir hier im Ordner "Users/Max Mustermann/Documents" sind. Okay.

Nachdem wir das Ganze geschafft haben, müssen wir nun diese Zeile, die wir hier kopiert haben, einfügen mit Command & V. Was wir nun allerdings machen müssen, ist hier nichts mehr ändern. Das ist das Gute. Dadurch, dass wir vorher in den Ordner gegangen sind, "pwd" gibt ja einfach den aktuellen Ordner an, und wir fügen jetzt hier eine Umgebungsvariable hinzu. Das brauchen wir, damit für Flutter immer verwenden können von unserer Kommandozeile.

Nachdem wir Flutter hinzugefügt haben, können wir also auf die gesamte Funktionalität zugreifen. Wir sagen, dass Flutter sich an folgendem Ort befindet: "pwd" also der aktuelle Ordner, "flutter", ja, hier, "flutter", und drin in dem Ordner "bin", dass das ganze ausführbare Zeug. Ich drücke auf Enter und registriere das Ganze. Und jetzt müsste ich hier "flutter" eingeben können in die Kommandozeile. Und jetzt muss ich hier noch bestätigen, dass ich das Ganze wirklich will. Und wir sehen, dass ich Flutter hier nun über die Kommandozeile aufrufen kann. Dauert einen kleinen Moment und dann sehen wir hier dieses Zeug. Und dort können wir nun verschiedene Tools aufrufen, wie beispielsweise den "flutter doctor".

Neben Flutter muss man nämlich noch jede Menge andere Programme installieren und dieser "flutter doctor" sagt uns, was bereits installiert ist und was noch fehlt. Ja, das heißt, ich nehme hier, dass hier alles einfüge und das jetzt ausführe, dann sehen wir ganz genau nach dem, das Ganze hier durchgelaufen ist, was für Software uns noch fehlt. Wir sind durch. Wir haben Chrome bereits installiert. Android Studio noch nichts, sollte aber gemacht werden. Ein Gerät ist bereits verfügbar, ein und zwar unser Webbrowser. Wahrscheinlich mein Handy ist nicht angeschlossen, das brauchen wir. Und hier oben gibt es noch ein paar Sachen, die fehlen. Das heißt, du musst nun alle Software, die hier aufgelistet ist, installieren und immer wieder "flutter doctor" durchlaufen lassen, so lange, bis das Ganze klappt.

Du brauchst Android Studio, damit du diese ganze Android-Toolchain am einfachsten installieren kannst. Das gucken wir uns im nächsten Abschnitt an. Das ist nämlich bei Windows genauso. Ansonsten gibt es hier noch Xcode. Solltest du auch unbedingt installieren, gerade wenn du das Ganze auf dem iPhone haben möchtest und auch sonst brauchst du das, sonst würde hier keine Xcode stehen. Xcode ist immer, das ist auf keinen Fall ohne geht. Und Ausrufezeichen heißt, es würde irgendwie ohne gehen, aber mit ist wahrscheinlich leichter. Okay, also Xcode, wie kannst du das installieren? Dafür musst du in den App Store hier gehen. Du gehst hier auf "Search" und suchst nach "Xcode". Hier steht auch schon da. Drückst du aber auch "Get" und auf "Install". Sobald dann installiert ist, hast du diese Fehlermeldung nicht mehr.

Wichtig ist, dafür brauchst du eine aktuelle macOS-Version. Ich glaube, 11.3 oder so brauchst du mindestens, schlag mich nicht tot, ich bin kein Experte. Und danach ist dieser Pfad hier weg. Und Android Studio gucken wir uns, wie gesagt, im nächsten Abschnitt an. Danach sollte ich auch alles laufen. Ja, wenn du noch kein Chrome installiert hast, einfach bei Google "Chrome Download" eingeben und sich das runterladen. Das solltest du hinkriegen. Und dann kannst du auch schon loslegen.

Wenn du ein Android-Phone hast, ist die Entwicklung ein bisschen leichter. Bei iPhone musst du noch in den Entwickler-Einstellungen so ein paar Sachen freischalten. Dort empfehle ich dir, einfach schnell zu googeln, ja, "USB Debugging" oder sowas, und da gibt es auch eine ganz easy Anleitung. Aber für die sonst erst mal empfehlen ist, einfach indem Emulator zu machen. Das ist ein klein bisschen einfacher nochmal. Und für Android, da zeigen wir auch gleich noch mal, wie das Ganze funktioniert. Aber wie gesagt, wenn du das ganze googelst, ja, dann kannst du hier gleich so aus erste Ergebnis zum Beispiel drücken und da steht dann, dass du natürlich Xcode herunterladen musst, das musste schon gemacht. Dann musst du dich hier mit einer Apple ID einloggen. Dann musst du hier noch ein paar Sachen extra herunterladen und so ja, das heißt, muss hier noch ein paar kleine Änderungen machen. iTunes und so weiter steht hier, aber eigentlich ganz gut beschrieben. Und nachdem du das Ganze gemacht hast, kannst du das auch auf deinem iPhone laufen lassen. Aber wie gesagt, gerade am Anfang würde ich dir erst einmal empfehlen, den Emulator zu verwenden.

Das Setup von Android Studio ist eigentlich auch genauso wie die anderen. Wir drücken hier auf "Next" und wählen hier alles aus, auf "Next", dann wieder auf "Weiter" und so weiter und so fort. Hier wieder auf "Weiter" und wir können jetzt Android Studio hier gleich starten. Wenn wir Android Studio das erste Mal starten, drücken wir hier auf "OK" und lassen das Ganze hier noch mal laden. Hier werden wir noch gefragt, ob wir Statistiken senden wollen. Ich sage mal "Nein" und dann sind wir auch schon fertig. Ist gleich noch irgendein Plugin, das können wir von mir aus gleich updaten, warum nicht. Kotlin könnten wir gebrauchen. Lass das Ganze hier im Hintergrund laufen, indem ich auf "Background" drücke und dann gehe ich einfach mal auf "Next" und hier einfach wieder auf "Next". Da können wir einfach die Standard-Sachen installieren. Hier können wir uns noch ein Design aussuchen, entweder das ist so Hacker-mäßig dunkel aussieht oder das ist ganz normal hell aussieht. Ich entscheide mich für die dunkle Umgebung und gehe wieder auf "Next".

Und jetzt sehen wir hier, dass hier jede Menge Zeug heruntergeladen wird, unter anderem das Android SDK, also das Software Development Kit für Android-Applikationen. Und wenn wir hier reingucken, dann sehen wir auch hier, dass hier irgendetwas steht mit "Android SDK" und deswegen sollten wir auch hier dieses Android Studio herunterladen. Das installiert uns nämlich diese Software Development Kit, was wir definitiv brauchen. Ich drücke also hier auf "Finish" und jetzt heißt es mal wieder abwarten und Sachen installieren lassen. Und hier werden wir gefragt, ob wir irgendwelche Background-Tasks noch mal stoppen möchten. Also gehen wir da mal lieber auf "Cancel" und hier auf "Details". Dann sehen wir noch ein bisschen mehr.

Wenn du Android Studio so geöffnet hast, dann gehe ich hier oben noch einmal auch "File" und gehe doch mal auf "Close Project". Dann kommen nämlich wieder zu diesem Übersichts-Screen. Und es gibt eine Sache, die ich noch empfehlen würde zu installieren und zwar ein Plugin, was uns hilft, Flutter besser zu schreiben. Da unten steht auch schon "Flutter". Wenn nicht, dann kann es hier oben einfach suchen. Und ich drücke jetzt hier auf "Install". Da muss ich hier natürlich noch akzeptieren, dass ich das Ganze auch will. Und dann steht hier, dass Dart-Plugin mit installiert wird. Ja, das will ich auch. Das Ganze hilft uns bei der Entwicklung später noch mal ungemein.

Soweit das Ganze fertig ist, müssen wir unsere Entwicklungsumgebung, also die IDE, noch einmal neu starten, indem wir hier draufdrücken und da sagen wir auch "OK". Und anschließend sind die Plugins auch schon installiert. Und nun sehen wir eine Änderung an unserer Entwicklungsumgebung und zwar ist hier nun ein neuer Button und hier steht "New Flutter Project". Also können wir jetzt, wenn wir hier draufgehen, auch ein Flutter-Projekt anlegen. Wir kümmern uns jetzt erstmal noch um die Installation beim Mac und ein virtuelles Device und dann legen wir unser Flutter-Projekt an.

In diesem Abschnitt wollen wir nun unsere erste Applikation anlegen und wir haben schon sehr viel Vorarbeit geleistet, deswegen geht das jetzt auch ganz einfach. Alles, was wir machen müssen, ist letztendlich hier auf "New Flutter Project" zu drücken. Sobald wir dort draufdrücken, kommt nun hier dieses Ding hier. An der linken Seite müssen wir Flutter auswählen und dann müssen wir hier noch den Pfad zu unserem Software Development Kit anlegen, also das Ding, was wir eben installiert haben. Das Ganze ist bei mir schon ausgewählt. Ich gehe hier auf C:\Users\mein Benutzername, dann auf "Dokuments" und dann hier auf den Ordner "Flutter", das ist der, den wir heruntergeladen haben und dorthin kopiert haben. Ich drücke auf "OK" und gehe auf "Next".

Hier muss ich jetzt sagen, wie mein Projekt heißt. Wir wollen ja eine Gesundheitsapplikation machen und ich nenne die jetzt einfach mal "Stay_Healthy". Wichtig ist, der Projektname darf keine Großbuchstaben enthalten und hier sollte ein Unterstrich sein, um die Wörter zu trennen. Dann gebe ich hier noch meine Projekt-Location ein. Das kann man eigentlich speichern, wo man will. Ich habe meine ganzen Projekte auf C:\YouTube\Flutter\. Und dann kann ich hier noch das Ganze beschreiben, zum Beispiel in "Health Tracking App".

Nachdem ich das Ganze gemacht habe, kann ich hier jetzt noch einen Project Type auswählen und zwar "Application". Man könnte ja auch "Plugins", "Pages" oder "Module" machen. Das sind letztendlich einfach Sachen, um Code zu schreiben, die man in anderen Applikationen verwendet. Das Ganze brauchen wir allerdings nicht. Und dann kann ich mir jetzt hier noch eine Organisation setzen. Das ist einfach sowas wie meine Domain, nur umgedreht. In diesem Fall würde ich jetzt die von meiner Firma nehmen, also "com.dev.academy". Wenn du jetzt keine Domain hast oder sowas, dann schreibst du einfach hier irgendwas rein. Die Domain muss nicht wirklich existieren. Hier können wir noch die Sprache bestimmen. Android-Apps kann man mit Java oder bei Kotlin machen. Kotlin ist moderner, also nehmen wir das. iOS-Apps kann man mit Objective-C oder mit Swift machen. Wir wählen Swift, das ist ebenfalls moderner. Außerdem kann man hier noch sagen, was für eine Plattform anhaben und wir wollen das Ganze für Android, für iOS, also iPhone, und auch für den Webbrowser erstellt. Allerdings jetzt nicht für Linux, macOS oder Windows. Das müssen wir jetzt nicht unbedingt anhaken. Und hier unten könnte man noch weitere Settings einstellen. Das passt allerdings auch alles. Das Format oder jetzt irgendwelche Pfade, wo irgendwelche Module gespeichert werden müssen, wir müssen wir jetzt nicht mehr ändern. Ich drücke jetzt einfach auf "Finish".

Nun wird unser neues Projekt erstellt und das Ganze dauert schon eine ganze Weile, dadurch, dass hier verschiedene Sachen im Hintergrund heruntergeladen und installiert werden müssen. Das heißt, bis das Ganze fertig ist, müssen wir einfach uns noch ein bisschen gedulden.

Soweit hier alles fertig geladen ist, sieht das dann so aus. Wir haben hier auf der linken Seite jede Menge Ordner und Dateien, die wir sehen können und hier noch jede Menge Tools drumherum. Schauen wir uns erstmal die Dateien an. Das allerwichtigste, was wir brauchen, ist dieser "lib"-Ordner. Dort befindet sich eine Datei drin, die heißt "main.dart". Wir schreiben ja mit der Programmiersprache Dart und hier ist bereits unsere erste Test-Applikation drin. Das ist eine Sprache, die es eigentlich ziemlich intuitiv, wenn man schon die ein oder andere Programmiersprache geschrieben hat. Es ist ja so auch das Ziel gewesen, damit ein modernes JavaScript zu schaffen und so diese typischen Wörter wie "void" oder "var" oder "class" oder "const" oder sowas, die kennt man auch aus anderen Programmiersprachen, wie beispielsweise JavaScript. Ich kann auf jeden Fall versichern, dass man diese ganze Syntax hier, wenn wir gleich mit einer neuen Applikation anfangen, sehr schnell verstehen wird. Also in diesen "lib"-Ordner, dort kommt auf jeden Fall unser Code rein.

Ansonsten sehen wir hier noch ein Ordner, der heißt "ios" und ein Ordner, der heißt "android". Diese Ordner sind tatsächlich komplette Android- oder iOS-Projekte, die man auch so noch mal für sich theoretisch öffnen kann, weil alles, was Flutter macht, ist ja, dass unser Code umgewandelt wird in ein echtes Android-Projekt oder ein echtes iOS-Projekt. Wir müssen diese beiden Ordner nur sehr selten anfassen in der echten Entwicklung, weil wir natürlich alles mit Dart und mit Flutter programmieren. Allerdings sieht man hier auch immer, was für ein Code daraus generiert wird.

In diesem "pub"-Ordnern hier oben, da ist nur ein bisschen Konfiguration drin. Dieser ".idea"-Ordner ist zum Beispiel von unserer Entwicklungsumgebung. Ansonsten gibt es hier unten noch verschiedene Sachen, wie beispielsweise "pubspec.yaml". Besonders interessant ist auch dieses "pubspec.yaml" hier. Hier stehen verschiedene Packages drin, die in unserer Applikation installiert werden und auch ein paar weitere Informationen über unsere Applikation. Das Ganze ist für Leute, die zum Beispiel bereits mit JavaScript entwickelt haben, zu vergleichen mit der "package.json". Die anderen Dateien müssen wir nicht wirklich anfassen. In der "README" stehen noch mal ein paar allgemeine Informationen und ansonsten gibt es hier noch so ein paar weitere Konfigurationsdateien. Und im "web" da befindet sich generierter HTML, CSS, JavaScript-Code und so weiter.

Der natürlich ebenfalls generiert wird, den können wir dann immer verwenden, werden wir unsere Applikation im Webbrowser öffnen wollen. Wenn wir unsere Applikation starten wollen, dann können wir hier oben sagen, auf welchem Gerät wir das Ganze starten wollen. Da gibt es jetzt erstmal nur Chrome und Edge, also nur zwei Webbrowser, weil unser Handy das ist aktuell nicht angeschlossen und wir haben auch kein virtuelles Device, was läuft. Das können wir allerdings schnell starten, indem wir auf Tools gehen und dann auf Android Virtual Device Manager und dort können wir unser Pixel 4, das im letzten Abschnitt installiert haben, einfach starten. Hier kommt auch so ein kleiner Fehler, da drücken wir einfach auf OK und der muss uns erstmal nicht weiter interessieren. HDB, das ist die sogenannte Android Debug Bridge, das brauchen wir jetzt aktuell noch nicht, aber wenn uns das Ganze noch zum Problem wird, kann man diese Fehlermeldung ganz schnell googeln und findet da sicherlich eine Lösung.

So, unser Handy ist jetzt da und das Coole ist, nach einigen Refreshes hier sehen wir unser Gerät. Wenn du das Ganze noch nicht siehst, keine Sorge, das kann einfach manchmal ein bisschen dauern. Man muss öfter aktualisieren, vielleicht sogar das ganze Programm neu starten. Ich kann das hier auch noch nicht auswählen, sondern ich kriege hier noch so eine Fehlermeldung. Eine Sache müssen wir es noch mal anpassen und zwar müssen wir hier auf Project Structure gehen und hier müssen wir auch noch unser SDK auswählen, also unser Android Software Development Kit, die Version 31 und ich drücke auf OK. Und es kann sein, dass wir hier es noch einmal unser Android Studio neu starten müssen. Sobald das Ganze neu gestartet ist, werden wir jetzt hier erneut unser Gerät aus und sehen, wie sich hier unser Emulator eröffnet und nun kann ich das Ganze hier auch auswählen. Wenn das Ganze bei dir immer noch nicht gehen sollte, dann kann ich noch empfehlen, mal auf Tools zu gehen und hier auf AVD Manager hier auf und dann einmal auf Wipe Data, um das Gerät zurückzusetzen. Das hilft auch häufig. Wunderbar.

Gut, wir haben das Ganze ist geschafft. Ich drücke hier einmal auf Play und wir sehen hier, wie unser Projekt gestartet wird. Das Ganze hat jetzt ein klein bisschen gedauert beim ersten Mal, aber wir haben es fertig installiert und die App sieht jetzt so aus. Das hier ist einfach eine Demo App. Hier kann man jetzt auf dem Bildschirm drücken und jedes Mal, wenn man auf den Plus-Button hier drauf drückt, wird die Zahl um eins erhöht. Viel mehr kann die App hier noch nicht machen. Alles, was wir hier sehen, ist in dieser main.dart Datei geschrieben und zwar müssen wir dieses Ganze diesen riesigen Code hier erst einmal von oben nach unten lesen. So ähnlich wie bei Java ist das hier oben immer das allererste, was ausgeführt wird, eine main Funktion und in dieser main Funktion, da steht jetzt eine einzige Funktion, die ausgeführt wird und zwar runApp. Das Ganze kommt von Flutter und was wir hier reinschreiben, ist nun eine sogenannte Klasse, die neu erstellt wird. Klassen sind ein Konzept aus der Objektorientierung. Letztendlich bedeutet es in diesem Zusammenhang einfach nur, dass wir uns Funktionalitäten aus einer Library von Flutter holen, in diesem Fall StatelessWidget. Hierfür müssen wir erst einmal verstehen, was Widgets überhaupt sind und das Ganze schauen wir uns jetzt einmal im nächsten Abschnitt an.

Wenn wir eine App mit Flutter entwickeln, dann arbeiten wir immer mit sogenannten Widgets. Ein Widget kannst du dir wie folgt vorstellen: Wenn wir eine App programmieren wollen, dann gibt es in dieser App natürlich verschiedene Komponenten. Es gibt zum Beispiel ein Header ganz oben, ein Footer ganz unten und dann noch jede Menge einzelne Komponenten. Jede dieser Komponenten ist ein Widget. Dabei ist das Ganze so wie ein Baum aufgebaut, das heißt, wir haben erst einmal ganz oben in unserer App, was wir als erstes ausführen, Befehl namens runApp. In den Klammern wird dann geschrieben, welches Widget wir als erstes in unserer App einbinden wollen. In unserem Fall hieß das Ganze MyApp. Schauen wir uns mal den Code dazu an. Zuerst einmal wird dieser Bereich als allererstes in unserer App ausgeführt. Hier haben wir einfach eine main Funktion und diese wird als erstes gestartet. In dieser main Funktion sagen wir, dass das Widget MyApp als erstes gestartet wird, ein Widget, was wir ein paar Zeilen später selber definiert haben. Hier steht einmal das Wort class und danach MyApp ist der Name von Widget und kann von uns frei gewählt werden. Danach steht hier noch so Zeug wie extends StatelessWidget, darunter noch eine Zeile, die immer automatisch generiert wird, die wir auch noch genau wie diese StatelessWidget im nächsten Abschnitt noch mal ein bisschen genauer angucken. Und danach steht dort unten noch @override und build. Dieses Build, was dort unten steht, bedeutet, dass wir hier nun unser Widget bauen können. Das hier sagen wir nun, was in unser Widget reinkommt. Wir müssen Widgets nicht immer selber schreiben, sondern Flutter gibt uns auch schon viele fertige Widgets mit. Deswegen sagen wir jetzt auch, dass hier in unser Haupt-Widget ein Widget von Flutter rein kommt, nämlich MaterialApp. MaterialApp bedeutet, dass wir in unserer App Material Design verwenden können, das Design Framework von Google. Das bedeutet, dass unser Hintergrund zum Beispiel gleich eine Farbe bekommt, dass unsere Pullover oben zum Beispiel dieses hübsche Blau bekommt und dass wir einfach verschiedene diese ein Komponenten vom Material Design von Google verwenden können. Diese Toolbar, die es noch nicht dabei, vom Kopf her sieht das Ganze dann in etwa so aus. Hier steht als nächstes return MaterialApp, also wir geben aus unserer Build Methode eine MaterialApp heraus. Dieser hat einen Titel, den wir frei bestimmen, nämlich Flutter Demo und ein Theme. Es gibt nämlich verschiedene Themes, also verschiedene Farbpaletten und wir wären in diesem Fall die blaue Farbpaletten. Man kann diese Farben natürlich auch selbst bestimmen und sich sein eigenes Theme erstellen. Wir arbeiten jetzt aber erstmal mit dem Standard. Dann gibt es hier noch einen Abschnitt namens home und da sagen wir, was von dieser MaterialApp nun das Haupt-Widget ist, was wir dort einbinden wollen, nämlich ein Widget namens MyHomePage. Wir sehen schon, das Ganze ist wie ein Baum aufgebaut und ein Widget bindet immer das nächste Widget oder auch mehrere nächste Widgets untereinander ein. In dieser MaterialApp haben wir erst einmal nur etwas Konfiguration gemacht. Diese Toolbar, diese blaue da oben, die ist noch nicht dabei, die kommt ein bisschen später ins Spiel. Die MaterialApp findet jetzt also wieder bei MyHomePage ein, ein Widget, was wir in diesem Fall wieder komplett selbst geschrieben haben und wir übergeben eine Variable namens title. Diese Variable hat den Wert Flutter Demo Homepage. Das bedeutet, dass wir nun eine Variable in dem nächsten Widget zur Verfügung haben. Das Ganze ist ein String, das bedeutet einen Text und diese Variable heißt page und hat den Wert Flutter Demo Homepage, also eine Variable, die wir nun frei verwenden können, um beispielsweise sagen können, dass dieser Text nun oben in unserer Toolbar, die wir etwas später definieren, anzeigen können. Außerdem steht hier noch etwas von einem State und createState und sowas, das schauen wir uns noch einmal im nächsten Abschnitt im Detail an.

In diesem Abschnitt geht es also um StatefulWidget, StatelessWidget. Letztendlich sieht ein Widget ja meistens so hier aus und da gibt es nun in unserem Code ganz ganz viele Sachen, die wir erst einmal verstehen müssen. Fangen wir an mit dem Wort class. Hast du noch nicht weißt, was Objektorientierung ist, dann sei so viel gesagt, um das Ganze ganz einfach zusammenzufassen, eine Klasse ist letztendlich einfach eine Sammlung an Variablen und Funktionen, die zueinander gehören. Stell dir zum Beispiel die Klasse Auto vor. Wenn du ein Auto implementieren möchtest in deinem Quellcode, dann hat dieses Auto verschiedene Funktionalitäten. Es kann beispielsweise fahren, es kann einen unterschiedlichen Gang einlegen, es kann nach links blinken, es kann nach rechts blinken, es hat einen Warnblinker und auch noch viele viele weitere Funktionalitäten. All diese Funktionalitäten würden wir in einem Programm in einer Klasse definieren. Außerdem hat ein Auto natürlich auch noch viele Eigenschaften, zum Beispiel wie viele Leute da drin sitzen können, wie schnell es maximal fahren kann oder wie viele Räder es hat oder wie viele Türen es hat. Diese Eigenschaften werden ebenfalls in der Klasse gespeichert. Das ist einfach ein Konzept in der Programmierung, um Informationen, die zusammen gehören, zusammen zu bündeln. Außerdem haben wir hier in Zeile 8 noch diesen komplizierten Code. Zunächst einmal, keine Sorge, dieser Code ist immer genau gleich und moderne Entwicklungsumgebungen können diesen Code auch automatisch generieren. Letztendlich ist das Ganze hier ein sogenannter Konstruktor. Ein Konstruktor wird immer gebraucht, so weit wir ein Widget erstellen. Wir brauchen ihn zum Beispiel dafür, um in diesem Konstruktor verschiedene Variablen übergeben zu können. Das heißt, wenn jetzt beispielsweise ein übergeordnetes Widget Informationen hat, dann können wir diese Informationen durch solch einen Konstruktor an das nächste Widget übergeben. Keine Sorge, in der Praxis wird das Ganze dann ganz schnell sehr klar.

Dann gibt es hier unten noch diese Zeile 12. Hier steht Widget build, BuildContext und so weiter. Diese Zeile brauchen wir, um unser Widget zu bauen. Das heißt, wir müssen ja irgendwie immer definieren, was in unserem Widget drin ist, zum Beispiel eine Hintergrundfarbe, ein Button und so weiter und so fort. Dort rein wird nun noch eine Variable namens context rein gegeben und da vorschreiben wir das Wort BuildContext, um zu sagen, dass die Variable context vom Typen BuildContext ist. Wie gesagt, diese Begriffe stammen aus der Objektorientierung. Solange du ein bisschen mit Flutter entwickelst, wird das Ganze klar. Ein Context definiert, wie das Wort schon sagt, Informationen über den Kontext unseres Widgets. Das heißt, wo es auf unserer App eingesetzt ist, was das übergeordnete und was das nachfolgende Widget ist und noch ein paar weitere Informationen dieser Art.

Dann haben wir die wichtigste Information rechts oben: StatelessWidget. Widgets sehen immer entweder wie das erste hier aus oder wie das zweite. Da steht immer extends StatelessWidget oder extends StatefulWidget und hier rechts steht auch schon, was der Unterschied ist. Bei einem StatelessWidget haben wir Informationen, die sich nicht verändern. Das heißt, wenn wir einen Text anzeigen wollen, der sich nie verändert, dann verwenden wir ein StatelessWidget. Wenn wir hingegen Informationen haben, die sich verändern sollen, das heißt zum Beispiel, wir drücken einen Button und dann wird ein Counter nach oben gezählt, wie in unserer Demo App, dann brauchen wir dafür ein StatefulWidget, also ein Widget, was einen sogenannten State hat, der sich immer verändern kann, also ein Status, der upgedated werden kann. In diesem Fall einfach eine Zahl, die immer durch eine andere Zahl ersetzt wird. Deswegen steht hier auch in Zeile 29 jetzt nicht build, sondern createState. Wir haben hier immer einen anderen Status und der wird upgedated. Das definieren wir in einer neuen Klasse, die so aussieht. Wir definieren uns hier eine Variable namens counter, die hat den Wert null und sie startet mit einem Unterstrich, was heißt, dass sie nur innerhalb von diesem Widget hier, innerhalb dieser Klasse verfügbar ist. Und es gibt eine Funktion, die den Status update und die Variable um eins erhöht. Dieses _counter++ erhöht die Variable um eins. Dieses setState, was darüber gesetzt ist, das sorgt dafür, dass unsere View upgedatet wird. Das heißt, dass sich nicht nur die Variable ändert, sondern dass wir dann auch unsere App neu ändern und die Änderung dieser Variable sehen können.

In diesem Abschnitt schauen wir uns noch einmal das Grundgerüst an. Das bedeutet, wir haben ja hier jede Menge verschiedene Widgets, durch die wir jetzt durchgegangen sind. Ich nehme diese Kommentare hier raus. Ja, das sind einfach hier so immer zwei Querstriche, damit kann man hier irgendeinen Text reinschreiben, den man nicht wirklich braucht, der nur zur Dokumentation und damit man das Ganze besser versteht. Und wir haben uns hier bereits hier von oben nach unten durchgehandelt. Wir wissen, dass das jetzt erstes ausgeführt wird, dann wird dieses Widget aufgerufen, das hier bindet das MaterialApp Widget rein, dann wird das MyHomePage Widget eingebunden. Wir gehen hier weiter runter und hier wird nun ein State aufgerufen, also einfach ein Teilstatus von unserem Widget hier oben und hier unten ist nun unsere erste Funktion und dann ist hier unten noch ein gigantisches Widget, was hier eingebunden ist und das ist eigentlich eine Sammlung aus verschiedenen Widgets. Zunächst einmal, das hier kennt ihr bereits, das ist die Build Funktion. Das heißt, das hier heißt einfach nur, dass gesagt wird, was denn jetzt in diesem State, also in diesem Unterricht, so kann man sagen, von dem Widget hier oben drin ist. Und hier ist nun erst einmal ein Scaffold drin. Das hier ist einfach das absolute Grundgerüst. Das heißt, alles, was zwischen der Klammer hier ist, die hier aufgeht und hier unten, das ist zum Glück markiert, zugeht, dass dazwischen ist unser Grundgerüst von unserer App und dieses Scaffold können wir nun verschiedene Sachen geben. Ja, man sieht, dass hier, man fügt immer in einer neuen Zeile verschiedene Parameter hinzu, die jetzt hier alle schon stehen, beispielsweise eine AppBar, eine AppBar, wenn wir das Ganze ausführen, dann sehen wir, dass das ist einfach diese blaue Leiste, die oben ist und wo der Titel angezeigt wird. Und hier geben wir jetzt auch in diese AppBar einen Text rein. Das heißt, unsere App, die kann einen Titel empfangen und der Titel unserer AppBar, das soll ein weiteres Widget sein, namens Text. Also, wir sehen schon, das Ganze hier ist eine Handlung aus sehr, sehr vielen Widgets. Unser Scaffold kann nämlich mehrere Widgets nehmen, ein Widget namens AppBar, ein namens Body, ein namens Floating Action Button und das war's. Die AppBar ist ein Widget, was immer ganz oben angezeigt wird. Der Body offensichtlich ein Widget, was in der Mitte angezeigt wird und ein Floating Action Button, das ist einfach ein Element, was rechts unten zum Beispiel angezeigt wird, halt einfach ein Platz für einen runden Button zum Beispiel. Diese drei Widgets hier, die sind auch immer hinter dem Doppelpunkt angegeben. Das heißt, unser AppBar Widget bekommt ein Widget namens AppBar und dieses bekommt wiederum ein Unter-Widget namens Text und hier wird in dieses Widget eine Variable angegeben und zwar title.title, das ist die Variable, die wir hier oben definiert haben, dass sie hier existiert und die wir hier ganz, ganz oben in unserer Widget MyHomePage eingegeben haben. Da haben wir gesagt, das Widget MyHomePage hat eine Variable namens page und die hat den Wert Flutter Demo Homepage. Das bedeutet, dass der Wert dieser Variable title hier nun runter gegeben wird, zack, und er an den State automatisch weitergegeben wird und in dem State wird nun hier die Variable title aufgerufen. Das heißt, dieser Text, den wir oben angegeben haben, dieses Flutter Demo Homepage, das wird nun hier unten rein gegeben. Wenn ich nun unseren Emulator öffne, dann sehen wir hier oben auch eine blaue Leiste, das ist unser Widget AppBar und hier sehen wir auch, dass hier drin ein Text angezeigt wird, weil wir hier sagen, es hat das Unterelement Text und da drin steht auch die Variable, nämlich Flutter Demo Homepage.

Außerdem haben wir da noch einen Body, das heißt, alles, was wir hier im Hauptelement sehen, das ist dieses ganze Zeug hier und hier sehen wir auch schon ganz interessante Widgets, nämlich erstmal ein Widget namens Center. Das bedeutet, dass einfach der gesamte Inhalt hier zentriert ist und dieses Center, das hat nun ein Kind und dieses Kind heißt Column. Das heißt, wir haben ein Widget, was dafür, dass der Inhalt zentriert wird und dann ein Unter-Widget namens Column, was einfach nur dafür verantwortlich ist, dass wir auf der Achse mehrere Elemente untereinander platzieren können. Das heißt, hier können nun children rein, also nicht mehr nur ein Child, sondern mehrere und zwar haben wir da einen Text und dann noch einen Text. Und wenn wir uns das Ganze jetzt angucken, sehen wir auch hier ist ein Text und darunter noch ein Text. Und der obere Text, er hat keinerlei Eigenschaften, der hat einfach nur diesen Text "You've pushed the button this many times" steht hier auch so. Und der untere Text, da kommt nun erst einmal die Variable counter rein als Text. Das sehen wir hier oben, der Wert dieser Variable, die erst null hat hier oben und dann später vielleicht erhöht wird. Der Wert dieser Variable, der steht hier unten als Text drin und dieser Text kriegt noch ein Style. Das gibt man so an und zwar aus unserem Material, viel kriegt er ein TextTheme und zwar den für Headline4. Das heißt, wir haben in unserem Material, viel verschiedene Style-Klassen definiert und können die nun immer unserem Text zuweisen, wie beispielsweise hier, dass wir sagen, okay, dieser Text kriegt die Klasse Headline4. Wichtig ist, jedes Widget muss auch immer wieder geschlossen werden. Ja, das sieht man hier, dass es hier aufgeht und hier zugeht und da muss man halt diese ganzen Klammerungen immer beachten, dass man da keinen Fehler macht. Deswegen steht hier unten auch automatisch immer, dass es kein Kommentar, den man löschen kann, sondern hier steht immer automatisch dahinter von Android Studio geschrieben, welches Widget denn gerade geschlossen wird. Ja, das heißt, hier geht Text auf und hier Text zu, dann geht hier das Widget zu und hier oben geht es auf, Column geht hier oben auf und hier unten zu. Das ist echt ganz praktisch, damit man bei so viel in Klammern, die hier hintereinander kommen, nicht die Übersicht verliert.

Als drittes Widget hat unser Scaffold noch diesen Floating Action Button. Floating Action Button ist nun auch ein Widget, was hier eingegeben wird, was hat einfach diesen runden blauen Button hier erstellen. Dieser runde blaue Button, der hat nun eine Funktion, die aufgerufen werden kann, wenn man drauf drückt. Wenn man drauf drückt, nämlich die Funktion incrementCounter aufgerufen und die steht hier oben. Das heißt, sobald wir auf unser Widget Floating Action Button draufdrücken, wird automatisch hier oben diese Funktion aufgerufen und die Variable des Counters wird um eins erhöht. Das sagt dieses Plus-Plus hier aus. Gleichzeitig ist es noch so, dass hier ein Tooltip drüber steht. Das heißt, er muss hier angucken und ich hier mit der Maus darüber gehen, wird hier gegebenenfalls etwas angezeigt. Das geht wahrscheinlich nur im Webbrowser, nicht auf dem Handy oder genau hier, wenn man es gedrückt hält auf dem Handy. Und gleichzeitig gibt es hier auch noch ein Child, nämlich etwas, was in den Button drin sein soll und zwar ein Icon und dann steht hier drin noch, welches Icon da drin sein soll, nämlich das Hinzufügen, ein Pluszeichen.

Hier ist so der Grundaufbau unserer App. Das hört sich jetzt am Anfang erstmal so ein bisschen mind-blowing an, weil man solche Widgets so wahrscheinlich noch in keiner anderen Sprache gebaut hat. Normalerweise gibt es da ja immer eine XML-Struktur oder eine HTML-Struktur. Hier gibt es kein CSS, kein HTML, kein XML oder sowas, sondern es gibt wirklich nur diese eine Sprache und es wird alles mitgemacht. Die Komponenten, die Styles, die Struktur und so weiter. Das mag am Anfang erstmal leicht verwirrend sein, aber glaubt mir, mit der Zeit wird man da echt richtig fit und man versteht diese Struktur echt sehr schnell. Und das Coole ist, ein echtes man so wird einer Sprache halt alles machen kann, dass man nicht mehrere Sprachen lernen muss.

So, machen wir uns jetzt endlich an die Implementierung. Es wird Zeit, unsere Demo App so umzuschreiben, dass wir unsere Fitness App daraus schaffen. Und das Ganze ist auch gar nicht so schwer, weil wir müssen uns jetzt endlich nur mit unserem Scaffold beschäftigen und müssen das Ding etwas umschreiben. Ich mache mal den Code auf die linke Seite und unsere App auf die rechte Seite und wenn wir jetzt hier runter gehen, dann sehen wir ja bereits, dass unser Skelett, also unser Hauptbaustein sozusagen, drei unterschiedliche Widgets hat: einmal eine AppBar und einmal einen Body und einmal einen Floating Action Button. Die AppBar, die brauchen wir eigentlich gar nicht, die soll in unserer App gar nicht vorkommen und deswegen können wir jetzt diesen Teil hier einfach komplett herausnehmen. Man sieht, dass hier an den Strichen immer ganz gut, das sind ja so einzelne Äste, die hier unterteilt sind und wir können jetzt problemlos diesen Teil hier rausnehmen. Wenn ich das Ganze jetzt speichere, dann sehen wir, dass sobald die App hier neu gebaut ist, hier da unten steht, dass es reloaded wird, dann ist unsere AppBar hier oben entfernt. Und genau das gleiche, das können wir jetzt auch mit dem Floating Action Button hier unten machen. Auch den können wir entfernen, indem wir einfach das Ganze hier markieren und dann auf löschen drücken. Wenn ich nun das Ganze speichere, dann sehen wir auch hier wieder, dass dieser Floating Action Button entfernt wurde. Jetzt haben wir schon mal eine App, die relativ leer ist und wo wir jetzt coole Sachen mitmachen können.

Das erste, was wir machen wollen, ist die Hintergrundfarbe zu ändern. Übrigens, wenn du nicht weißt, wie das geht und du möchtest mal was machen, was ich nicht in diesem Tutorial mache, dann ist Flutter inzwischen so verbreitet, dass man solche Sachen sehr einfach googeln kann. Das heißt, wenn ich jetzt einfach googeln würde, wie ich bei Flutter die Hintergrundfarbe ändern kann von meiner App, so was wie "Flutter change background color app" oder sowas, dann würde ich ganz schnell herausfinden, dass ich bei dieser MaterialApp und dann bei Theme hier noch einen weiteren Parameter angeben kann. Genauso wie ich hier primarySwatch angeben kann, kann ich hier nämlich auch ScaffoldBackgroundColor eingeben und dann einfach mal warten, was mir hier vervollständigt wird. Ja, dafür drücke ich Strg und Leertaste, dann gehen hier automatisch Vorschläge auf, was ich noch so einfügen kann und hier steht schon, dass ich höchstwahrscheinlich diesen Befehl "scaffoldBackgroundColor" einfügen möchte. Hier kann ich nur noch sagen, was für eine Farbe ich einfügen möchte. Ich sage einfach mal Color(0xFF...) und dann noch ein Komma. Das ist nämlich die Farbe weiß in einem sogenannten Hex-Code. Das ist einfach ein Code, der geht immer von 0 bis 11 und damit kann man hier ganz viele verschiedene Farben, besser gesagt, alle Farben angeben. Wenn ich diese Farbe jetzt ändern möchte, dann kann ich hier draufdrücken, links, da wird er die Farbe angezeigt und kann mir hier irgendetwas auswählen. Ich möchte jetzt den Hintergrund 41% rot, 41% grün und 41% blau haben. Wenn ich das Ganze speichere, dann sehen wir hier unten, dass ein Fehler aufgetreten ist und zwar steht hier "private constructors". Das bedeutet, dass man vor solchen Konstruktoren immer noch ein const davor packen soll, weil das Ganze hier eine Konstante ist und wir sehen, unsere App wird automatisch kompiliert und die Hintergrundfarbe hat sich nun zu meiner Farbe hier geändert. Sieht schon ziemlich cool aus.

Genauso wie wir das hier jetzt gemacht haben, können wir hier unten auch den Text ändern. Hier könnte man auch einfach googeln, was man diesen Text hier noch hinzufügen muss, um das Ganze zu ändern. Ich weiß es schon, man kann nämlich einfach nach dem Text hier nach dem Komma noch das Wort "style" Doppelpunkt schreiben und hier kann man nun ein neues Objekt hinzufügen und das heißt TextStyle, wird hier schon vorgeschlagen. Lädt ein bisschen und dann sehen wir, dass hier und da steht auch schon, was man da reinpacken kann. Das wird automatisch erklärt und zwar wollen wir es einfach hier die Farbe ändern. Das heißt Color und hier kann ich jetzt wieder sagen Color(...) natürlich und hier rein kommt nun Colors.white. Hier muss noch ein extra ins oder Colors.white. In diesen TextStyle können wir nun verschiedenste Eigenschaften reinschreiben, beispielsweise können wir hier sagen, dass der Text kursiv geschrieben werden soll, dass er fett geschrieben werden soll oder sogar die Schriftart ändern. Alles, was wir hier jetzt ändern wollen, ist die Farbe, also schreibe ich Color und dann dahinter Colors.white. Dafür gibt es schon so eine Konstante, da muss man jetzt keine eigene Farbe so wie wir das hier oben gemacht haben definieren, sondern ich schreibe einfach hier Colors.white. Jetzt speichere ich das Ganze und wir schauen einmal, was passiert und wir sehen hier, unser Text ist weiß geworden. Genau das gleiche können wir hier natürlich auch machen, TextStyle und dann die Farbe weiß und wir sehen, dass die Null jetzt hier ebenfalls weiß geworden ist.

Gut, unser Layout soll sich jetzt allerdings noch ein bisschen ändern. Wir wollen immer ein Layout haben, wo links ein Icon ist und rechts ein Text. Das heißt, den unteren Text, den schmeiße ich jetzt einfach mal raus. Das Ganze ist jetzt noch so unterstrichen, wir müssen hier das const noch entfernen und was wir hier oben noch machen können, weil aktuell alles eine Konstante ist, schreiben wir hier noch const vor. Hier ändert sich erstmal nichts, wir sind keine Variablen oder so drin. Dieses const nutzen wir einfach, um eine App so performant wie möglich zu machen. Wir schreiben es immer vor allen Widgets, die sich nicht updaten sollen. Hier ist keine Variable drin, deswegen wird dieses Widget hier nicht upgedatet. Was hat das für einen Sinn? Unsere App ist einfach deutlich schneller dadurch, dass Flutter nur die Regionen in der App updated, die auch wirklich upgedatet werden. Dadurch schafft es Flutter einfach abzubauen, die deutlich performanter sind als welche mit anderen Frameworks. Für den Entwickler ist es natürlich ein bisschen nervig, das immer hinzuzufügen und wegzunehmen, aber die Entwicklungsumgebung, die weist einen hier durch diese Fehlerliste ganz gut darauf hin. Hier steht übrigens auch, dass hier manche Funktionen nicht mehr verwendet werden. Ich brauche die Funktion vielleicht in abgewandelter Form später, deswegen kommentiere ich die jetzt erstmal aus. Dafür muss man hier einfach immer so zwei Striche vorschreiben und hier unten auch und so wird diese Zeile erstmal nicht mehr interpretiert. Es gibt da natürlich auch Shortcuts für, da kann man einfach mal in den Settings nachgucken und die sind bei jedem Betriebssystem und bei jeder Version immer ein bisschen anders, je nachdem, ob sie jetzt eine deutsche Tastatur hast oder eine englische und so weiter.

Wir wollen nun also hier auch noch ein Icon einfügen. Wie man ein Icon einfügt, das haben wir bei dem Button schon gesehen. Alles, was ihr dafür machen müssen, ist, dass wir hier das Icon Widget nutzen müssen und dafür schreibt man einfach Icon(...) und hier hinter noch, was man haben möchte, nämlich Icons.Und das Geile ist, dass ich nun hier, sobald ich auf Strg und Leertaste drücke, eine automatische Vervollständigung kriege und hier werden wir auch schon die ganzen Icons angezeigt. Da kann man einfach mal durchgucken. Ich weiß schon, wie meins heißt, es heißt nämlich "directions_run". Wenn man das nicht weiß, ja, dann kann man entweder hier durch diese riesige Liste gehen oder man kann auch einfach nur "Material Icons" googeln. Dort findet man nämlich jede Menge, da gibt es dann so eine schöne Übersicht, wo man auch einfach noch mal so eine Suche hat und sich dort durchsuchen kann. Als Farbe möchte ich Colors.white nutzen und wir speichern das Ganze mal. Und das Coole ist, es gibt hier nicht nur weiß, sondern es gibt hier sogar abgestufte weißstufen. Das heißt, wenn ich zum Beispiel hier 54% haben möchte, dann kann ich das auch nehmen und ich würde sagen, das probieren wir einfach mal für den Text und für das Icon. Das sieht nämlich glaube ich noch mal ein bisschen cooler aus. 54 zu wenig ist, können wir auch mal gucken, ob vielleicht 60 oder 70 noch besser ist. Probieren wir mal 70 aus, 74 rein und hier auch eine 70 rein. Aber so ein komplettes weißes meistens einfach zu grell.

Wir wollen nun diese Elemente nicht untereinander anzeigen, sondern nebeneinander und dafür gibt es ein weiteres Widget, in die wir jetzt diese beiden Elemente hier einpacken können und das nennt sich Row. Das heißt, ich schreibe hier einfach mal rein, wieder ein Komma und dieses Element, das hat natürlich children. So wird mir schon vorgeschlagen und in diese children, das heißt zwischen diese eckigen Klammern, da packe ich nun diese beiden Elemente hier ein. Zack, mit Strg+X ausgeschnitten, mit Strg+V eingefügt. Hier füge ich jetzt noch mal so eine Zeile dazwischen und das Ganze wird hier auch noch mal so unterstrichen. Das liegt daran, dass wir hier natürlich so wie sonst auch immer ein const davor brauchen. Nach dieser children-Schreibung hier, sonst einfach um zu sagen, dass es sich hier nach unkonstanten handelt, die nicht upgedatet werden sollen. So, hier ist jetzt noch alles unterstrichen. Das liegt daran, dass wir nun dieses const-Kram auch noch hier vorschreiben müssen. Dadurch sagen wir natürlich, dass hier auch nur Konstanten drin sind. Hier oben können wir uns das constance rausnehmen und nun führen wir das Ganze noch einmal aus und wir sehen, dass nun die Elemente hier auf der rechten Seite nebeneinander und nicht mehr untereinander angezeigt werden. Dadurch, dass jetzt ein Teil von der Row sind und in dieser Row dort ist nun einmal ein Icon drin und einmal ein Text drin. Hier können wir jetzt übrigens auch einen anderen Text reinschreiben, zum Beispiel, wie viel man bis jetzt bereits gelaufen ist. Sagen wir mal 2300 von 5000 Metern, die man jeden Tag sich bewegen sollte.

Nun wollen wir natürlich den Text und das Icon noch größer machen. Das geht auch ganz easy. Wir müssen jetzt bei dem Icon zum Beispiel einen weiteren Parameter angeben und zwar hier kann ich nun einfach eine Zahl angeben, sagen wir mal 10 zum Beispiel. Ist jetzt winzig klein, machen wir mal 20 und so können wir uns halt jetzt die richtige Größe, die wir haben wollen, heraussuchen. Ich probiere mal 40 aus und da muss man sich halt einfach langsam herantasten. Glaubt, somit 50 sollten wir fein sein. Das gleiche machen wir es auch gleich mit dem Textteil. Hier können wir auch noch neben der Farbe eine fontSize eingeben und da gebe ich jetzt auch einfach erstmal 35 ein und wir gucken einfach mal, wie das Ganze aussieht. Hier muss ich natürlich noch ein const schreiben und jetzt führen wir das Ganze mal aus. Sieht schon ziemlich cool aus. Langsam kommen wir schon in eine Richtung, die mir hier sehr gut gefällt.

Wenn wir jetzt übrigens wollen, dass unsere Elemente von oben nach unten angezeigt werden und nicht mehr in der Mitte, dann können wir hier bei unserem Column, das ist ja diese gesamte Säule, wo wir alle Elemente untereinander anzeigen, einfach dieses mainAxisAlignment: MainAxisAlignment.center herausnehmen und dann wird auf unserer Hauptachse in der Mitte, also diese vertikale von oben nach unten, auch nicht mehr zentriert. Wir brauchen jetzt vielleicht noch eine Art Padding, um das Ganze auch ein Stückchen wieder nach unten zu schieben und auch ein Stückchen nach rechts zu schieben, dass das hier nicht einfach so ganz links oben in der Ecke ist, aber das gucken wir uns im nächsten Teil an. Jetzt haben wir erstmal so die grundlegende Idee verstanden, wie wir Elemente in unserer App einfügen.

Und dieses Teilen in diesem Abschnitt wollen wir uns noch einmal mit dem Padding beschäftigen. Padding, das ist das Einrücken von Elementen innerhalb von einem Widget. Wenn wir uns jetzt hier unsere App angucken, dann sehen wir, dass unser Text und unser Icon ganz links oben angezeigt wird. Das ist natürlich schon gut, allerdings sieht man das wahrscheinlich noch etwas besser, wenn es

Ein bisschen weiter nach unten schieben und ein bisschen weiter nach rechts schieben. Und dafür können wir nun unsere gesamte Callum zum Beispiel dieses ganze Ding hier in ein Widget namens Tagging packen.

Besonders cool ist auch, wir brauchen dieses Widget namens Center gar nicht mehr, weil unsere Callum die hat ja bereits die gesamte Breite und dadurch braucht man dieses Ding hier eigentlich nicht mehr. Das heißt, was wir es machen könnten ist, der Einfachheit halber, einfach dieses Ding hier, dieses Widget umzubenennen in Padding.

Wenn ich das ganze hier mache, so, wir speichern das ganze mal, dann muss ich diesen Padding Element natürlich noch eine Eigenschaft geben. Ich muss dieses Widget ja irgendwie noch sagen, wie viel Padding wir denn jetzt geben wollen in alle Richtungen. Dafür kann ich neben Child den Padding noch eine weitere Eigenschaft geben und zwar, wie gedacht, sie heißt Padding und hier kann ich jetzt sagen, wie viele ich an allen Ecken geben möchte. An dem ich einfach mal Add schreibe und dann steht hier schon, was mir vorgeschlagen wird, zum Beispiel Ins All, das in alle Richtungen gleich viel gegeben werden, beispielsweise 16,0 Pixel.

Schauen wir uns das einmal an, sieht schon ganz gut aus. Wir haben jetzt unseren Content hier in alle Richtungen 16 Pixel eingriff. Wir können ja auch 32 sagen, dann wird das in jeder Ecke 32 Pixel eingerückt. Wenn wir das ganze hier noch mal weg machen, dann sehen wir in den automatischen Vorschlägen, die mache ich, wie gesagt, immer mit Steuerung und Leertaste, dass es hier auch noch mehr gibt, weil vielleicht wollen wir sagen, dass wir nach links ein bisschen was anderes haben, Point als nach rechts. Und daher gibt es dieses Direction. Wenn ich jetzt hier einen Punkt mache, dann steht hier From STB, das steht für Start, Top and Bottom. Das heißt, wenn ich da drauf drücke, kann ich für den Start, also für das Linke, zum Beispiel 32 Pixel angeben. Nach oben möchte ich allerdings, sollte ich mehr haben, sagen wir mal beispielsweise 80 Pixel. Also, wir merken schon, ich mache hier immer so zweier Prozent, das macht Google, weiß es außer beim Design. Nach rechts wollen wir auch wieder 32 Pixel haben und nach unten auch 32. Das reicht uns vollkommen.

So, machen das ganze mal und schauen uns an, wie das aussieht. Hier hinten muss natürlich noch ein Komma und jetzt lassen wir das ganze mal ausführen und das sieht jetzt schon deutlich besser aus, weil wir halt wirklich frei bestimmen können, wie unsere Abstände hier sein sollen. Wenn wir 100 haben wollen, können wir das zum Beispiel auch auf 100 ändern, ist gar kein Problem. Und damit haben wir es jetzt geschafft, einige Sachen hier schon mal richtig schön zu platzieren.

Wenn wir jetzt zum Beispiel hier unsere Reihe, also nur dieses Roding hier ein schieben wollen, dann wäre das mit diesem Padding genauso möglich. Vielleicht macht das sogar noch mehr Sinn, weil wir ja Linien haben wollen später, die hier durchgezogen sind und das würde jetzt aktuell so, wie es hier aufgebaut ist, nicht funktionieren. Das bedeutet, wir könnten auch hier sagen, dass wir beispielsweise hier nur ein Padding nach ganz oben haben wollen und sonst nirgendwo, also 0,0, dann hier auch 0,0 und vielleicht noch mal nach unten auf 32,0. Auch hier wird jetzt wieder gemeckert, dass wir hier doch ein Counter vor packen sollen. Das können wir gerne machen und jetzt geben wir unserer Reihe hier einfach noch mal ein Padding. Das heißt, all dieses Zeug hier wird auch ebenfalls in ein Element namens Padding reingepackt. Hier einfach Padding, da geht die Klammer auf und die Klammer geht jetzt nach dieser Row hier, das sieht man ja immer ganz gut hier unten zu. Wir brauchen wir wieder ein Komma und nun können wir noch sagen, dass das hier ein Child natürlich hat, ja, das Child ist Row von diesem Padding und dann müssen wir natürlich hier noch ein Padding angeben und da würde ich jetzt der Einfachheit halber da oben dieses Ding hier so runter kopieren. Zack, das hier noch alles ein Stück einrücken, indem ich es markiere und oft drücke und nun speichere ich das ganze.

Hier möchte ich jetzt allerdings nicht mehr sagen, dass diese Reihe hier 100 nach oben hat, das macht jetzt keinen Sinn, sondern wir wollen wir sagen, dass wir nach links unserer Reihe 32 geben wollen, nach oben 0, dann nach rechts ebenfalls 32 Pixel und nach unten, ja, sagen wir mal 8 oder 16 Pixel. Ist müssen wir dann schauen, wenn wir die nächste Reihe dort einfügen. So, nachdem wir das ganze geschafft haben, sind wir auch schon fertig mit dem Padding und im nächsten Abschnitt schauen wir uns einmal an, wie wir nun unsere Box darunter einfügen können, die uns sagt, wie viel wir dann schon von unserem Ziel erfüllt haben.

In diesem Abschnitt wollen wir unserer App noch eine Progress Bar hinzufügen. Das heißt, einfach so eine kleine Leiste, die uns anzeigt, wie groß denn aktuell unser Fortschritt ist. Und das Gute ist, dass es dafür in Flutter echt tolle Möglichkeiten gibt. Einer der großen Vorteile in Flutter ist, dass man fast alles googeln kann. Das heißt, wenn ich zum Beispiel nach Flutter Progress suche, dann bekomme ich hier gleich im ersten Link die Flutter Dokumentation. Und besonders cool ist, dass in dieser Flutter Dokumentation nicht nur steht, wie das ganze funktioniert, sondern zu fast allen Komponenten, die so vom Framework bereitgestellt werden, gibt es gleich hier noch so ein schickes Video, wo das ganze erklärt wird, wie man das verwenden kann und was die Komponente genau macht. Darunter gibt es auch gleich so ein Code Beispiel und hier noch so ein Sample Code, wie das ganze funktioniert. Und hier rechts kann ich auch gleich den Code ausführen und dann sehe ich hier jetzt klappt gerade nicht, aber normalerweise sieht man hier dann, wie das ganze aussieht. Anscheinend läuft dieser Online Editor gerade nicht so richtig, aber hier sieht man dann auch noch mal den ganzen Code, den man da verwenden kann und darunter noch jede Menge einzelne Variablen, die man da rein geben kann und so weiter.

Was wir jetzt in diesem Fall brauchen, ist den hier oben steht Linear Progress Indicator und den wollen wir in unserer App unter dieser Leiste hier, die wir bereits eingefügt haben, mit unserem Läufer hier und mit diesen Zahlen hier einfügen. Das heißt, unter dem Widget Padding, was wir hier gewählt haben. Das heißt, ich füge einfach eine neue Zeile hinzu und schreibe hier Linear und viel mehr muss ich gar nicht schreiben. Ich drücke einfach wieder auf Steuerung und Leertaste und komme dann zur automatischen Vervollständigung und hier wird mir schon alles mögliche vorgeschlagen, unter anderem dieser Linear Progress Indicator. Den fügen wir ein. Er verändert sich erstmal noch nicht, deswegen damit nicht gemeckert wird, brauchen wir wieder ein Const Keyword und dann können wir hier auch noch einen Wert eingeben mit Value und das muss eine Zahl sein zwischen 0 und 1. Das heißt, zum Beispiel 0,3. Und jetzt speichere ich das ganze mal und wir sehen, dass wir nun hier auf der rechten Seite solch eine Linie eingefügt haben. Sieht schon ziemlich cool aus.

Ich möchte jetzt auch den Abstand von der Leiste darüber zu Linie etwas erhöhen. Also sage ich mal, dass ich hier auch 32 Pixel Abstand drin haben möchte. Vielleicht etwas zu viel, sagen wir mal 24. Und im nächsten Schritt möchte ich jetzt die Farbe ändern. Das heißt, ich sage hier bei meinem Linear Progress Indicator, dass dies Farbe, das werden wir auch schon vorgeschlagen, wenn ich auf Steuerung und Leertaste drücke, die Farbe sollte eine Color sein. So schreibe ich einfach mal Color Klammer auf Klammer zu und hier kann man jetzt wieder diesen Farbcode eingeben, also dieses 0x und dann zum Beispiel für ganz schwarz FFFFFF. Das mache ich jetzt erstmal. Die wähle ich jetzt allerdings gleich meine eigene Farbe aus und hier zwischen die Klammern kann ich jetzt meinen Farbcode eingeben. Das heißt, für weiß zum Beispiel 0x FFFFFFFF und dann sehen wir hier links auch schon gleich diesen Color Picker, wo ich mir jetzt die Farbe, die ich wirklich haben möchte, rauspicken kann. Ich gehe hier mal in Richtung Gelb und dann kann ich hier gleich eine der Farben Gelb, Grün oder was ich hier möchte, mir auswählen und dann kann ich die auch gleich in meiner Applikation verwenden. Das heißt, ich speichere mal und hier steht jetzt Reload performed. Ich drücke einfach mal hier oben auf Play, dann kann man es auch immer erzwingen, dass es darauf geschoben wird. Manchmal zeigt er ein bisschen auch, wenn es eigentlich gar kein Fehler gibt und wir sehen, dass die Farbe nun Gelb ist.

Die Hintergrundfarbe von meiner Bar kann ich genauso ändern, indem ich Background Color eingebe. Wer hätt's gedacht und hier sage ich auch wieder, dass ich eine Farbe eingeben möchte und da sage ich es auch erstmal wieder 0x FFF, also komplettes Weiß. Das möchte ich allerdings gleich noch transparent machen, damit ich sie ein bisschen besser übersichtlicher gestaltet. Schiebe ich hier nochmal die einzelnen Parameter so in extra Zahlen. Ja, dann liest man das noch mal ein bisschen besser und jetzt sehe ich auch hier, dass ich hier die Farbe Weiß gleich bestimmen kann und kann hier zum Beispiel sagen, dass ich nur ja 25 Prozent oder sowas weiß haben möchte. Ich drücke oben wieder auf Play. Manchmal zeigt er hier unten einfach, dass er es irgendwie nicht rüber schiebt, aber wenn man dann hier drauf drückt, dann zeigt er auch kein Fehler und hier haben wir nun ein mattes Weiß.

Die Höhe können wir ebenfalls verändern. Dafür füge ich hier einfach mal die Höhe ein. Ja, ich gehe wieder in die Autovervollständigung und hier steht jetzt zum Beispiel in Height und da gebe ich jetzt einfach mal 10,0 an. Mal schauen, wie das so aussieht. Sieht schon ganz gut aus. Vielleicht nach mir hier noch 12, aber viel mehr würde ich jetzt hier nicht wählen. Und damit sind wir auch schon fertig. Jetzt haben wir es geschafft, unsere eigene Progress Bar hier einzufügen. Im nächsten Abschnitt machen wir das Ganze jetzt drei Mal und wir müssen diesen Code dafür nicht dreimal kopieren. Das würde ja dann irgendwann total unübersichtlich werden, sondern wir haben ja noch eine Möglichkeit, das Ganze um einiges smarter zu machen.

In diesem Abschnitt werden wir unsere App noch etwas erweitern. Wir wollen ja nicht nur eine Sektion haben, sondern wir wollen mehrere Sektionen haben mit unterschiedlichen Werten. Und natürlich könnten jetzt einfach diesen gesamten Code, den wir haben, mehrfach kopieren und kopieren, aber es gibt natürlich in Flutter eine smarte Lösung und zwar das Erstellen von eigenen Widgets und das Ganze werden wir jetzt einmal gemeinsam machen.

Wenn wir uns unseren ganzen Code hier so angucken, dann müssten wir jetzt, wenn wir diese beiden Informationen auf der rechten Seite, also einmal hier das Icon mit den Zahlen dahinter und diese Progress Bar kopieren wollen würden, dann müssten wir uns diesen ganzen Code hinnehmen. Zack, das ganze Zeug und müssten das nochmal kopieren und damit würde unser Code natürlich sehr schnell sehr unübersichtlich werden. Genau aus diesem Grund können wir natürlich das Ganze, was ich jetzt markiert habe, hier in ein weiteres Widget packen. Und das Gute ist auch, dass es dafür ein Flutter Shortcut gibt, was das Ganze um einiges leichter macht. Um ein neues Widget anzulegen, müssen wir nämlich ganz unten letztendlich einfach hier solch eine neue Klasse hier einfügen. Ja, das heißt, es fängt hier oben zum Beispiel an mit diesen State Verbietet, dann kommt da diese Zeile rein, wenn wir da Variablen haben, noch sowas und so weiter und so fort, ziemlich nervig zu schreiben. Aber was wir stattdessen machen können, ist, dass wir einfach nur STL schreiben, um ein State Less Widget zu schreiben und dann auf die Autovervollständigung drücken, also auf Steuerung und Leertaste. Oder wir wollen in diesem Fall ein Stateful Widget, weil wir natürlich wollen, dass sich diese Zahlen auch irgendwann mal verändern können. Deswegen schreibe ich hier STF und dann wird hier schon vorgeschlagen Stateful. Wenn ich das auswählen, dann wird hier bereits der gesamte Code für solch ein Widget eingefügt und hier kann ich jetzt einfach sagen, wie das ganze Widget heißen soll, das hzb Tracking Element. So, also irgendein Element, ja, wo wir ein Wert drin haben, den wir tracken wollen. Und da rein würde ich jetzt im nächsten Schritt einfach alles packen hier unten, was wir bis jetzt da oben rein gepackt. Das heißt, hier diese ganze Column, zwei Werte untereinander sind. Zack, das ganze Zeug hier inklusive Padding und so weiter. Unser Column, das geht hier wieder zu, das alles hole ich mir jetzt Steuerung X zum Ausschneiden und das füge ich hier unten ein. Das heißt, statt einem neuen Container kommt nun hier dieses Element raus. So sieht das Ganze dann aus. Da unten müssen wir natürlich noch das letzte Komma entfernen, dass hier ein Semikolon am Ende zum Abschluss ist und dann sieht das Ganze hier auch schon ganz gut aus und ich scheine erstmal keine Fehler zu finden.

Und jetzt können wir dieses Tracking Element hier oben einfach einfügen. Klammer auf, Klammer zu, Komma und dann wahrscheinlich noch so Const oder sowas davor, gehe ich mal von aus. Hier merkt er hat immer noch so ein bisschen. Das Gute ist, wenn man hier unten auf Data Analysis geht, dann sieht man hier auch immer gleich, was man machen kann. Das heißt, ich kann hier zum Beispiel rechts klicken, einfach und einfach sagen, ja, hier entweder ignoriere das Ganze oder füge mir hier diesen Const Modifier da, wo du glaubst, dass er hinkommt, hinzu. Und das habe ich jetzt auch für den anderen Teller und dann sind hier alle Probleme gelöst. Ich kombiniere meine App noch mal und wir sehen, das Ganze funktioniert genauso wie vorher, kein Unterschied, nur dass unsere Widgets jetzt einfach noch mal deutlich aufgeräumter sind, weil wir hier als Zeit nur noch ein einziges Tracking Element haben und nicht mehr mehr.

Was ich jetzt noch machen kann, ist hier mehrere untereinander einzufügen. Wir wissen ja schon, wie das geht. Wir wollen die mit einem Column, also in einer Säule untereinander einfügen. Das heißt, statt Tracking Element, das Ganze schneide ich jetzt mal aus mit Steuerung X. Füge ich jetzt hier ein Column ein. Klammer auf, Klammer zu und mein Column, das hat mehrere Children, also Children und lasse mir das Ganze auch, soweit es richtig geschrieben habe, automatisch vervollständigen und hier kann ich jetzt mehrere Tracking Elemente untereinander einfügen. Hier merkt er jetzt noch ein bisschen rum wegen bisschen Const, was nicht richtig gesetzt ist. Das liegt daran, dass wir hier oben einfach Const hinzugefügt haben. Das müssen wir hier entfernen, weil natürlich jetzt nicht mehr alles hier konstant ist, sondern hier sind ja jetzt Stateful Widgets drin und dieses Ages sie können theoretisch auch ihren Wert ändern. Was nicht sein Wert ändern kann, ist dieses Ding hier oben, ja, die Einrückung, die muss auf jeden Fall so bleiben, deswegen kriegt die noch, deswegen kriegt ihn nochmal ein Const und jetzt sehen wir hier auch schon, dass unser Widget dreimal eingefügt wurde, also richtig cool. Das Ganze hat jetzt schon einmal funktioniert und jetzt können wir unsere Widget hier noch minimal anpassen. Das ist auch vielleicht ein bisschen Padding nach oben immer krieg, bei sonst sieht es hier ein bisschen seltsam aus. Also einfach das zweite ist ja hier das Padding nach oben. Wir sagen er hier Start, Top and Bottom und dadurch ist es so, dass unser Widget jetzt jeweils nochmal ein bisschen Abstand nach oben kriegt. Wir könnten das sogar noch erhöhen, würden nicht vielleicht auch noch ganz gut hier auf 64 zum Beispiel machen. Wir das noch einmal und wenn uns jetzt hier oben der Abstand zu viel ist, dann können wir auch hier den Abstand da oben noch ein bisschen bei unserem Body, der ja so ein Standard Abstand nach oben bekommt, hier verändern. Das heißt, hier sage ich jetzt einfach mal, dass ich den halbiere und hier 48, immer schön 16 Potenzen rein und dann gucken wir einfach mal, wie das Ganze aussieht. Gefällt mir jetzt persönlich schon richtig gut. Natürlich muss hier noch etwas unterschiedliches angezeigt werden und nicht immer das gleiche. Hier wird auch noch so ein bisschen was auf der linken Seite unterstrichen. Das können wir jetzt erstmal ignorieren, weil bei Twitter Daten reinpacken, sieht die Welt ganz anders aus. Also bis zum nächsten Abschnitt.

In diesem Abschnitt übergeben wir Variablen an Widgets. Bis jetzt macht unser Widget ja immer das Gleiche. Das heißt, es zeigt immer das gleiche Icon an, es hat immer die gleiche Farbe und es stehen die gleichen Zahlen drin. Wie cool ist es natürlich, wenn wir an dieses Widget Variablen übergeben können und dann haben wir drei Widgets untereinander, die zwar alle irgendwie gleich sind, aber gewisse Werte wie die Zahlen, die angezeigt werden, das Icon oder die Farbe, die sind unterschiedlich. Und wir wissen ja bereits, wie wir an ein Element hier eine Variable übergeben können und zwar haben wir das hier oben ja in der Demo schon gemacht. Hier wurde ein Text übergeben und zwar eine Variable namens Title, die den Text Flutter Demo Homepage hat und das Ganze, das können wir ja jetzt genauso machen. Das bedeutet, dass wir hier unten diese Farbe und diese Farbe, ja, vor allem die obere Farbe hier, einfach jetzt oben rein geben können und die dann immer unterschiedlich sein soll.

Das heißt, ich sage jetzt hier, dass ich eine Variable namens Color rein geben möchte. Zack und die hat den Wert Gelb. Und das mache ich jetzt für die nächsten beiden Widgets genauso. Allerdings möchte ich das nun meine Farbe natürlich für alle Widgets ein bisschen unterschiedlich ist. Ich bin mir hier mal so ein bisschen was bläuliches liedern es raus, er einfach mal so, dann gehe ich hier drauf und wir hier noch mal ein bisschen was in Richtung Rot raus. Und da werden jetzt natürlich noch jede Menge Fehler angezeigt. Wir müssen uns nicht verwirren, das liegt daran, dass wir natürlich jetzt noch dem Widget sagen müssen, dass es natürlich eine Variable bekommen kann und das machen wir hier in unserem Tracking Element zwischen den geschweiften Klammern. Das hier, das ist der sogenannte Konstruktor und in diesem Konstruktor sagt man immer, welche Variablen denn an ein Widget oder allgemein an eine Klasse übergeben werden können. Und ich sage, dass ich hier ist eine Variable namens Color rein geben möchte und das mache ich, indem ich einfach rein schreibe this Color und hier ein bisschen weiter runter muss ich dann noch diese Variable definieren, indem ich hier sage, final, dann den Datentyp, also was für eine Waffe habt ihr hier rein geben wollen und zwar eine vom Typ Color. Das ist das gleiche, was hier oben steht, dass es wieder etwas aus der Objektorientierung und nun müssen wir noch sagen, wie die Variable heißt, nämlich Color. Und nachdem wir das Ganze hier so rein gegeben haben, können wir nun hier unten sagen, dass wir hier diese Farbe aus der Variable hier oben, die wir von hier ganz oben rein gegeben haben, verwenden können. Und das sagen wir, indem wir sagen Widget.den Namen der Variable und zwar Color. Das Ganze ist jetzt etwas dynamisches, was immer anders ist und deswegen können wir hier keine Const mehr davor haben. Wir sehen auch gleich, dass das hier so unterstrichen ist und das liegt daran, dass wir hier sonst wegnehmen müssen. Jetzt unterstreicht er uns die Farbe, weil die braucht natürlich hier noch ein Const. Zeigt die fügen wir hier noch hinzu und nachdem wir das Ganze gemacht haben, haben wir hier schon mal keine Fehler, aber ein paar Sachen müssen wir natürlich noch ändern, damit das Ganze klappt. Das Ganze sehen wir auch hier unten immer bei der Data Analysis, dass hier noch ein paar Sachen nicht ganz richtig sind, wie zum Beispiel, dass wir hier oben noch ein Const zu fügen müssen, weil das ist natürlich immer noch fest und dann haben wir nur noch einen einzigen Fehler und zwar müssen wir hier noch ein Wort davor schreiben, das haben wir hier oben auch week feiert. Ja, das ist eine Pflichtvariable ist, weil sonst könnte Color theoretisch auch nicht mit angegeben werden und wir müssten das hier nicht mit angeben. Wir wollen das allerdings hat angeben, deswegen müssen wir hier noch das Wort Required davor packen. Zack und nun sehen wir auch, dass hier unten alle Fehler verschwunden sind und außerdem hat sich unsere App hier auch rechts geupdatet und diese App hat nun, wie wir das Ganze hier sehen können, die richtigen Werte, nämlich oben und unten und weiter unten noch meine unterschiedliche Farbe. Und das Ganze würde ich jetzt noch mal als kleine Übung natürlich auch mit den anderen Werten machen. Das heißt, wir sollen nicht nur die Farbe ändern, sondern auch das Icon ändern und der Text, der da eingegeben wird. Also auf geht's, wenn du das Ganze selber machen möchtest, empfehle ich dir das auch. Also halt das Video kurz und jetzt das Ganze um und ansonsten machen wir das Ganze natürlich jetzt gemeinsam.

So, das bedeutet, wir werden jetzt eine weitere Variable rein geben und zwar für das Icon. Das Icon, das wird allgemein jetzt aktuell immer hier oben angegeben und zwar so. Und was wir nun machen müssen, ist, dass dieses Teil hier, also hier das Icon und das muss natürlich variabel sein und dafür müssen wir erst einmal herausfinden, was für einen Datentyp das Ganze hier hat. Das findet man schnell raus, an dem man hier zum Beispiel drüber geht über dieses Icons und dann einfach mal drauf klickt, dann öffnet sich hier das Ding. Ich habe dabei noch die Steuerungs Taste gedrückt gehalten, also etwas Steuerung und hier drauf und dann kommen wir in diese Library, die von Flutter bereits zur Verfügung gestellt wird und hier unten steht auch schon, dass unsere ganzen Icons hier steht überall Icon Data immer vor dem Namen des jeweiligen Icons davor, also ist der Datentyp wohl Icon Data. Das heißt, wir können hier oben eine neue Variable definieren und ich nenne die einfach mal final Data Data. So, mit kleinem hier am Anfang, ganz wichtig. Und nun sagen wir hier unten, dass wir dieses Icon Data verwenden wollen, also schreiben wir hier ein Widget.den Data. So, ich speichere das Ganze und jetzt müssen wir natürlich hier oben wieder das Const Werk machen, weil hier unten ja jetzt eine Variable ist. Zack, das heißt, das kommt auch noch weg und wir laden noch einmal neu und wir müssen das Const nach wie vor natürlich, wo die Elemente schreiben, bzw. für die Widgets, die immer noch fix sind und sich nicht ändern, also hier den Textteil. Jetzt haben wir keine Fehler mehr und das Ganze sieht doch jetzt schon mal ziemlich gut aus.

Jetzt können wir mal ausprobieren, hier oben verschiedene Icons rein zu geben. Dafür können wir auch einfach mal auf Google gehen und hier Material Icons eingeben und wenn wir das gemacht haben und dann auf den ersten Link klicken, dann sehen wir auch gleich alle möglichen Material Icons und können hier suchen, was es so gibt. Das heißt, wenn ich noch suche, zum Beispiel, dann sehe ich hier diesen Wassertropfen und wenn ich den auswähle und hier rechts auf Flutter drücke, dann steht hier auch gleich, wie ich das Ganze Ding einbinden kann, nämlich water_drop_outline. Das ist immer ganz cool, um diese Befehle hier zu finden. Das heißt, ich schreibe jetzt hier einfach mal water_ und guckt, ob ich das hier finde. Drop gibt es hier. Water Drop gibt es leider nicht. Leider gibt es hier nicht immer alle der Grafiken, die auf der Material Seite offiziell vorgeschlagen werden. Das heißt, wir können jetzt einfach mal gucken, was uns von diesen Logos hier gefällt.

So, nach ein bisschen suchen bin ich jetzt auf Loke Drink gekommen. Das sieht auch ganz gut aus, einfach so ein Wasserglas und dadurch sehe ich dann halt genau, wie viel ich getrunken habe. Und als nächstes möchte ich auch noch strecken, wie viele ungesunde Sachen ich gegessen habe. Dafür suche ich einfach mal nach Food und finde da auch was Gutes. Die Werte, die jetzt hier angegeben sind, so was wie 2300 von 5000, so weiter, das möchte ich nicht rein geben als Variable, sondern das Ganze möchte ich stattdessen direkt innerhalb von dem Widget abfragen. Das müssen wir irgendwie selber als Mensch irgendwann eingeben, aber was ich noch eingeben möchte, ist die Einheit. Das soll ja nicht immer Meter sein, sondern mal Meter, mal sollte es hier Liter sein und hier unten vielleicht Einheiten, ja, wie für ungesunde Sachen ich gegessen habe. Und das Ganze, das gebe ich also hier auch noch mal als extra Variable rein. Ja, das heißt, ich würde hier das Ganze einfach Unit nennen, ist glaube ich am sinnvollsten. Unit Doppelpunkt Meter, dann würde ich hier sagen, Unit Doppelpunkt Liter und hier unten würde ich sagen, Unit Doppelpunkt Hieß es, also wie viele Anteile man gegessen hat. Und dann würde ich natürlich auch hier unten wieder neue Variable eingeben und die nenne ich in diesem Punkt Unit. Die ist jetzt vom Datentyp String, String bedeutet, dass wir Text rein geben können für die Variable und dann können wir das Ganze hier nun einfach unten ebenfalls verwehrt. Das heißt, hier, da wo der Text eingegeben wird, hier hinten, da machen wir jetzt erst mit dem Doppelpunkt weg, der gibt er an dieser Stelle keinen Sinn und statt diesem M geben wir es einfach den Wert unserer Variable an, den kann man nämlich hier an diesen Text einfach hinten dranhängen, indem wir sagen Widget.den Namen unserer Variable, also Unit. Weil das Ganze eine Variable ist, muss es Const hier oben natürlich jetzt wieder weg und statt dessen müssen wir das hier unten zu dem Teil geben, was sich nicht verändert. Manchmal kriegt man hier übrigens so einen Fehler, wenn man zu viel da mit Variablen und sowas hin und her ändert, dann einfach hier oben auf Play drücken und das Ganze noch einmal ausführen und wir sehen, dass hier nun alles richtig eingefügt wurde. Was wir nun natürlich noch machen können, ist hier ein Leerzeichen hinter einzufügen und auch zwischen dem Slash. Das sieht dann noch mal so ein bisschen besser aus, würde ich sagen, aber wir haben da jetzt schon mal echt was Cooles geschaffen. Außerdem sehen wir hier jetzt noch so eine ganz kleine Sache und zwar ist es so, dass hier Flutter automatisch anzeigt, wenn ein Text zu groß ist und aus dem Bildschirm raus läuft. Das ist ganz praktisch für uns, weil dann können wir schnell reagieren und können jetzt zum Beispiel einfach die Font Size sagen wir auf 32 runterstellen und dadurch halt solche Fälle verhindern, wo Text aus dem Bildschirm raus läuft.

In diesem Abschnitt werden wir unsere Elemente anklickbar machen. Ich meine, das Ganze ist ja schon ganz schön, aber unsere App sollen nicht einfach nur schön aussehen, sondern wir wollen natürlich auf die einzelnen Elemente auch drauf klicken können und genau das Ganze werden wir jetzt einmal machen. Und das Gute ist, dass man in Flutter einzelne Widgets extrem leicht anklickbar machen kann und zwar mit, wer hätt's gedacht, einem weiteren Widget. Unser Hauptwidget ist ja dieses Column Element hier, das geht hier oben auf und hier unten geht es zu. Und wir wollen dieses Element nun anklickbar machen und dafür gibt es ein weiteres Element, was man darum packen kann und das heißt, in Klammer auf, Klammer zu und das hat natürlich ebenfalls ein Child und dieses Child, wer hätt's gedacht, ist natürlich unsere Column hier, also dieses ganze Element. Das habe ich jetzt mit Steuerung X ausgeschnitten und ich füge es hier mit Steuerung V ein. Das Semikolon beendet immer alles, also das kommt hier unten rein und damit haben jetzt ein neues Widget geschaffen, was als Kind diese Column hat. Ich kann das noch mal ein bisschen formatieren, es besser lesen kann und in diesem Column ist dann wiederum hier unser oberes Element mit dem Text und dem Icon und das untere Element mit diesem Programm Syndicate. Und das Gute an diesem Inkwell ist, dass es hier eine richtig coole Funktion gibt und zwar hab ich kann das einfach auswählen und hier hinter kann ich nun eine Funktion einfügen und das Ganze hatten wir auch schon hier oben, wenn wir uns zurück denken an den Anfang, das hatte ich ja hier nur auskommentiert bei unserem Beispielprojekt, da gab es ja ebenfalls eine Funktion, die hieß Increment Counter. Die können wir uns jetzt mal runter kopieren, weil so ähnlich wollen wir jetzt auch vorgehen. Wir wollen von unserem Widget hier unten ebenfalls eine Funktion aufrufen, die einen Counter implementiert, also um 1 hochsetzt.

Das heißt, wir werden das Ganze jetzt mal machen, indem wir hier sagen, diese ganzen Slash hier wegnehmen und nun uns einfach mal diese Funktion hier aneignen. Dieses Increment Counter, das weise ich hier unten zu, wenn wir auf dieses gesamte Widget hier draufklicken, dann wird die Funktion aufgerufen und die Variable Counter, die wird um 1 erhöht. Und was wir noch machen wollen, ist diese Variable Counter natürlich auch zu verwenden und dafür sage ich, dass hier unten nicht mehr 2300 steht, das ist ja eh nur ein Testwert, sondern jetzt erstmal der Wert von unserem Counter, also hier so einfach eingefügt. Das große Problem, dass wir aktuell noch haben, ist, dass Counter hier oben den Wert Integer hat und das heißt, dass die Variable einfach eine Zahl speichern kann und kein Text. Und hier unten wollen wir jetzt die Variable mit dem Text verbinden. Und wenn ich da jetzt mit der Maus drüber gehe, dann steht da auch ganz genau, was das Problem ist. Da steht hier die Argumente empires ein toter Parameter String, bedeutet, wir können ein Text nicht mit einer Zahl verbinden. Wir müssen diese Zahl hier erst einmal umwandeln in einen Text. Das geht aber ganz einfach dort, dafür einfach hier hinter einen Punkt einfügen und dann to String schreiben, Klammer auf und Klammer zu. Und wir sehen, es hier nun wird unsere Variable hier so eingefügt. Fügt hier noch ein Leerzeichen ein, dann sieht das noch mal ein bisschen besser aus und hier haben wir jeweils den Wert null, also den Wert aus unserer Variable Counter da oben.

Wenn ich jetzt auf ein Element hier drauf drücke, sehen wir auch gleich, was passiert. Es lässt sich anklicken, es gibt sogar eine schicke Animation dazu, dass da so ein Kreis drauf ist und gleichzeitig wird unser Wert hier immer um eins hochgesetzt. Und diese Variablen, die interagieren auch unabhängig voneinander, bedeutet, ich kann hier auf alles drauf drücken und immer wird nur der jeweilige Wert erhöht. Problem ist, um jetzt hier auf 5000 zu kommen, was ich ja am Tag laufen sollte, oder hier 5000 Liter, was ich am Tag trinken sollte, das dauert natürlich ein nach ewig. Ja, deswegen will ich die Variablen nicht um 1 erhöhen, sondern um etwas mehr und deswegen kann ich hier sagen, plus gleich 200 zum Beispiel. Wenn ich das mache, dann wird mein Wert, wie wir hier sehen, immer gleich um 200 erhöht, was dann natürlich etwas schneller geht. Wenn ich neu starte, dann sind alle Werte wieder bei null und ich kann ganz entspannt wieder anfangen zu klicken. Ich drücke dir mal drauf und ich drücke hier drauf und wir sehen, das Ganze wird hier einfach die ganze Zeit erhöht und das Ganze läuft schon ziemlich cool.

Im nächsten Schritt müssen wir es auch noch unsere Grafen hier anpassen, also diese Linien und und das würde ich sagen, machen wir gleich.

In diesem Abschnitt wollen wir unsere Grafen jetzt noch ein bisschen updaten. Wir zeigen ja bei jedem Graf bis jetzt immer einfach einen festen Wert an und den wollen wir natürlich jetzt in diesem Teil.

Berechnen. Also fangen wir direkt an. Es geht um diese drei Balken, die bis jetzt immer den genau gleichen Wert anzeigen. Was wir nun machen wollen, ist, dass wir hier etwas ausrechnen. Das heißt, wir haben einen maximalen Wert von 5.000. Hier standardmäßig, der muss natürlich auch mit der Zeit individuell werden. Und dann muss dieser Fortschritt hier berechnet werden. Das heißt, wir müssen die linke Zahl durch die rechte Zahl teilen.

Ich würde sagen, wir fangen an, indem wir diese 5000 hier einmal dynamisieren. Das heißt, das Ganze sollte eine Variable sein. Das geht auch ganz einfach. Wir müssen hier oben einfach eine weitere Variable definieren. Das heißt, wir kopieren uns jetzt einfach mal eine Zeile hier. Lag. Das mache ich übrigens immer, indem ich das Ganze markiere und dann auf Steuerung D drücke. Und nachdem ich das Ganze gemacht habe, wollen wir natürlich kein String haben, sondern zum Beispiel ein Double, also eine Kommazahl. Wir könnten hier auch ein Integer, also eine ganze Zahl, aber ich nehme jetzt aber mal ein Double und dann nenne ich das hier einfach mal Max, also der maximale Wert, den es gibt. Und nachdem ich das gemacht habe, sage ich hier oben, dass es jetzt noch ein neues Feld gibt und zwar des Punkt Max. Und das geben wir jetzt hier oben ebenfalls rein. Das heißt, ich sage hier: Max Doppelpunkt 5000.

Dann bei Tätern sollte man vielleicht drei Liter am Tag trinken. Das heißt, hier sage ich, das Maximum 3000 ist. Und hier bei Fast Food oder bei Essen, da würde ich das vielleicht noch mal ein bisschen umbauen und zwar auf allgemeine Ernährung. Und da gebe ich jetzt mal Kilokalorien ein. Wenn man ein Durchschnittsmensch ist, ja, habe ich eben Herr googelt. Also bei Mann und Frau schwankt das noch mal ein bisschen, aber so der Grundumsatz liegt ungefähr bei 1.680 Kilokalorien, die man so am Tag umsetzen sollte. Man kann das Ganze jetzt vielleicht noch ein bisschen erhöhen. Man macht ja auch noch ein bisschen Sport und bewegt sich. Das heißt, ich gebe es ja einfach mal 1800 Kalorien rein.

So, und damit haben wir jetzt eine Variable namens Max, die immer unterschiedlich ist. Und die müssen wir jetzt hier natürlich statt dieser 5000 noch anzeigen. Bedeutet, ich gehe jetzt einmal hier so runter und suche nach dieser 5000. Und statt dieser 5000 gebe ich jetzt hier die Variable Widget Punkt Max. Wenn ich das mache, muss ich das hier noch in so geschweifte Klammern schreiben und hier auf der linken Seite ebenfalls. So, und damit kann ich jetzt eine Variable einfach direkt in diesen Textabschnitt hier so reinpacken. Das heißt, das könnte ich beispielsweise auch hier für machen. Manche Leute sagen, das wäre dann ein bisschen besser lesbar. Das musst du letztendlich für dich selbst entscheiden, ob du das so besser findest, aber so kann man das Ganze auch einfügen. Und das Gute ist, dieses Punkt to String, das bräuchten wir mit dieser Methode wahrscheinlich auch nicht. Wenn die Variable keinen Punkt hat, dann reicht sogar nur einfach so ein Dollarzeichen.

Ein Problem haben wir noch und zwar wird nun hier immer ein Punkt hinter angezeigt. Ja, also 3000,0 Liter. Das liegt daran, dass wir ein Double haben, also eine Kommazahl. Wenn wir das ändern wollen, dann können wir hier hinter das Max noch mal Punkt to End schreiben, Klammer auf, Klammer zu. Und dann wird das Ganze wieder umgewandelt in eine ganze Zahl, also ohne Komma Null dahinter.

Nachdem wir das Ganze gemacht haben, kümmern wir uns nun mal um diesen Balken hier. Dieser Balken, der hat aktuell immer standardmäßig 30 Prozent, also dieses 0,3. Statt diesen 0,3 möchte ich jetzt eine Variable dort einfügen und die nenne ich einfach mal Progress. Da muss man natürlich richtig schreiben: Progress. Das heißt, da wo ich auch mein Counter definiert habe, definiere ich mir jetzt eine weitere Variable. Double, weil es eine Kommazahl ist. Unterstrich Progress gleich Null. Wenn ich jetzt hier ein Unterstrich gebe, dann heißt es ja, dass die Variable über innerhalb von diesem Element hier verfügbar ist. Und diesen Unterstrich, die muss ich natürlich hier unten ebenfalls geben. Wenn ich das Ganze speichere, dann sehen wir auch gleich, dass sich unsere Balken hier verändern und alle auf Null sind.

Nachdem ich das jetzt gemacht habe, muss ich natürlich diese Variable hier noch ändern und zwar jedes Mal, wenn ich jemand Auto-Updater, date ich hier auch mein Progress ab. Ich sage also, dass mein Progress gleich der maximale Wert ist, also Widget Punkt Max. Ja, das heißt 5000, 3000 oder 1800. Und wir nehmen den Wert des Counters und den teilen wir durch diesen maximalen Wert. Das heißt, angenommen, der Counter ist bei 2500 und der maximale Wert ist 5000, dann würde ich 2500 durch 5000 teilen und dann würde natürlich für Progress 0,5 rauskommen. Das heißt, wenn ich jetzt meine App neu starte, dann sind wir ja hier wieder bei Null überall. Wenn ich jetzt hier draufdrücke, sehen wir, dass sich dieser Status auch immer updated. Das heißt, ich kann die mehrfach draufdrücken und meine Progress Bar, die geht dann immer weiter nach vorne.

Also, damit ist unsere App jetzt schon ziemlich weit. Wir können hier Werte eingeben, das Ganze wird geupdatet. Und was wir jetzt noch machen müssen, ist das Ganze natürlich auch irgendwie auf unser Handy zu bekommen.

In diesem Abschnitt zeige ich dir, wie du dein Android-Telefon in den Entwicklermodus umstellst. Das brauchst du unbedingt, damit du deine Flutter-App auf dein Handy kopieren kannst. Im ersten Schritt gehen wir in die Einstellungen. Dafür ziehen wir einfach hier die Settings runter und drücken rechts oben auf das kleine Zahnrad. Damit sind wir auch schon in den Einstellungen. Jetzt gehen wir nach ganz unten und drücken auf Telefoninfo. Hier steht jetzt Build-Nummer und dort drückst du einfach mehrfach drauf. Dann steht hier, dass noch ein Schritt fehlt und dann bist du Entwickler. Hier musst du jetzt deine PIN eingeben und damit ist der Entwicklermodus jetzt freigeschaltet. Wenn du zurück bist und nun nach ganz unten scrollst, siehst du, dass hier ein neues Menü aufgetaucht ist und zwar Entwickleroptionen. Diese sind nun angeschaltet. Hier kann man jede Menge verschiedene Sachen einstellen, wie beispielsweise das USB-Debugging. Das würde ich auch unbedingt anschalten, damit du deine App natürlich über deinen Computer debuggen kannst. Das heißt, du kannst Fehlermeldungen, die deine App auf deinem Handy wirft, am Computer auslesen.

Dafür müssen wir die Verbindung von dem Handy wieder trennen und dieses Handy noch einmal verbinden. Wenn das noch nicht funktioniert, dann gehen wir erneut in die Einstellungen, wieder in Entwickleroptionen und nehmen hier das USB-Debugging noch einmal raus und anschließend fügen wir es wieder hin. Drücken hier wieder auf OK und schauen, ob das etwas ändert. Jetzt geht hier so eine Meldung auf, wo steht, dass wir unseren Computer zulassen. Ich drücke hier auf immer zulassen und gehe auf erlauben. Wenn ich nun erneut Flutter Devices eingebe, dann sehen wir, dass nun auch unser Android-Handy hier verbunden ist. Das Ganze funktioniert und das Coole ist, dass wir jetzt hier oben auch unser Mobiltelefon sehen. Und wenn ich da draufdrücke und das auswähle und nun auf Play drücke, dann wird die Applikation auf meinem Handy installiert und gestartet.

Und nun haben wir die App auf dem Handy. Das heißt, hier ist jetzt alles bei Null und wir können hier draufdrücken und verschiedene Sachen zählen. Richtig cool. Und diese App, die kann man jetzt auch einfach so starten vom Handy aus.

Besonders cool wäre es, wenn wir bei unserer App nicht nur den aktuellen Tag sehen, sondern auch noch den Tag davor oder vielleicht sogar alle Tage aus der Vergangenheit. Genau dafür braucht man eine sogenannte PageView. Eine PageView bedeutet, dass man zwischen zwei verschiedenen Seiten hin und her scrollen kann. Man sieht also beispielsweise den aktuellen Tag und kann einmal weiter scrollen und sieht dann den Tag, der einen Tag davor war. Und genau das Ganze werden wir jetzt einmal gemeinsam implementieren.

Der aktuelle Tag und der Tag davor sind ja eigentlich von den Widgets fast das Gleiche mit einem kleinen Unterschied. Ich würde vielleicht hier noch "Heute" anzeigen und dann beim Tag davor sowas wie "Gestern" oder so. Genau aus diesem Grund müssen wir natürlich dieses Widget hier oben, ja, dieses Ding hier, was ja unsere gesamte Seite ist, einmal kopieren, damit wir das dann am Ende zweimal haben. Ja, einmal für heute und einmal für gestern und vielleicht später auch noch für mehr Tage.

Dafür legen wir uns jetzt erst einmal ein neues Widget an. Ja, ich schreibe hier wieder mal STF für ein Stateful Widget und lasse das Ganze automatisch vervollständigen mit Steuerung Leertaste. Hier wird mir nun ein Stateful Widget vorgeschlagen, das wähle ich aus und nenne das einfach mal HomePage oder so. HomePage steht oben schon, nennen wir es mal Detail Page. Noch ein großes P vielleicht und dann können wir das Ganze auch schon speichern. Hier unten wird nun ein Container ausgegeben und statt diesen Container geben wir alles aus, was wir hier oben markiert haben. Das ist ja unsere ganze Seite. Zack, ich schneide das aus mit Steuerung X und füge das statt diesen Container hier ein. Und nun werde ich diese Detail Page hier dem Body um zuweisen. Klammer auf, Klammer zu. Und dann meckert er höchstwahrscheinlich noch, dass er irgendwie so ein Const-Konstruktor haben möchte. Habe ich mir doch schon gedacht, beziehungsweise sogar vor dem State.

So, machen wir einen kurzen Test, ob das Ganze klappt und wir sehen, es scheint alles so zu funken. Die vorher hier hat sich nichts geändert, also tiptop. Nun wollen wir hier oben allerdings noch das Ding hier duplizieren und dann so eine PageView einbauen, dass man halt zwischen zwei verschiedenen Views hin und her scrollen kann. Dieses ganze Zeug hier ist ja eh auskommentiert und das brauchen wir nicht mehr. Das haben wir in einem der letzten Abschnitte gebraucht.

Was wir nun machen wollen, ist dieses Ding hier zu duplizieren und dafür braucht man eine sogenannte PageView. Eine PageView, die hat sie drin. Also schreibe ich mal rein: Children und in diese Klammer auf, Klammer zu, in diese Array kommt nun unsere Detail Page und die können wir dort sogar zweimal reinpacken. So, wollen wir das Ganze noch mal ein bisschen auf hier in extra Zeilen, damit man das auch alles besser lesen kann. Also, wir haben nun eine PageView und unsere PageView hat zwei Detail Pages. Außerdem braucht dieses Ding zwangsweise noch einen PageController. Dafür schreibe ich hier einfach mal Controller Doppelpunkt und wir weisen nun einen Controller, den wir selber definieren müssen. Hierzu, zack. Und das macht man, indem ich sage, dass diese Variable Controller hier ganz oben in meinem State dort angelegt wird. Dafür sage ich einfach: Late Controller gleich PageController. Wird wahrscheinlich auch schon vorgeschlagen. Und da geben wir jetzt eine Information rein und zwar: initialPage. InitialPage bedeutet die Seite, die als erstes von diesen beiden angezeigt werden soll. Und das ist in unserem Fall die Seite Null.

Eine PageView ist immer dynamisch dadurch, dass wir halt diesen Controller mit der Variable dort rein geben. Und deswegen müssen wir das sonst nur bei State wieder wegnehmen und dafür, man sieht es hier, unseren Detail Pages wieder hinzufügen, weil die können das Ganze ja haben. So, und weil das Ganze doppelt ist, können wir dieses Const statt dessen einfach hier davor schreiben. Speichern wir das Ganze mal und schauen uns an, was passiert. Jetzt sehen wir, dass ich hier zwischen zwei identischen Seiten hin und her schreiben kann. Ich mache das Ganze ist gerade mit der Maus und später geht das dann natürlich mit seiner Geste auf dem Handy.

Diese Detail Pages sollten jetzt vielleicht noch mal eine andere Überschrift bekommen. Ich gebe dir jetzt mal eine Headline. Ich nenne die Variable Headline und die kriegt hier den Titel "Heute" und dann kriegt das Element darunter ebenfalls eine Variable übergeben namens Headline und dort steht "Gestern" drin. Und nun muss ich natürlich sagen, dass meine Detail Page auch diese Headline hier noch bekommt. Also sage ich hier: This Punkt Headline und darunter muss ich natürlich auch sagen: Final String, weil Headline ist ja ein String, also ein Text. Headline. Nun habe ich also hier oben eine Variable an meine jeweilige Detail Page, an die linke und an die rechte übergeben und die ist mal "Heute" und mal "Gestern". Und hier unten kann sich nun über unsere Tracking Elemente vielleicht noch mal ein neuer Text einfügen, der diesen Text aus der Variable hier anzeigt. Außerdem muss ich hier noch das Wort "Widget" einfügen. Das hat vor allem den Grund, dass hier natürlich immer ein Wert angegeben werden muss.

Nun sage ich, dass über unseren drei Tracking Elementen hier auch noch ein Text angezeigt wird. Also sage ich: Text Klammer auf, Klammer zu. Und hier kommt nun natürlich Widget Punkt Headline rein. Und natürlich kommt hier auch noch ein Style rein, ja, und zwar ein TextStyle, wo wir jetzt sagen, wie groß unsere Schrift ist. Das heißt, hier kommt eine FontSize rein und Size Doppelpunkt. Ja, was nehmen wir da? Nehmen wir mal 25,0. Das ist, das muss hier noch groß geschrieben werden. Und dann ist unser Text natürlich konstant. Ja, da ändert sich nicht. Die Headline hingegen schon, deswegen darf hier oben jetzt auch kein Const mehr davor stehen. Hier hinten kein Semikolon, sondern ein Komma, ganz wichtig. Und jetzt werden natürlich, dass hier unsere einzelnen Tracking Elemente dieses Const noch kriegen. Das brauchen wir hier noch rein, damit. Und nachdem wir das Ganze gemacht haben, können wir unsere App jetzt auch mal neu laden, hier, indem ich oben auf Play drücke. Und zack, da sehen wir es. Da oben steht nun das Wort "Heute". Das können wir es noch ein bisschen größer machen. Sagen wir mal, was nehmen wir da? 48 Pixel. Und wir wollen den Text natürlich auch weiß machen. Dafür fügen wir noch ein weiteres Attribut hinzu und zwar Color Doppelpunkt Colors Punkt White.

So, sieht auch schon ganz nett aus. Und nun kann ich hier zwischen "Heute" und "Gestern" hin und her switchen. Und ich kann ja auch verschiedene Daten einstellen, können und sagen "Heute" und "Gestern" und so weiter. Das Problem, was wir es haben, das sehen wir hier. Ich stelle hier etwas ein, ich scrolle zurück, ich schaue nach vorne und die Daten sind wieder gelöscht. Weil unser Widget nur so lange, wie es aktiv ist, gewisse Variablenwerte speichert. Das Ganze müssen wir noch ändern. Mir wäre es am liebsten, wenn man Daten gleich permanent speichern kann. Und das müssen wir uns natürlich auch noch angucken.

In diesem Abschnitt lernst du, wie du Libraries in Flutter verwenden kannst. Es ist nämlich so, dass viel Code, den man so schreibt, eigentlich in jeder App fast immer das Gleiche ist. Genau deswegen gibt es sogenannte Libraries, also Code-Sammlungen, die man einfach in seinen Code importieren kann. Leute programmieren diese Libraries normalerweise einmal und dann kann man die der Allgemeinheit zur Verfügung stellen. Das Ganze habe ich auch schon mit der einen oder anderen Library gemacht, auch in Flutter übrigens. Und das Ganze hilft einfach der Community ungemein. So kann man sich auf das Wesentliche und auch die wirklich anspruchsvollen Probleme konzentrieren und kann diese allgemeinen Probleme, die eh schon hundert oder tausend Mal gelöst wurden, einfach von anderen Leuten übernehmen. Libraries sind einfach die Superpower, mit der wir auch Software entwickeln können, ohne ein riesen Team zu haben aus hunderten von Entwicklern.

Und wie man solch eine Library installiert, das gucken wir uns jetzt einmal an. Bei Flutter finden wir eine Übersicht all dieser Libraries auf dieser Internetseite pub.dev. Hier können wir nun nach verschiedenen Libraries suchen. Man kann übrigens auch einfach googeln und dann kommt man immer relativ schnell auf diese Seite für Libraries für fast alles Mögliche. Hier gibt es zum Beispiel Firebase Messaging, das ist ein Plugin, womit man zum Beispiel über Firebase Nachrichten raus senden kann. Ich glaube, zur Push-Nachrichten sind das. Sentry, ein Überwachungstool gibt es hier und hier unten auch noch jede Menge unterschiedliche Dinge, wie zum Beispiel eine Mathematik-Library für 2D und 3D Applikationen, eine Library, um etwas zu konvertieren und vieles, vieles mehr.

Hier unten sehen wir auch schon das Plugin, was wir heute installieren werden und zwar Shared Preferences. Das hier ist ein Plugin, um Daten dauerhaft auch unserem Gerät zu speichern. Es gibt ja verschiedene Variablen, die wollen wir nicht jedes Mal neu definieren, wenn wir die Applikation neu starten, sondern die wollen wir dauerhaft speichern. Zum Beispiel, wie viele Schritte wir gemacht haben, jetzt in unserer Applikation, wie viel Kalorien wir zu uns genommen haben oder wie viel Wasser getrunken haben. Das wollen wir für jeden Tag speichern. Und dieses Shared Preferences Plugin ermöglicht uns das Ganze hier auf verschiedenen Plattformen umzusetzen. Hier steht zum Beispiel, dass es unter anderem für Android, iOS und das Web unterstützt. Und das sind ja die drei Plattformen, die wir brauchen. Auch Linux, macOS und Windows ist hier möglich. Und wir können dieses Plugin ganz einfach bei uns installieren. Hier gibt es sogar einen Abschnitt in Sterling. Und wenn ich da draufdrücke, dann steht hier auch schon, mit welchem Befehl in der Kommandozeile ich das Ganze installieren kann. Ich kann diesen Befehl hier einfach mal kopieren und dann in meiner Kommandozeile hier unten, wenn ich auf Terminal drücke, eingeben.

Hier füge ich den Befehl einfach mal ein und drücke auf Enter. Das Ganze dauert einen kurzen Moment und jetzt sehen wir, dass hier unsere Library plus noch verschiedene Dependencies, die dazu notwendig sind, installiert wurden. Die ganzen Libraries werden direkt in unserem Projektordner hier heruntergeladen. Wenn ich jetzt hier links in die Datei pubspec.yaml gehe, dann sehen wir hier auch alle Libraries, die in unserer Applikation installiert wurden. Und hier sehen wir, dass hier zum Beispiel Shared Preferences drin steht, aber auch Cupertino Icons. Das ist einfach eine Sammlung von Icons, die wir verwenden können. Shared Preferences ist in der aktuellen Version installiert 2.0.8 und davor ist noch so ein kleines Haken, das heißt, es ist ein kleines Update von minimalen Versionsänderungen. Also, wenn hier hinten was sich verändert, immer noch hochgezählt wird. Wenn hier jemand aus der JavaScript kommt, diese Datei hier ist ziemlich gut zu vergleichen mit der package.json bei JavaScript.

Auf dieser Seite hier steht jetzt auch, dass das Ganze hinzugefügt wurde in meine pubspec. Das Ganze wurde jetzt eben von uns auch schon überprüft und nun können wir diesen Code in unserer dabei, unseren Code schreiben, mit dieser Zeile hier importieren. Das heißt, ich kopiere mir das Ganze, gehe hier oben in mein main.dart und wenn ich hier nach ganz oben scrolle, dann sehen wir, dass ja bereits ein Package hier importiert wurde und zwar Material. Wir nutzen die native Design und auch die Material Icons. Wenn ich jetzt hier eine neue Zeile einfüge mit dem, was wir gerade kopiert haben, dann können wir jetzt dieses Plugin namens Shared Preferences ebenfalls in unserer Applikation verwenden. Hier steht auch noch, dass das Ganze ausgegraut ist, weil es noch nicht verwendet wird. Wir haben es importiert, aber noch nicht genutzt, deswegen steht hier, wenn ich mit der Maus drüber gehe, unused import. Hier steht übrigens auch noch, dass man dieses flutter pub get noch mal ausführen muss, um das Ganze herunterzuladen. Soweit ich weiß, macht das Android Studio aber inzwischen automatisch. Wenn ihr nicht Android Studio verwendet, dann einfach diesen Befehl hier noch einmal hier unten ausführen, indem man hier einfach zack, den Befehl eingibt und auf Enter geht, dann werden die Dependencies nämlich erst heruntergeladen.

Wir haben das Plugin nun erfolgreich installiert und im nächsten Abschnitt werden wir uns einmal angucken, wie man diese Shared Preferences dann jetzt verwenden kann.

Schauen wir uns das Ganze mal in der Praxis an. Wir wollen also immer für jedes dieser drei Elemente, die wir hier haben, den Wert speichern. Das heißt, diese Null speichern und wenn ich es erhöhe, dann steht da zum Beispiel 200 oder 400 und das wollen wir immer abspeichern. Das heißt, das erste, was wir nun hier unten mal machen müssen, in unserem Widget ist natürlich solch einen Schlüssel zu generieren. Und diesen Schlüssel, den können wir eigentlich ziemlich einfach generieren, wenn wir uns das Ganze einmal angucken. Unser Schlüssel sollte letztendlich einfach eine Variable sein, die in unserem Tracking Element, was ja immer dieses gesamte Element mit der Nummer, mit der Länge und mit dem Progress Bar unten ist, gespeichert werden. Und dieser Schlüssel ist natürlich ein Text, also eine Variable vom Typ String. Diese Variable sollte auch nur Teile von unserem Tracking Element sein, deswegen fängt sie so wie die anderen beiden Variablen mit einem Unterstrich an. Und ich nenne das Ganze jetzt einfach mal Storage. Wir können das Ganze nennen, wie wir wollen, aber so kann man es glaube ich ganz gut verstehen. Ein Text kommt immer zwischen Anführungszeichen. Hier ist es egal, ob wir doppelte oder einzelne Anführungszeichen nehmen. Und das Ganze sollte ja so aussehen, das heißt, zum Beispiel 2021-10-15. Und das hier müssen wir natürlich jetzt automatisch generieren.

Dieses M hier, das können wir relativ einfach ersetzen und zwar haben wir ja bereits hier diese Variable namens Widget Punkt Unit. Diese Variable haben wir uns ja bereits rein gegeben in unser Tracking Element und das ist ja immer ML oder Kcal. Das heißt, wenn ich diese Variable hier statt dem M einsetze, dann wird jetzt nach dem Unterstrich für das, was ich hier markiert habe, entweder ML oder Kcal, also Kilokalorien eingesetzt. Übrigens gibt es hier nicht 3000 Liter, nicht mal am Tag trinken muss, sondern 3000 Milliliter. Das bedeutet, das Ganze würde ich jetzt hier auch einfach noch mal schnell ändern, indem ich hier oben einfach mal als Unit rein schreibe. Wenn wir jetzt also hier runter gehen, haben wir für diese Variable hier ML oder Kcal eingesetzt. Das Ganze hier ist übrigens noch so komisch unterstrichen, weil dieses Feld niemals benutzt wird.

Was wir noch machen müssen, ist, wir müssen das aktuelle Jahr, den aktuellen Monat und außerdem natürlich noch hier den aktuellen Tag herausfinden. Dafür kann man einfach mal googeln: Flutter get current date. Und da findet man auf so Seiten wie Stack Overflow sehr schnell eine Antwort. Dort können wir einfach mal reingucken und hier steht schon, was wir brauchen. Im ersten Schritt brauchen wir diese Variable, die uns das aktuelle Datum holt. Und dieses an diese Variable namens Now findet. Das können wir uns einfach mal ganz schnell machen. Hier. Jetzt haben wir eine Variable namens Now und dort ist das aktuelle Datum drin. Dieses Wort New, das braucht man nicht mehr, das wurde geändert. Man kann es noch verwenden, aber das Ganze funktioniert auch ohne und ist so ein bisschen besser lesbar. Wenn ich beispielsweise Now Punkt Year sage, dann bekomme ich das aktuelle Jahr. Das heißt, wenn ich jetzt beispielsweise hier einfach mal statt diesen 2021 hier reinschreiben würde: Dollarzeichen, geschweifte Klammer auf, geschweifte Klammer zu, um eine Variable einzusetzen und hier Now hier eingeben, dann wird hier automatisch 2021 eingesetzt. Genauso können wir hier beispielsweise auch statt diesen Punkt hier, hier nun ein Punkt Month schreiben. Zack, machen wir mal. Und dann sagen wir auch noch hinter Punkt gucken wir mal, was uns vorgeschlagen wird. Vermutlich ist es Now Punkt Day. Ist richtig.

Ein kleines Problem haben wir hier noch und zwar kann man auf dieses Widget Punkt Unit noch nicht zugreifen. Das geht erst, wenn dieses Ding hier gebaut wird. Das heißt, innerhalb von einer dieser Methoden, wie beispielsweise dieser Build-Methode. Das heißt, diese Zeile starte ich mir aus, indem ich sie markiere und Steuerung X drücke und füge sie hier unten ein. Wir brauchen sie ja auch erst da minimal. Müssen wir das Ganze noch abändern und zwar würde ich die Variable zwei hier setzen, aber oben schon definieren, weil vielleicht müssen wir sie ja oben auch irgendwann noch mal verändern, wenn wir beispielsweise unsere Counter erhöhen. Das heißt, hier sage ich erst mal nur, dass unser Storage Key so aussieht. Wenn ich jetzt nur als Test zum Beispiel hier einfach mal unseren Text angebe, statt diesen ganzen Zeug, was ich hier angegeben habe, nur um zu testen, ob das Ganze funktioniert. Also einfach die Text ist Storage Key, dann können wir das Ganze mal kurz testen und wir sehen, dass unser Schlüssel hier richtig generiert wurde und hier nun so angezeigt wird. Also, wir haben jetzt schon mal eine Variable, die unseren Schlüssel generiert.

Im nächsten Schritt müssen wir die Werte natürlich nun jedes Mal speichern. Und wie das Ganze funktioniert, das wird in unserer Library Shared Preferences, wenn wir da noch mal reingucken, ganz gut in einem Beispiel erklärt. Ja, wir können hier einfach auf Example drücken und dann gibt es hier jede Menge Beispiele, wie man das Ganze macht. Das heißt, erstmal müssen wir ganz oben in unserem State diese Zeile hier hinzufügen. Das ist einfach eine Variable und in dieser Variable sind nun unsere Preferences gespeichert. Ich mach das mal ein bisschen größer hier. Und damit haben wir jetzt schon mal die Preferences.

Nachdem wir das Ganze gemacht haben, gucken wir uns mal die nächsten Zeilen an. Besonders interessant ist das hier. Das ist einfach eine Funktion, die kommt ebenfalls von unserem Widget direkt und die wird immer ganz am Anfang aufgerufen. Also etwas, was wir definitiv verwenden können. Wir kopieren uns das mal rüber und hier steht auch genau drin, was passiert. Das hier kommt wieder von Flutter. Damit sagen wir einfach, dass wir jetzt diesen Init State am Anfang aufrufen. Der bedeutet, dass wir ganz am Anfang einfach hier diesen Code hier ausführen. Ja, soweit das Ganze geladen wird, wird dieser Code hier ausgeführt und hier wird nun die Variable Counter, die wir glücklicherweise sogar schon abend befüllt und zwar mit dem, was aus dem Preferences kommt. Das Ganze ist jetzt noch unterstrichen, weil das hier ein sogenanntes Future ist. Wenn du aus der Welt von JavaScript kommst, dann kennst du vielleicht schon ein Promise. Ein Future ist letztendlich fast das Gleiche wie ein Promise, eine sehr ähnliche Datenstruktur. Und es geht letztendlich darum, dass wir warten müssen, bis dieses Ding hier aus unserer Datenbank oder aus unserem Speicher geladen wurde. Und erst wenn das Ganze geladen ist, dann wird es der Variable zugewiesen. Und das Ganze kann man auflösen mit einem sogenannten Await Statement.

Damit das funktioniert, müssen wir der ganzen Funktion sagen, dass hier etwas asynchrones drin stattfindet. Und das macht man einfach, indem man hier das Wort Async nutzt. Für Leute, die bereits mit JavaScript entwickelt haben und das Konzept von Promises und asynchroner Programmierung bereits kennen, mag das hier leicht zu verstehen sein. Wenn du noch nie programmiert hast, was in der Akademie lernen die Leute das ungefähr nach zwei bis drei Monaten kennen. Ja, also, das ist kein Konzept, das man jetzt am ersten Tag programmieren verstehen sollte oder verstehen kann, so ohne weiteres, sondern da muss man einfach sich ein bisschen gedulden, bis dieses Konzept hier sitzt. Mit dem Speicher zu interagieren ist leider ein bisschen anspruchsvoll, aber wenn man ein bisschen Erfahrung sammelt, mit der Zeit, ein paar Monate, dann versteht man das hier auf jeden Fall ganz gut.

Letztendlich heißt es einfach nur: Wir laden etwas aus unserem Storage. Wir holen hier ein Integer, also eine ganze Zahl, raus. Und wenn die nicht existiert, geben wir als Alternative eine Null zurück. Und das Ganze, sobald es fertig geladen ist, hier wird aufgelöst und dann der Variable Counter zugewiesen. Wir wollen hier allerdings jetzt keine Variable mit dem Schlüssel Counter raussuchen, sondern sondern mit diesem Schlüssel hier Storage Key. Und genau deswegen müssen wir hier oben nun schon bereits unsere Variable Storage initialisieren. Und diesen Key, den wir jetzt bereits hier generiert haben, den können wir jetzt hier bei Counter statt dessen reinpacken.

Damit haben wir unsere Variable, nachdem das Ganze jetzt hier bereits rausgeladen wird aus unserem Storage, müssen wir das Ganze natürlich auch noch speichern, wenn wir hier oben etwas hinzufügen. Das heißt, hier brauchen wir jetzt eine neue Zeile, um das Ganze in unserem Preferences zu speichern. Da gibt es hier garantiert auch ein Beispiel. Und zwar hier oben. Hier steht bereits, wie das geht. Und zwar steht hier: Preferences Punkt Set and Done. Hier der Key und der Value. Das Punkt Done sparen wir uns jetzt einfach mal und gehen einfach hier hoch und sagen, dass wir außerhalb von diesen Set State, das braucht mir nicht, einfach sagen, dass wir in unseren Schlüssel, also mit unserem Schlüssel Storage Key, hier die Variable Unterstrich Counter speichern wollen. Tag fertig.

Wenn ich jetzt über dieses Set und gehe, dann sehe ich, dass es hier immer noch ein Fehler gibt und zwar der Message Set in Blamable ist noch tief ein Future Type Future, was bedeutet, dass Preferences ist ein sogenanntes Future. Steht auch hier oben vom Typ Future. Und ein Future ist einfach so ein Prozess, der erst ausgeführt werden muss und dann irgendwann ist er fertig. Und erst dann können wir darauf zugreifen. Das liegt einfach daran, dass es vielleicht ein bisschen dauert, diese Shared Preferences zu laden. Dieses Future muss man auflösen und das macht man, indem man davor ein sogenanntes Await schreibt.

So, zack, zack, zack, zack. Das ist übrigens genau das Gleiche, was wir auch hier unten machen. Es gibt zwei Möglichkeiten, ein Future aufzulösen: Entweder mit Await oder mit Punkt Then. Hier können wir das auch noch ein bisschen vereinfachen, indem wir einfach Await Preferences so darum packen. Dann ist das Ganze hier schon einmal aufgelöst. Und dann können wir auch direkt innerhalb von diesem Future zugreifen auf den Storage Key. Ja, das heißt, wir können das hier so stark machen und dann ist das Ganze noch mal ein bisschen leichter. Das heißt, wir lösen hier unsere Preferences auf. Und sobald das Ganze aufgelöst ist, können wir nun ein Integer, nämlich eine ganze Zahl, laden mit unserer Schlüssel, den wir vorhin hier oben definiert haben. Und wenn das Ganze vorhanden ist, dann wird es unserer Variable zugewiesen. Und wenn das Ganze noch nicht vorhanden ist, dann wird stattdessen diese Null einfach in den Counter eingeschrieben, weil wir dann standardmäßig, wenn wir noch nichts gespeichert haben, einfach eine Null für den Counter speichern wollen. Das macht ja Sinn.

Unsere Preferences hier oben sind auch noch unterstrichen. Wenn ich davor gehe, steht da: Private Field Could Be Final. Das heißt, dass ich hier einfach das Wort Final vorschreibe. Das bedeutet, dass wir diese Variable hier nicht mehr ändern. Hier oben sehen wir auch noch, dass etwas unterstrichen ist. Wenn ich darüber gehe, steht hier: Private Field Could Be Final, was so viel bedeutet wie, wir könnten dieses Feld noch markieren, das ist nicht mehr änderbar ist, indem wir hier das Wort Final ganz am Anfang schreiben. Das haben wir ja öfter schon gemacht, hier oben auch, dass diese Variablen im Laufe des Programms nicht mehr geändert werden. Und das macht einfach Sinn, um noch mal ein bisschen Speicher zu sparen. Ja, dadurch ist unsere App noch mal ein bisschen schneller, dass wir die Variablen, die wir sicher nicht mehr ändern werden im Laufe unseres Programms, noch mal mit dem Wort Final markieren.

So, jetzt haben wir das Ganze gemacht und jetzt wird hier noch ein Fehler in Zeile 101 angezeigt und zwar, dass das Await hier noch nicht funktioniert, weil wir, wenn wir dieses Await verwenden wollen, immer unserer Funktion ein weiteres Wort hier oben zuweisen müssen und zwar Async. Dieses Await, das löst ja immer asynchrone Prozesse auf und dafür müssen wir in unserer Funktion noch angeben, dass diese Funktion überhaupt asynchrone Prozesse beinhaltet mit diesem Wort Async. Wie gesagt, dieses Async und Await, das sind Sachen, die kriegen die Leute bei uns in der Akademie erst so im dritten Monat zu sehen und da gibt es auch sehr, sehr viele Übungen, so dass am Ende.

Da wirklich keine Fragen mehr offen sind, okay. Jetzt haben wir allerdings hier der Funktion gesagt, dass das Ei sinkt und Weight hier drin ist. Und nun sehen wir auch hier in der Tat in Alice, dass wir keine Fehler mehr haben. Und jetzt können wir ja mal gucken, was passiert, wenn wir auf Ausführen drücken.

So, die App ist fertig und wir sehen, dass hier gleich ein Fehler aufgetreten ist. Das ist ganz normal, Fehler muss man halt einfach mit der Zeit immer mal wieder fixen. Ja, ich empfehle deswegen auch jedem Anfänger erst damit etwas anzufangen, wo man die Fehler etwas leichter fixen kann. Genau, deswegen sage ich auch als Anfänger solltest du immer mit Web anfangen. Ja, also erst HTML, CSS und dann mit JavaScript. Da ist die Frustration am Anfang deutlich weniger und deswegen ist es für Anfänger einfach deutlich besser.

So steht hier allerdings, okay, die Funktion in Estate. Ja, können wir mal raussuchen, die hier fast wie weit Matheson Keyword. Also hier darf man dieses Asic nicht verwenden. Und wenn das so ist, dann müssen wir das jedoch wieder rausnehmen. Und das bedeutet mit anderen Worten, dass man hier leider nicht diese moderne Schreibweise, die wir jetzt gemacht haben, hier wählen kann, sondern dass wir leider jedoch wieder diese alte Schreibweise, wir müssen die wir vorher hatten, also mit diesem Punkt denn da rein. Okay, und da kommt nun ein Semikolon rein.

So kann man das ganze nämlich auflösen. Und nun kommt dort rein noch eine Funktion, die aufgerufen wird, sobald unser ganzes Element hier ausgeführt ist. Und hier sage ich nun, ich kann es noch mal ein bisschen vereinfachen, wenigstens ein klein bisschen besser lesen kann. Unser Counter wird nun zu den Preferences gesetzt. Ja, hier schreibe ich einfach mal Preis ohne Unterstrich, damit eine neue Variable ist. Das sind jetzt die geladenen Preferences. Das hier sind die ungeladenen Dinge. Und so weit das ganze geladen ist, greife ich darauf zu und sage Punkt geht.

Das heißt, wir laden das ganze. Und nun, wenn das ganze geladen ist, weise ich meiner Variable Counter hier das Ergebnis mit dem Schlüssel Storage Key hinzu. Und wenn das nicht existiert, und dann die Zahl null speichern. Und nochmal neu ausführen. Und nun scheint das ganze zu klappen. Und der Vorteil ist jetzt, dass in unserem Local Storage, also in unseren Shared Preferences, hier einfach alles gespeichert wird. Kann hier mal etwas erhöhen und erhöhen und erhöhen. Und wir starten unsere Applikation neu und wir sehen, dass unsere 600 hier nach wie vor steht.

Ganz einfach, weil hier dieses In-State er immer ganz am Anfang aufgerufen wird und hier wird nun auf unsere Einstellungen zugegriffen. Und sobald wir auf die Einstellungen zugegriffen haben, wird nun hier unser Counter gefüllt. Wir sehen allerdings auch, da ist dieser Progress-Balken hier nicht mehr gefüllt. Und das liegt daran, dass wir die Variable Progress nur hier oben ausrechnen und nicht hier unten. Wir müssen natürlich hier unten ebenfalls unserem Progress ausrechnen. Warum? Weil unser Progress hier oben natürlich nur ausgerechnet wird, wenn diese Funktion hier aufgerufen wird. Und das passiert ja nur, wenn wir auf ein Element draufklicken.

Also werden wir das ganze jetzt hier kopieren und hier unten einfach einfügen. So, das bedeutet jedes Mal, wenn unser Programm gestartet wird, wird nun diese Variable hier befüllt und diese Variable hier ausgerechnet. Wie gesagt, es reicht nicht einfach das hier zu ändern, dann reloaded sich zwar die Applikation, aber sie wird nicht neu gestartet. Dafür müssen wir hier oben auf das Play drücken. Reload heißt, dass dieses In-State hier am Anfang nicht ausgeführt wird. Das wird nur bei einem Neustart der Applikation ausgeführt. Und wir sehen, sagt hier ist das ganze befüllt.

Also, wir haben es jetzt schon mal geschafft, dass unsere Daten mit dieser Library, die wir uns installiert haben, hier abgespeichert und geladen werden. Herzlichen Glückwunsch. Unsere Applikation hat jetzt noch zwei kleine Fehler. Nummer eins ist, wenn wir jetzt hier in unserer App zum Beispiel nach rechts scrollen und dann wieder zurück scrollen, sehen wir, dass hier die ganzen Werte weg sind. Das liegt daran, dass unsere In-State Methode hier oben nur ganz am Anfang einmal aufgerufen wird. Und wenn wir die App irgendwie nicht neu starten, aber ein Widget irgendwie neu rendern, ja, indem wir hier hin und her gehen, dann wird es ja neu gerendert, dann wird diese Bild Methode aufgerufen, aber nicht die In-State Methode. Und deswegen werden dann hier die Zahlen nicht mehr angezeigt.

Und Problem Nummer zwei, der Storage Key ist immer der gleiche, egal ob wir unsere Daten für heute geändert haben oder für gestern. Es ist immer genau das gleiche. Das müssen wir noch anpassen und dann haben wir auch schon eine funktionsfähige App. Dieses In-State ist ja ganz schön, aber wir brauchen noch eine Funktion, die immer aufgerufen wird, wenn unser Widget neu gerendert wird. Und da gibt es auch eine. Man fängt ja diese Funktion, die vom Framework kommen, immer an mit einem @override. Und nachdem wir das gemacht haben, können wir nun den Namen der Funktion schreiben. Sie fängt die damit weiter an und die heißt die Change die Tendenz. Es wird wahrscheinlich schon vorgeschlagen, wenn wir hier das ganze auch richtig schreiben.

So, da haben wir sie. Und nun Klammer auf, Klammer zu. Diese Funktion wird nun immer aufgerufen, wenn sich hier irgendetwas updated. Das heißt, dieses Zeug hier, was die Einstellungen legt und dann den Status Update, zack, die packen wir einfach dort runter. Wenn die Variablen geupdatet werden, wird aber nicht gleich die Bild Methode noch mal neu aufgerufen. Das ganze läuft ja etwas asynchron ab, dadurch dass die Einstellungen hier geladen werden müssen. Das heißt, die Reihenfolge ist, die Funktion wird ausgeführt, mehr oder weniger gleichzeitig mit dieser hier, und dann werden die Einstellungen geladen und dann werden erst die Variablen hier befüllt. Das heißt, wenn unsere App gerendert wird, dann ist es so, dass hier noch die alten Werte, also noch nicht die geupdateten Werte der Variable aus dieser Einstellung, die hier geladen wird, drin sind. Und deswegen steht hier immer noch null überall.

Man kann jetzt diese Bild Methode neu triggern, dass die neu aufgerufen wird, indem man hier um diese Variablen Set State drumherum packt. So, auf Enter. Und diese beiden Variablen hier, die schneide ich aus und Steuerung X und füge hiermit Steuerung V ein. Dadurch, dass ich das gemacht habe, werde nun diese Variable nicht nur gesetzt, sondern gleichzeitig wird nach dem Setzen dieser Variablen hier noch diese Bild Methode neu aufgerufen. Und wenn ich das ganze jetzt speichere, dann sehen wir auch gleich, was passiert. Unser erstes Problem ist schon einmal gelöst. Egal wie viel wir jetzt hier hin und her schalten, es ist immer so, dass die Zahlen hier geladen sind. Das ganze klappt also schon mal.

Einziges Problem, was wir jetzt noch haben, ist, dass es für heute und für gestern die gleichen Werte angezeigt werden. Das müssen wir jetzt auch noch fixen. Und das geht auch relativ einfach. Und zwar ist es ja so, dass wir hier unseren Schlüssel immer bestehend aus dem Jahr, dem Monat und dem Tag haben. Und was wir machen müssen, ist, dass dieser Tag hier natürlich nicht immer der aktuelle Tag ist, sondern am besten geben wir noch eine Variable hier ein, die sagt, wie viel Tage wir in die Vergangenheit gehen wollen. Ja, das heißt, die Variable ist wieder mal ein. Und weil das ganze ja eine ganze Zahl ist. Und nun sage ich Days zu nenne ich meine Variable. Die können wir jetzt angeben und die hat zum Beispiel die Zahl null, wenn wir den heutigen Tag anzeigen wollen, eins, wenn wir einen Tag zurückgehen wollen, zwei, wenn wir zwei Tage zurückgehen wollen und so weiter.

Das ganze muss ich hier oben im Konstrukt auch noch angeben. Also kopiere ich das ganze. Dafür markiere ich diesen Text hier und drücke Steuerung D, dann haben wir das ganze hier kopiert. Und hier schreibe ich jetzt statt Max rein Days in Past, weil das ist ja die Variable, die wir hier neu eingeben wollen. Weil das ganze Rekord ist, das ist jetzt eine Pflichtvariable. Wird hier oben, wo wir unsere Widgets verwenden, natürlich nur gemeckert. Das ganze wird hier nun komplett so unterstrichen. Und hier wird nun gesagt, hey, was willst du bitte? Gebe mir hier die richtige Zahl an. Und hier muss ich jetzt sagen, Days and Past natürlich als weitere Variable. Zack, zack, zack. Und die braucht nun Wert. Das heißt, hier muss nun entweder für den Wert Doppelpunkt null angegeben werden oder Doppelpunkt eins angegeben werden.

Und das Problem ist, dass wir, ob wir nun null oder eins hier rein geben wollen, das geben wir noch ein Widget weiter oben. Ja, wir geben das ja hier oben an, bei der die Page, da wo jetzt Headline heute oder gestern steht, da wollen wir jetzt die Variable Days and herbst auch noch rein geben. Das heißt, ich schreibe jetzt hier ebenfalls sagt Days im Test und hier kommt null Tage rein und hier kommt ein Tag rein, weil heute da gehen wir null Tage in die Vergangenheit, gestern da gehen wir einen Tag in die Vergangenheit.

Nachdem wir das ganze gemacht haben, können wir nun hier unten natürlich noch angeben, dass wir diese Variable auch brauchen, in dem Widget, über das rein geben. Also geben wir noch eine zweite Variable rein. Und auch hier im Konstrukteur müssen wir sagen, zack, dass wir eine zweite Variable rein geben wollen. Also die Detail Page hat nun eine zweite Variable namens Days. In diese Variable hier, die geben wir nun weiter nach unten, dort wo wir mit unserem Budget jetzt das nächste Widget aufrufen, nämlich unsere Tracking Elements. Und hier geben wir nun den Wert der Variable rein, in dem wir sagen, go it.de. Machen wir für alle 30 Typen hier.

Und nachdem wir das ganze gemacht haben, wird nun hier immer entweder null oder eins ein gegeben. Natürlich wird hier ist noch irgendwas gemeckert. Hier steht noch drei using ist Harry moving to work r keyword konz, einfach weil das ganze jetzt natürlich keine Konstante mehr ist, sondern eine Variable. Deswegen muss hier oben das Wort Konst entfernt werden. So kommt hier immer weg. Und dadurch kann man hier hinten jetzt auch Variablen verwenden. Jetzt muss man natürlich an anderen Stellen wieder dieses Konst einfügen. Ich gehe mal auf die Daten Alizes und das gute ist, hier kann man häufig einfach rechtsklicken und dann kann ich hier sagen, ignoriere das ganze oder Konst modifier. Das heißt, ich kann mir das ganze hier einfach automatisch mit Rechtsklick hinzufügen lassen. Da muss ich nicht lange erst mal rausfinden, wo ich das ganze denn jetzt hinzufügen muss.

Zeile 113 gibt es auch noch ein kleines Problem und zwar ganz wichtig. Hier muss ich unbedingt noch so wie hier oben auch die Methode unbedingt vom Element, wovon wir das erben, aufrufen. Und das mache ich mit Super Punkt des Change die Penaltys. Jetzt haben wir hier unten auch alle Fehler behoben und ich führe die App einmal neu aus.

Alles, was wir jetzt noch machen müssen, ist diese Variante, die wir hier ganz oben rein geben, auch zu verwenden. Ja, dieses Buch haben wir es hier, Days im Test, null oder eins. Das müssen wir jetzt auch noch hier ganz unten verwenden. Und die machen wir das Ganze. Wir haben ja gesagt, dass wir hier unseren Schlüssel generieren. Unser Schlüssel, ja, wenn ich etwas das mal da unterschreibe, ich rücke das mal so ein Tickchen ein, damit man sieht, da würde hier immer stehen 2021, hier würde stehen neun, haben wir gerade aktuell noch ein paar Tage, und jetzt würde hier stehen Punkt Date und da haben wir gerade den 27. und dann würde hier stehen, Unterstrich Juni zum Beispiel, Milliliter. So.

Und wir wollen jetzt letztendlich diesen Schlüssel ja nicht für jeden Tag gleich haben, sondern hier sollte gegebenenfalls eine 26 stehen. Das heißt, was wir jetzt machen müssen, ist von dieser 27, also vom Punkt Date, den aktuellen Tag immer etwas abzuziehen und zwar entweder diese null oder diese eins, je nachdem, wie viel Tage wir in die Vergangenheit gehen wollen. Und das ist ja immer Widget Punkt Days in Pest. So wird uns auch schon vorgeschlagen. Und jetzt wird hier meine 27 und meine 26 reingeführt, je nachdem, was unsere Variable dort für einen Wert hat. Es wird immer null oder es wird eins abgezogen.

Jetzt starte ich unsere App noch einmal neu. Ja, ist ganz wichtig. Und nun sehen wir, dass für heute andere Werte gespeichert sind als für gestern. Ich kann jetzt hier zum Beispiel 400 reinpacken und wir sehen, es werden einfach immer andere Sachen hier gespeichert und die werden auch wieder geladen, wenn wir die Applikation jetzt neu starten. Das heißt, wir haben jetzt für mehrere Tage hier etwas gespeichert. Und das Coole ist, ich kann sogar jetzt problemlos dank unserer Smart ein Architektur hier noch einen weiteren Tag hinzufügen. Ja, wenn ich diese Zeile hier dupliziere, so und hier ist rein schreiben würde, vorgestern und hier sagen würde, da gehen wir zwei Tage in die Vergangenheit zurück, dann können wir auch das machen. Und dann haben wir einfach so drei Seiten. Und das kann man auch beliebig weiter spielen. Wenn ich jetzt sagen möchte, ich möchte den letzten Monat zurückgehen, dann kann man dafür auch etwas bauen. Ja, das lässt sich nun beliebig erweitern. Und das ist halt das Coole an Softwarearchitektur, dass man nun hier beliebig viele Tage einfach so hinzufügen kann und das Ganze bearbeiten kann.

Was man jetzt noch nicht kann, ist zum Beispiel Zahlen wieder zu löschen. Ja, das ist aber auch gar nicht schwer. Ich würde sagen, das gebe ich dir einfach mal an dieser Stelle als Aufgabe mit. Versucht das Ganze mal selbstständig umzusetzen, dass du unten einfach noch so einen Button einfügst, der als Löschen und dann werden die Einstellungen für den gesamten Tag wieder gelöscht.

Wenn du dieses Tutorial jetzt komplett durchgearbeitet hast, dann hast du es geschafft, ein erstes Programm mit Flutter zu erstellen und hast die Grundlagen darüber gelernt, wie man Applikation fürs Handy und auch für das Web erstellen kann. Herzlichen Glückwunsch. Aber bevor wir jetzt gleich abschalten, lass mir noch ein paar Sachen mit auf den Weg geben.

Nummer eins, wenn du Programmierer Anfänger bist, dann wird dir aufgefallen sein, dass es ein paar Sachen bei Flutter gibt, die einfach noch ein bisschen kompliziert sind. Das liegt daran, dass Flutter einfach noch ein relativ neues Framework ist und auch dort eine relativ neue Programmiersprache und da gibt es einfach noch ein paar Sachen, die gerade für Programmierer Anfänger nicht besonders einfach sind. Nummer eins ist natürlich die Installation, der ganze Software allein, das ist schon mal eine etwas größere Hürde als wenn du jetzt zum Beispiel mit JavaScript startest.

Außerdem ist es so, dass auch einige Fehlermeldungen auftreten und die muss man natürlich auch erst mal verstehen und die sind auch teilweise etwas schwieriger zu fixen als bei. Ja, was wird klar gibt es in Android Studio einige Tools, die haben immer schnell anzeigen, was man zu tun hat, aber es ist trotzdem schon ein bisschen anspruchsvoll. Und teilweise liegt es auch gar nicht an dem Programmierfehler, sondern daran, dass man einfach das Gerät noch häufiger neu starten muss oder die App neu starten muss. Genau deswegen empfehle ich einfach jedem Anfänger da draußen erst einmal mit Web anzufangen. Da hat man einfach deutlich weniger Frustration, wenn man Programmierer Anfänger ist.

Und vor allen Dingen ist es auch so, dass da draußen einfach deutlich mehr Webentwickler gesucht werden als Flutter Entwickler. Das heißt, wenn es dein Ziel ist, einen Job als Programmierer zu finden, dann würde ich mich definitiv bei der ersten Programmiersprache auf Web konzentrieren und nicht auf Flutter. Außerdem ist es so, dass es dazu, einfach weil die Sprache schon viel länger existiert und von viel mehr Leuten benutzt wird, zahlreiche Sachen im Internet gibt. Zu JavaScript wirst du garantiert zu jeder Fehlermeldung genau die Lösung finden, die du brauchst. Genau deswegen bringen wir den Leuten in unserer Weiterbildung auch JavaScript bei und nicht Flutter.

Wenn du jetzt sagst, hey, Programmieren noch mehr super Spaß und ich möchte gerne auf ein Level kommen, dass ich damit auch einen Job finde, aber du schaffst es einfach nicht gut genug zu werden und ein Portfolio aufzubauen, was so aussagekräftig ist, dass du damit auch dich wirklich bewerben kannst und du weißt einfach nicht, wie du davor gehen kannst und du hättest gerne Ansprechpartner und strukturierten Faden und jemanden, der dir immer genau Schritt für Schritt sagt, was du zu tun hast und dich nicht alleine lässt, so lange bis zum ersten Job bist, dann klick gerne mal auf den Link ganz oben in der YouTube Beschreibung. Dort findest du alle Informationen zu unserer Weiterbildung und dort kannst du auch ein kostenloses Beratungsgespräch mit uns vereinbaren.

Ansonsten schaue ich natürlich gerne auf diesen YouTube-Kanal. Um hier gibt es jede Menge Videos und Tutorials zum Thema Programmieren. Zu fast allen Programmiersprachen, die gängig sind, wirst du hier etwas finden und auch zu häufigen Fehlern und wie du am schnellsten vorankommst und wie du dich am schnellsten in die Richtung Beruf als Software-Entwickler entwickeln kannst, wirst du hier Videos finden. Ansonsten würde ich sagen, wir sehen uns wieder im nächsten Video. Mach's gut, dein Yunus.