Flutter, Dart und mehr !

  Bei dem Designen von Websites spielen Container eine prominente Rolle. Es wird nicht empfohlen, sie zu verschachteln. Aber es können durchaus mehrere auf einer Website benutzt werden. Container sind aktuell ein Standardwerkzeug in der Html Programmierung, aber kein offizielles Html Element. Dementsprechend werden sie auch nicht als <Tag>...</Tag> benutzt. Vielmehr wird Container als Css3 Klasse implementiert. Bootstrap 5 hat seine Umsetzung, andere Systeme eventuell eine abweichende Implementierung. Wichtig ist: Wer von dem Layoutsystem von Bootstrap 5 profitieren will, insbesondere das Bootstrap Grid System, kann die Benutzung von Container nicht vermeiden.  Betrachten wir einmal die drei Hauptvarianten. Beispiel-Code: Wir sehen im Code oben schon den wichtigsten Punkt. Die container Klasse von Bootstrap 5 wird einem <-div>...</div> Tag zugewiesen.  Dabei stellt Bootstrap drei Hauptvarianten zur Verfügung: container : der Standard contai...

Bisher: Wir haben ein Template für ein Dart Web Project erstellt, Bootstrap 5 integriert . Bei Bootstrap 5 haben wir gelernt, das es ein 12 Kolumnen / Spalten Layoutsystem, ein wesentlicher Bestandteil dieses Frameworks ist. In diesem Post werden wir näher auf die Verknüpfung zwischen unserem Dart File und index.html eingehen. Bevor wir das tun, ein Hinweis auf DOM . Die Abkürzung steht für Document Object Model .  Wenn ein Browser eine Webpage lädt, erstellt er im Speicher ein DOM der Webpage . Sie dient für JavaScript , aber natürlich auch für Dart , als Interface . Damit ist gemeint, das dieses DOM   eine baumartige Struktur zur Verfügung stellt, in welcher wir uns unter Verwendung von Dart bewegen. Ich werde hier nicht weiter darauf eingehen, da es im Web genügend Ressourcen gibt, die weitere Informationen dazu liefern. Schauen Sie sich noch einmal den Code der index.html Datei an: <html> <head> <meta charset="utf-8" > <meta http-eq...

  In diesem Blog habe ich Artikel über Bootstrap ( 1 , 2 , 3 , 4 ) und die Erstellung eines Templates für ein kleines Webprojekt mit Dart ( 1 ) online gestellt.  In diesem Post werden wir als ersten Schritt unser Dart Web Template um die Möglichkeiten von Bootstrap ergänzen ! Wenn Sie die Homepage von Bootstrap 5 besuchen, findet sich dort ein Template für den unkomplizierten Einsatz von Bootstrap. Wenn Sie das Template betrachten fällt auf, das vor allem zwei Links , die Verbindung zwischen index.html und Bootstrap herstellen. Zur Erinnerung hier noch einmal die index.html Datei unseres Dart Web Templates :  <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <meta http-equiv="X-UA-Compatible" content="IE=edge" > <meta name="viewport" content="width=device-width, initial-scale=1.0" > <meta name="scaffolded-by" content="https://github.com/dart-l...

  Die Programmiersprache Dart ist nicht nur für Flutter wichtig.  Von Hause aus, ist sie in der Lage mit Html Dokumenten umzugehen. Damit ist jetzt nicht AngularDart gemeint, oder die Möglichkeit mit dem Flutter Framework Web Apps zu erstellen. Vielmehr kann man Dart als Ersatz für JavaScript anwenden. Mit dart2js kann Dart Code in JavaScript gewandelt werden Wieso sollte man dann nicht gleich zum Original greifen und JavaScript verwenden ? Die Antwort auf diese Frage: Wenn Sie Dart lernen, können Sie mit einer Sprache alle wichtigen Gebiete abdecken. Web, Mobile, Serverprogrammierung, für alle diese Gebiete kann man Dart einsetzen.  Voraussetzungen Dieser Post geht davon aus, das sie mit dem frei erhältlichen Visual Studio Code arbeiten. Benutzen sie einen anderen Code Editor, können die notwendigen Schritte um ein Projekt zu generieren, deutlich abweichen. Sie sollten ausserdem natürlich Dart installiert haben. Sollten Sie Flutter bereits installiert haben, ha...

  In einem älteren Post hatte ich mich bereits mit dem Thema, wie man ein File öffnet und den Inhalt liest beschäftigt. In diesem Post befassen wir uns eingehender mit dem Thema. Wenn Sie ein Programm schreiben das File Operationen vornimmt, wissen Sie in der Regel, wohin und in welches File Sie die Daten schreiben. Wenn Ihr Programm aber vom Benutzer Speicherorte entgegen nimmt, wird es wichtig, mit ihnen umzugehen. Starten wir mit folgendem Code: import 'dart:io' ; import 'package:dart4/dart4.dart' as dart4; Directory meinDir; List < FileSystemEntity > files; FileSystemEntity file; FileStat f1; void main(List < String > arguments) { meinDir = Directory( 'E: \\ Test' ); // 1 files = meinDir.listSync( recursive: true ); // 2 for (file in files) { print(file.absolute); // 3 f1 = file.statSync(); // 4 print(f1.toString()); // 5 } } Beschreibung : Für File Operationen müssen Sie die dart:io Bibliothek in Ihren...

  Im letzten Post haben Sie anhand eines kleinen Beispiels den ersten Einsatz von Bootstrap gesehen.  In diesem Post wollen wir tiefer eintauchen ins Thema und werfen einen Blick auf das Grid System von Bootstrap ! Wenn wir den Begriff ins Deutsche übersetzen, erhalten wir: Rastersystem . Der Gedanke dahinter: Wir unterteilen die sichtbare Fläche (Bildschirm) und erhalten so eine Ordnung, an der wir uns orientieren können. Ein Bild zur Veranschaulichung: Im Bild oben sehen wir so ein Rastersystem. Da wir in Html unweigerlich mit row (Reihe) und col (Kolumne/Spalte) in Verbindung kommen, ist es naheliegend, das Bootstrap sein Grid System darauf aufbaut.  Zum besseren Verständnis: Im Bild oben sehen 12 Spalten, jeweils markiert mit der 1 .  Die zweite Reihe ist unterteilt in Flächen, die jeweils 2 Spalten breit sind, markiert mit 2 , usw. Das Grid System von Bootstrap hilft dabei, das unsere Website auf verschiedenen Bildschirmen (Mobile, Tablet, Desktop) ähnli...

Dart für Anfänger 2.0 For Each Loop 1 Im letzten Post in dieser kleinen Reihe hatten wir uns mit if , for und for..in beschäftigt. Die For...Each Schleife ist eine bequeme Möglichkeit eine Sammlung von Daten zu bearbeiten. Bevor wir das testen können, sollten wir eine Sammlung erstellen und zum Einstieg noch einmal die for(..) Variante betrachten. Bitte beachten Sie: Alle Code Beispiele in diesem Post sind mit DartPad lauffähig. Beispiel: class StaeDte { // 1 StaeDte( this .name, this .usa); String name; bool usa; } void main() { var stadt1 = StaeDte( 'Hamburg' , false ); // 2 var stadt2 = StaeDte( 'Köln' , false ); var stadt3 = StaeDte( 'München' , false ); var stadt4 = StaeDte( 'Düsseldorf' , false ); var sammlung = [stadt1,stadt2,stadt3,stadt4]; // 3 for ( int s =0 ; s < sammlung.length;s ++ ){ // 4 print( 'Die Stadt ${ sammlung[s].name } ist in den USA ? ${ sammlung[s].usa } '...