Flutter Code Tip: Media Queryof

Eine Frage die sich beim programmieren eines Layouts in Flutter stellt, ist die nach den Bildschirmdimensionen. Möchte man ein Layout erstellen, das Rücksicht auf das verwendete Gerät nimmt, muss man Vorkehrungen treffen. Eine Möglichkeit dabei ist die Verwendung folgenden Codes:




Der Code selbst erklärt sich eigentlich von selbst. Entscheidend dabei ist die Benutzung der Klasse
Media Query und der Funktion MediaQueryof() .
Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Dart Basic: Listen Part 1

Bild
In diesem Post wenden wir uns einem Basiselement fast jeder Programmiersprache zu, der Liste. Als Laie könnte man meinen, okay ein einfaches Thema, aber wen man genau hinschaut, ist es vielfältiger, als man denken möchte. Eine Liste kann nicht wachsen ? Es gibt Situationen, da wissen wir im Vorfeld schon, wie groß eine Liste sein wird.  Die Liste deiner Freunde zum Beispiel oder eine Liste deiner Familie. Der Anfang ist einfach. Wir haben eine Variable, meineKleineListe , diese ist vom Typ List<String> . Ihr weisen wir anschließend mit new List(5)  ein neues Listen Objekt zu . Unsere Variable meineKleineListe kann nun als Liste angesprochen werden und hat genau...wir sind verwundert..Platz für 5 Einträge. Kommen wir aber noch kurz zum Titel dieses Abschnitts, von wegen wachsen. Da wir mit new List(5 ) explizit festgelegt haben, das die Liste 5 Einträge haben soll, wird sich unsere Entwicklungsumgebung mit einem Fehler zu Worte melden, sollten wir versuchen ei...
Mehr anzeigen

Flutter: ein eigenes Widget erstellen und einbinden

Bild
Wenn man sich mit Flutter beschäftigt, stößt man früher oder später an Grenzen. Dabei meine ich jetzt nicht eine spezifische Problemstellung, sondern vielmehr die Strukturierung und die Organisation des eigenen Codes. Das mag einem geübten, professionellen Programmierer nur ein müdes Lächeln entlocken. Menschen die programmieren lernen, ob jetzt aus beruflichen Gründen, oder aus Spaß an der Sache, eher weniger. In diesem Post schauen wir uns deshalb, die Möglichkeit an ein Custom Widget zu verwenden. Starter Code  Über die letzten Artikel habe ich den Starter Code eigentlich nicht mehr verändert. Er dient als Anker für die Demo Widgets die ich erstelle, um Flutter zu testen: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import 'package:flutter/material.dart' ; import 'package:flutter/rendering.dart' ; import 'package:tutflutter_002/meine_widgets.dart' ; void main() { debugPaintSizeEnabled = false; runApp(MeinDemo()); }...
Mehr anzeigen

Flutter Widgets - Column

Bild
Das Flutter Widget - Column Wie schon an anderer Stelle in diesem Blog geschrieben, programmiert man die grafische Oberfläche in Flutter  mit Widgets. Eines dieser Layout Widgets ist das Column Widget. new Column(     children: [       new Text('Erste Linie Text'),       new Text('Zweite Linie Text'),       new Text('Dritte Linie Text'),     ], ) Dieses Widgets stellt seine "Kinder" vertikal dar, in diesem Beispiel drei Zeilen Text. Wichtig dabei ist, das dieses Widget nicht scrollt, d.h. gibt man mehr "Kinder" an, als auf dem Bildschirm dargestellt werden können, kann man nicht scrollen. Es werden einfach diejenigen angezeigt, die auf dem Bildschirm Platz haben. Die Grundeinstellung, also ohne die Angabe von zusätzlichen Atributen, stellt die Kinder vertikal und zentriert dar. Die Breite dieser "Column" ergibt sich dabei aus ihrem breitesten Child. Zentriert heisst in diesem Zusammenhang, nicht zentr...
Mehr anzeigen