Flutter 2021 - Widget Kenntnisse vertiefen (Android Studio)
Wie ich bereits schon einmal in dieser kleinen Serie geschrieben habe, lässt sich der Begriff Widget nicht wirklich ins deutsche übersetzen.
Rein oberflächlich betrachtet handelt es sich um Code Elemente, die ich mit Werten ausstatten kann. Diese Code Elemente wiederum kann ich miteinander verknüpfen.
Das Widget, welches ich aktuell bearbeite, kann ein übergeordnetes Widget besitzen, ein Eltern Widget also, und hat selbst eventuell einen child: Eintrag, ein Kinderwidget also.
Familie oder Bäume
Ob Du das besser visualisieren kannst, indem du dir die Eltern - Kind Beziehung von Widgets vor Augen führst, oder ob Dir das Bild einer Baumstruktur mehr hilft, bleibt Dir überlassen. Während die Eltern - Kind Beziehung bei benachbarten Widgets klarer ist, beschreibt das Baum Sinnbild, den Überblick über eine Struktur die viele Widgets enthält gut. Die Flutter Anwendung beginnt mit einem Widget und verästelt sich dann immer weiter, mit immer mehr Widgets.
Im weiteren Verlauf dieser Flutter Serie werden wir sehen, das Kinder Widgets gewisse Eigenschaften ihrer Eltern Widgets erben können, sie also übernehmen.
Hier sind wir stehen geblieben:
Schauen wir uns noch einmal die letzte Version unseres ErsterScreen Codes an. Das Widget ErsterScreen bringt einen Text auf den Bildschirm des Mobilphones:
Aus Sicht von dem Center Widget ist das Material Widget, das Eltern Element. Falls das Center Widgets Werte übernimmt, sie erbt also, dann von dem Material Widget.
Das Center Widget kann, falls überhaupt, nur Eigenschaften an sein Kind vererben. Im Code oben also das Text Widget.
Diese Zusammenhänge sind für ein tieferes Verständnis von Flutter wichtig, erst recht bei einer Fehlersuche. Für das weitere eingehen auf das Thema Widgets lösche ich den bisherigen Code und starte von vorne. Ist ja auch keine große Sache, schließlich war es nicht viel Code 😀.
Neuer Code
Hier zuerst einmal die Ordner Struktur:
Die sieht ganz ähnlich aus, wie im letzten Projekt. main.dart als Hauptfile, ein Ordner bild_schirme und darin ein File test_schirm.dart.
Für diesen Post verzichte ich auf einen Scaffold. So bleibt der Code in main.dart sehr klein:
Im Code von test_schirm.dart haben wir im Vergleich zum alten Code neues:
const Testschirm( {Key? key}) : super(key: key);
Halte Dir vor Augen, das wir Testschirm Widget nennen, es aber auch eine Klasse ist! Die Linie oben ist der Konstruktor dieser Klasse. Den Parameter key muss man im Verbund mit context sehen. key (Schlüssel) dient Flutter dazu, ein Widget eindeutig zu identifizieren. context wiederum ist ein Link zu dem Standort des Widgets in der Gesamtstruktur der Anwendung. Ein context kann dementsprechend nur zu einem Widget gehören. Ich könnte jetzt noch mehr zu dem Thema schreiben, aber das ist nicht der Sinn dieses Posts. Den Code kannst Du nun im AVD (Emulator) ausführen und solltest folgenden Bildschirm bekommen:
Container
Rechts im Bildschirm siehst Du das Debugg Banner und der Text ist doppelt unterstrichen. Zum ersten mal setze ich in diesem Code Container(...) ein. Es lässt sich mit dem div Tag in Html vergleichen.
Das Container Widget ist dazu gedacht, ein child: Widget zu umschließen. Aber schau Dir einmal die Parameter an, die Du diesem Widget übergeben könntest:
alignment: Mit diesem Parameter kannst Du das child: Widget innerhalb des Containers positionieren. Ein möglicher Wert wäre hier z.B. Alignment.center .
padding: Der leere Raum zwischen dem child: und der Container Begrenzung. Hat der Container z.b. eine Höhe von 100 und das Padding ist 10 kann das child: maximal eine Höhe von 90 haben.
width: die Breite des Containers als double Wert.
height: die Höhe des Containers als double Wert.
Oben siehst Du noch weitere Parameter, aber dieser Post hat nicht den Container(...) als Thema 😀.
Als Anfänger möchte man im ersten Moment natürlich eine Höhe und Breite vergeben. Im Code oben sind diese Parameter noch nicht gesetzt und der ganze Bildschirm ist blau, der Text ist zentriert.
Wieso das ? Ich habe doch Höhe und Breite gesetzt !
Ein Widget in Flutter kann natürlich nicht eine xbeliebige Breite oder Höhe haben. Die zulässigen Werte für z.B. maximale Höhe und Breite eines Widgets, ist von dem Eltern Widget abhängig. In Flutter spricht man von constraints, oder auch Box constraints. constraints (Einschränkungen) bestehen aus vier Werten:
maximale Höhe, mindest Höhe, maximale Breite, mindest Breite
Diese vier Werte bestimmen, was für Werte für Breite und Höhe zulässig sind. Beim lernen von Flutter kommt erschwerend hinzu, das man entweder den max Wert von Höhe oder Breite, auch auf Infinity (unendlich) setzen kann ! So ein Widget wird im englischen dann als unbounded Widget bezeichnet, also als unbegrenztes Widget.
Wofür ist das gut ? Es gibt Situationen in Flutter, wo dies Sinn macht, z.b. ListView oder ScrollView. Dazu ein anderes Mal mehr.
Im Code oben ist der Container ein child: von MaterialApp(...). MaterialApp gibt constraints an unseren Container(...) weiter. Da MaterialApp den gesamten Bildschirm belegt, tut dies der Container auch und ignoriert die Parameter für Höhe und Breite.
Wie lässt sich das Problem lösen ?
Ganz einfach: Ich integriere den Container in ein Widget, welches diese Werte respektiert !
Ihm Code oben benutze ich das Center(...) Widget. Ich hätte aber auch auf den Scaffold(...), Row(...) ,Column(...) oder das Padding(...) Widget verwenden können. Im AVD (Emulator) sieht das dann so aus:
Nun werden die Angaben für Höhe und Breite umgesetzt. Wir könnten den Container(...) jetzt noch vergrößern um den Zeilenumbruch zu vermeiden😀.
Fazit: Du kannst Dir jetzt etwas unter der Eltern-Kind Beziehung in Flutter vorstellen. Du hast gesehen, das Dimensionsangaben für Widgets Einschränkungen unterworfen sind und wir haben einen ersten Blick auf key: und context geworfen.
Das war es für diesen Post. Bis bald !
Kommentare
Kommentar veröffentlichen