Scroll View ListView mit Flutter 2

Cards in Flutter sind gedacht für die optische Darstellung einer überschaubaren Anzahl von Informationen. Während ich mir im ersten Teil das grundsätzliche angeschaut habe, waren mir jetzt die abgerundeten Ecken der Designelemente wichtig.
Beim erstellen des Codes ist mir aufgefallen, das mir noch einiges nicht ganz klar ist, vor allem im Umgang mit Bildern, sprich Icons.

Beim Card Widget erhält man die abgerundeten Ecken über folgenden Code:


Wobei hier shape eine Eigenschaft der Card Klasse ist. Beim Bild selbst, kann man das gleiche über folgenden Code erreichen:

child:ClipRRect(...child:Image.asset(...)..borderRadius:..)

Obwohl im Code alle Card Widgets die gleichen Werte besitzen, was Padding etc angeht, werden sie in unterschiedlichen Dimensionen angezeigt. Das ist etwas, was ich noch genauer anschauen muss und will :-)) Vielleicht mache ich das alles, aber auch viel zu kompliziert.. Hier der Code:

Das Ergebnis meiner Bemühungen:


Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Material Design in Flutter Teil 2

Bild
Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex
Mehr anzeigen

Flutter -- ohne Dart geht es nicht 2 -- einfache Variablen Typen

Wer sich noch einmal den ersten Teil durchlesen möchte, geht auf diese Seite . Ohne Variablen kann man nicht programmieren. Dar t stellt uns eine Reihe von Variablen Typen zur Verfügung, wobei man immer im Hinterkopf behalten sollte: Alle Variablen Typen in Dart sind auch Objekte! Alle Variablen haben den Startwert NULL .  Beispiel: int jahr = 2018 ;   // int = Variablen Typ für ganze Zahlen z.b.: 1 oder 39 oder 5315 Der Variable mit dem Namen jahr weisen wir den Wert 2018 zu. Wir hätten für die Variable jahr , auch folgende Deklaration verwenden können: var jahr = 2018 ; In dieser Variante wird Dart jahr ebenfalls als int Variable behandeln. Der große Unterschied ist jedoch, das wenn wir im späteren Programmverlauf, dieser Variable ohne Fehlermeldung z.b. einen String zu weisen können. Während dies bei der int Version zu einer Fehlermeldung führen würde . Einer int Variablen können wir aber auch einen hex Wert zuweisen: int seltsame Zahl = 0xEADEBAEE
Mehr anzeigen

Flutter -- Tutorial Teil 6 Provider Part 2

Bild
In Part 1 zum Thema Provider haben wir den Code vorbereitet, auf den wir das "Muster" Provider anwenden möchten. Noch einmal zur Erinnerung: Der Code wurde in Visual Studio Code getestet, sollte aber auch in Android Studio problemlos laufen. Der Beispiel Code wurde dem Video von RetroPortalStudio entnommen. Ich empfehle sich das Video anzuschauen, vorausgesetzt man besitzt genügend Englisch Kenntnisse, um dem Audio Kommentar zu folgen. Als erstes werden wir unser Scaffold Widget in ein neues Widget einbetten. Visual Studio Code unterstützt uns dabei mit "Wrap with new Widget" !  Man klickt dazu auf die kleine Glühbirne und wählt im Drop Down Menu den entsprechenden Eintrag aus.  ChangeNotifierProvider(...)  heisst unser neues Widget und ist durch den Import von provider.dart verfügbar geworden: 1 2 3 4 5 import 'package:flutter/material.dart' ; import 'package:provider/provider.dart' ; import 'wetterinfo.dart' ;
Mehr anzeigen