Syntax des StatelessWidgets

Syntax des StatelessWidgets

StatelessWidget-Syntax besteht aus folgenden Teilen:

  1. das Word class
  2. Name des Widgets (hier MyWidget)
  3. das Word extends, mit dem wir erben Eigenschaften und Methoden einer Parent-Klasse
  4. StatelessWidget – der Name der Klasse des Parent-Widget, den wir erweitern wollen
  5. im Body (zw. den geschweiften Klammern) stehen ein Konstruktor und die Methode build()

Alles über Stateless Widgets –> https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html?ref=le-quoc-khoi-blog-cong-nghe-lap-trinh-de-hieu-cho-nguoi-viet

ein gutes Video über Seattles Widgets –> https://youtu.be/wE7khGHVkYY?si=xh9593-bZKHkx_c0

Das UI-Herz eines Widgets ist die build()-Methode.
Mit dieser Methode wird ein UI-Element erzeugt und weiter eine UI-Komposition, indem Sie Widgets in andere Widgets verschachteln.
Auf diese Weise entsteht eine baumartige Datenstruktur: Jeder Widget kann andere Widgets enthalten, die üblicherweise als untergeordnete Widgets bezeichnet werden.
Diese hierarchische Anordnung von Widgets als Elementen-Baum ermöglicht der Parameter context mit dem Typ BuildContext.
Dieser context ist – im weiteren Sinne – an sich der UI-Elementen-Baum.
Um zu wissen, wo welcher Element (Widget) sich im Baumstruktur befindet, braucht der context eine Art Widget-ID.
Dafür hat jeder Widget einen key-Parameter und wenn ein Widget erzeugt wird, wird diesem key-Parameter implizit ein Key-Wert vergeben.

Hier ist ein Beispiel dafür, wie der key-Parameter in einer Widget-Klasse „Center“ definiert ist:

Formatierung in VS Code

Automatische Code-Fixes & Formatierung in VS Code

1. VS Code > Command Palette –> in der Eingabemaske Preferences: Open User Settings (JSON) eingeben und auswählen

2. im „{} settings.json“-Datei innerhalb der geschweiften Klammern die folgende Code eingeben:


1
2
3
4
5
6
7
8
9
"[dart]":{
        "editor.tabSize": 2,
        "editor.formatOnSave": true,
        "editor.formatOnType": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": true,
            "source.fixAll": true
        }
    }

Dart & Flutter Links

https://dartpad.dev/
Ingo zum Buch „Flutter-Apps für Dummies“ https://losfluttern.de/pummelthefish/
Zusatzmaterialien zum Buch https://github.com/novas1r1/pummel_the_fish
Network: https://www.meetup.com/pro/flutter/
Google Developer Group: https://gdg.community.dev/
Podcast: https://podcasters.spotify.com/pod/show/flutter-dach
https://stackoverflow.com/
https://docs.flutter.dev/
https://dart.dev/guides
Flutter Grundkurs 1 (Saban Ünlü):
https://www.linkedin.com/learning/flutter-grundkurs-1-okosystem-entwicklungsumgebung-einrichten/in-die-plattformubergreifende-applikationsentwicklung-mit-flutter-einsteigen?resume=false&u=36053084

Lernquellen

1. Programmiersprachen in 10 Minuten(Thomas Rose, LinkedIn Learning)
2. Dart Clean Code: Writing High-Efficiency, Maintainable Dart Programs (Temidayo Adefioye, LinkedIn Learning)
3. Flutter Essential Training: Build for Multiple Platforms (Pooja Bhaumik, LinkedIn Learning)
4. Flutter Grundkurs 1 (Saban Ünlü, LinkedIn Learning)
5. W3school (Syntax nachschlagen + Übungen)
6. Dart & Flutter: Zerro to Master [2023] (Maximilian Berktold,Udemy)
7. Dart Tutorial (Geeks For Geeks)

Links

QUIZ: Grundlagen der Programmierung (Basiswissen)
Stack Overflow

QUIZ: Grundlagen der Programmierung (Basiswissen)