Flutter, Dart und mehr !

  Und weiter geht es mit Columns in Bootstrap 5. Im letzten Post hatten wir uns schon einige Varianten angeschaut. Prinzipiell geht es um die Positionierung innerhalb der Row. Die einte Variante funktioniert über die row css3 Klasse , die andere Variante über die col css3 Klasse .  Wir kennen bereits: align-items-start , align-items-center , align-item-end . Mehr dazu erfahren Sie in diesem Post . Sie positionieren über die row Klasse . Die Positionierung über die col Klasse haben wir im erwähnten Post, mit Hilfe von align-self-start , align-self-center und align-self-end umgesetzt. Diese Positionierungen hatten sich alle auf die vertikale Richtung bezogen . In der horizontalen Richtung konnten Sie im erwähnten Post justify-content-start, justify-content-center und justify-content-end  kennen lernen. Nun geht es weiter mit justify-content-around Mit dieser Bootstrap 5 Klasse wird der freie Raum horizontal, gleichmäßig unter dem Inhalt der row verteilt. Der Abstand zwischen jedem

  Weiter geht es mit dem Thema Listen in der Programmiersprache Dart. Sie könnten jetzt denken, okay, zu viel Arbeit .Ich schaue mir die Methoden und Funktionen an, wenn ich sie benötige .  Natürlich kann man so vorgehen. Sie sollten aber im Hinterkopf behalten, das eine gute Kenntnisse der Hauptklassen in Dart hilft, von Anfang an, die richtigen Dart Bordmittel zu wählen, um Ihre Problemstellung zu lösen. Das als Randnotiz. Wie immer wurde der Beispiel Code im DartPad getestet und ist mit Dart. 2.13 lauffähig. List. take Die Methode List.getRange(...) hatte wir ja schon betrachtet. In die gleiche Kategorie fällt List.take . Der Unterschied ist, das .getRange(...) einen Teilbereich der Liste  zurückgibt, den wir durch die Position im Index definieren. Dieser Bereich kann durchaus am Ende der Liste sein. List.take beginnt am Start der Liste und überführt die spezifizierte Anzahl Einträge in ein neues Iterable . Verwenden Sie .toList(...) am Schluss, können Sie das Ergebnis gleich

  Im ersten Teil zu diesem Thema hatten wir uns Listen mit fixer Grösse und growable Listen angeschaut. Unter growable Listen darf man solche verstehen, die grösser, aber auch kleiner werden können. Natürlich bietet Dart noch eine Anzahl weiterer Möglichkeiten, wie Sie Listen einsetzen können. Die Code Beispiele in diesem Post sind mit Dart 2.13 getestet. List.generate Es kommt durchaus oft vor, das man bei der Entwicklung einer Anwendung Testdaten benötigt. Im ersten Teil konnten Sie schon List.filled kennenlernen. Jetzt schauen wir uns List.generate an. Ein Beispiel: Im Code oben wird eine Liste generiert mit 5 Objekten vom Typ Person .  In der Klasse Person selbst sieht man, das die toString(...) Funktion durch @override überschrieben wird. So ist es möglich, das in der Print(...) Schleife der main Funktion, die entsprechenden Objekte in die Konsole gedruckt werden. List.generate(Anzahl der Einträge,(index)=> Funktion zum erstellen eines Eintrags in die Liste . Nun gehen

  Vor langer Zeit hatte ich in diesem Blogg schon einmal das Thema Listen aufgegriffen. Im ersten Post dazu, anhand eines einfachen Beispiels. Anschliessend war die Iterable Klasse ein Thema, welche mit der List Klasse einen engen Bezug hat. Abschließend wurde das Thema dann noch in einem zweiten Post vertieft. Wie oben geschrieben war das vor langer Zeit und es macht Sinn das Thema noch einmal aufzugreifen und sei es nur um das Wissen dazu aufzufrischen. Alle Code Beispiele wurden mit Dart 2.13, Null safety aktiviert, getestet . 2 Sorten von Listen Dart stellt zwei Arten von Listen zur Verfügung: eine mit fixer Grösse und eine die "wachsen" kann. Im Code oben sehen Sie zwei Versionen, wie Sie eine Liste definieren können. Wichtig dabei ist, das Sie die leere Liste erst dann über den Index ansprechen können, wenn Sie mindestens einen Eintrag hinzugefügt haben !  Im Vergleich zu früheren Dart Versionen hat sich das erstellen einer Liste mit fixer Länge geändert. Aktuell

  Das ist der zweite Post zum Thema Spalten (Column) in Bootstrap 5 . Im ersten Teil konnten Sie lernen, wie Sie einfach und schnell 3 Kolumnen erstellen.  In diesem Post werden wir das Thema vertiefen. Zuerst aber ein nützlicher Tipp : Vor allem zu Beginn ist es schwierig, den Überblick über die Klassenbezeichnungen von Bootstrap zu behalten. Hier hilft ein CheatSheet . Dort finden Sie die Bezeichnungen kompakt aufgelistet ! align-items-start Mit der align-items-start Klasse für die Reihe (Row) wurden die Spalten am Anfang, also start, positioniert: align-items-center Mit der align-items-center Klasse positionieren Sie ihre Kolumne mittig in der Reihe: align-items-end Zum Abschluss darf natürlich align-item-end nicht fehlen. Wie Sie sicher vermuten positionieren Sie so Ihre Kolumne am Ende der Reihe: Nun ändern wir unser css3  File vom letzten Post leicht ab: Neu sehen Sie jetzt eine border Formatierung mit der Farbe Weiß. Dies dient der bessern Übersicht.  Bis jetzt haben wir die

  In Part 1 zu diesem Thema haben Sie gelernt, wie Sie typedef im Zusammenhang mit Funktionen benutzen können.  In diesem Post vertiefen wir das Thema. Zu Beginn aber erinnern wir uns wieder an das Prinzip:  Mit typedef definieren Sie einen Typ. In Dart gibt es bereits definierte Typen. Nehmen Sie als Beispiel int . Mit int zahl = 53 definieren Sie, das die Variable zahl vom Typ int , also Integer ist. Sollten Sie im Verlauf Ihres Programmes die Variable zahl falsch verwenden, wird Dart einen Fehler generieren. Wenn Sie mit typedef eine Definition machen, wird auch diese durch Dart im weiteren Verlauf des Codes überprüft und ein Fehler generiert, wenn der Typ falsch verwendet wird. Sie können einen typedef Typen auch als Parameter verwenden: Beispiel: Der Code oben ist im DartPad lauffähig. Der entscheidende Code oben ist:  MeinTyp flutterCoder . Damit definieren Sie die Variable flutterCoder mit MeinTyp. Vor der aktuellen Version von Dart ( 2.13 ) war typedef nur mit Funkti

Dart ist aktuell in der Version 2.13 verfügbar. Die neueste Version bringt unter anderem type aliases , aber dazu in einem andern Post mehr. Ich weiß nicht wie es Ihnen geht, aber Ich habe mich bis jetzt nicht mit dem Thema typedef befasst. Ich nehme die aktuelle Version zum Anlass das zu ändern. Den Begriff alias kennt man: Etwas, das bereits einen Namen hat, einen anderen, neuen Namen geben. Michael zum Beispiel könnte ja auch bekannt sein, als "Biker Mike". Auf Dart bezogen sieht das aber anders aus. typedef Frischen wir aber unser Wissen auf. So definieren Sie eine Integer Variable: int  nummer =  2 ; Was tun Sie hier aber genau ?: Sie bestimmen zuerst den Typ, engl. type , der Variable. Im Beispiel oben mit int für Integer . Anschliessend wird eine Bezeichnung vergeben: nummer . Die Wertzuweisung dürfte klar sein. typedef in Dart macht das selbe, aber für Funktionen . Betrachten Sie diesen Code: typedef   Senden  =  void   Function ( String  nachricht); Nach dem S

  In diesem Post lernen Sie mehr über Bootstrap 5 und Columns .  Falls Sie ältere Posts zum Thema Bootstrap 5 interessieren: einfach links auf der Page bei den Tags, Bootstrap wählen. Bootstrap 5 funktioniert innerhalb eines Gridsystems und bietet einfache Möglichkeiten Html Elemente zu positionieren. Eines dieser Elemente ist Container. Eine gängige Strategie ist es in so einem Container, Reihen und Spalten anzuordnen, um ein gewünschtes Layout umzusetzen. In diesem Post gehe ich speziell auf die Spalten, engl. columns ein. Sollten Sie die Code Beispiele nachvollziehen wollen, empfehle ich noch einmal den Post zum Thema Template zu lesen. Wie meistens in diesem Blog wurde der Code mit Visual Studio Code , in einer Windows Umgebung geschrieben. Es ist empfehlenswert die LiveServer Erweiterung zu installieren. Mit dieser können Sie ihren Code Live im Browser ausführen lassen ! css3 Im Html Code werden wir eine Row (Reihe) erstellen und in dieser 3 Kolumnen .  Ihnen sollte bewusst

In den bisherigen Posts haben Sie einen ersten Zugang zu diesem Thema bekommen. Anhand von  Visual Studio Code wurde das Erstellen eines Templates besprochen, um im nächsten Post das erste Mal mit Dart auf ein Html Element zu zugreifen. Wichtig ist das Prinzip zu verstehen : Wir haben zwei Dateien, eine Html Datei und eine Dart Datei . Damit der Code in der Dart Datei auf Html Dokument zugreifen kann, muss er das gesuchte Html Element identifizieren können ! Beispiel 1 Html: < input   type = "number"   id = "nummer"   name = "zaehler"   value = "999" > Ein einfaches Html input Element. Mit der type Zuweisung von "number" generieren Sie ein Zahlenfeld mit Bedienelementen. Außerdem wird mit value der Initialwert des Feldes auf 999 gesetzt. Die einfachste Variante dieses Element zu identifizieren ist die id . Sie muss einzigartig im ganzen Html Dokument sein. Aber auch über type , name und, falls vorhanden class , können

  Im letzten Post zu diesem Thema haben Sie den Container von Bootstrap 5 kennen gelernt. Aber bevor man eine Website programmiert, selbst eine einfache, sollte man sich Gedanken über die Struktur machen. Html 5 gibt uns hier einige Möglichkeiten an die Hand.  Um hier keine Verwirrung aufkommen zu lassen, lohnt sich ein genauer Blick auf die Details. Das Html Dokument Mit Dokument ist die komplette Html Datei gemeint. Diese beinhaltet Informationen die im Browser dargestellt werden und solche die dem Browser helfen, die Html Datei korrekt im Browser darzustellen. Das <head>...</head> Element zum Beispiel wird zum überwiegenden Teil nicht im Browser dargestellt. Trotzdem ist es für eine Website unverzichtbar. Im Gegensatz dazu, wird das allermeiste, was wir im <body>...</body> Element programmieren, im Browser sichtbar sein. Body - der Körper Mit Html5 können wir, müssen aber nicht , den Body Bereich noch weiter unterteilen : <header>...</header&g

In einem jüngeren Post konnten Sie sehen, wie man von Dart her einen Prozess startet.  Am Beispiel des Where Befehls innerhalb der cmd.exe von Windows haben wir ein File auf der Festplatte gesucht . So ein Vorgehen macht aber nur Sinn, wenn man das Ergebnis weiter verwenden kann. Im ersten Post zu diesem Thema haben wir die Ausgabe des Prozesses einfach umgeleitet und durch unseren Code in das Terminal geschrieben. Jetzt möchten wir die Informationen aber speichern. Hier der Code: Der Code ist im Vergleich zu dem ursprünglichen Beispiel ein wenig gewachsen.  LineSplitter Um die Funktion LineSplitter nutzen zu können binden wir sie über die dart:convert Library ein. Mit dem Zusatz show LineSplitter  , utf8 zeigen wir an, das nur diese Funktionen in unserem Code benötigt wird. LineSplitter selbst teilt eine Zeichenkette in Linien auf. Dabei werden unterschiedliche Codes für das Ende einer Linie berücksichtigt. transform Hatten wir im ersten Post den Ausgabe Stream des Prozesses ein

  Ohne Html wäre das Internet in seiner heutigen Form nicht möglich.  Ich will in diesem Post nicht auf die Geschichte dieser Sprache eingehen. Da der Leser bei diesem Post gelandet ist, gehe ich davon aus, das erste Kenntnisse schon vorhanden sind. Da ich in meinem Blog auch über meine Erfahrungen mit Bootstrap 5 schreibe, bietet sich das gleiche auch für Html an. In loser Reihenfolge werde ich in Zukunft auf entsprechende Themen in diesem Bereich eingehen. Dabei ist nicht ein kompletter Überblick über Html das Ziel Dafür gibt es ausreichend Quellen im Internet. Vielmehr möchte ich einzelne Elemente in den Fokus stellen, die ich später noch mit Bootstrap 5 weiter bearbeiten möchte.  input Am Internet wird vor allem auch seine Interaktivität geschätzt. Damit ist gemeint: Der Benutzer kann Eingaben vornehmen, Links anklicken und anderes mehr.  Hier spielt in Html der <Input>  Tag eine prominente Rolle: <input type="text" id="vname" name="vname"

  Es kann vorkommen, das man wissen muss, wann eine Datei zum letzten Mal geändert wurde, wann der letzte Zugriff erfolgte. Die entsprechenden Funktionen sind in der dart:io Library zu finden.  Der erste Ansatz bietet die FileStat Klasse: accessed Wenn man diese Eigenschaft ausliest, erhält man das Datum, des letzten Zugriffs auf das entsprechende File System Objekt. modified Diese Eigenschaft informiert über das Datum der letzten Änderung an dem File System Objekt. changed Die letzte Eigenschaft aus der FileStat Klasse die noch in diese Gruppe gehört, informiert über die letzte Aenderung an den Daten oder Metadaten des File System Objekts. Wichtig: Auf Windows Maschinen erhalten wir hier das Erstellungsdatums des Files . Den zweiten Ansatz bietet die File Klasse von Dart:  lastAccessed(...) / lastAccessedSync(...) Diese Funktion gibt es in einer synchronen und asynchronen Version. Sie gibt das Datum des letzten Zugriffs auf das File zurück. In der asynchronen Version ist der Rüc

  Ich finde es ist Zeit sich noch einmal  näher mit dem Thema Files zu beschäftigen. In einem schon älteren Post hatte ich darüber geschrieben, wie Sie zum Beispiel herausfinden, auf welcher Platform Ihr Dart Code läuft.  Oder wie Sie Files lesen und schreiben. In diesem Post geht es darum einen CMD (Eingabeaufforderung) Befehl auszuführen. Konkret: Where   Mit Where ist es möglich den absoluten Pfad einer Datei zu finden, immer vorausgesetzt, die Datei existiert. Der Befehl selbst hat verschiedene Optionen. Hier aber zuerst den Dart Code : Der Code im Detail: Wir benötigen die dart:io Library und binden sie als import ein. Den Code könnte man als Version für zwei Betriebssysteme anlegen, z.b. Apple und Windows.  executable Um den Code zu verstehen sollten Sie wissen, das das Kernstück dieses kleinen Programms  Process.start ist. Durch das Argument runInShell : true  wird die  cmd.exe von Windows als Prozess gestartet. Where wiederum funktioniert innerhalb der cmd Umgebung