Flutter Beispiel 6 -- BoxDecoration

Container -- mit BoxDecoration

Container in Flutter kann man leicht unterschätzen. Manche vergleichen sie mit dem Div-Tag in Html. Sie gehören aber zu den häufigst gebrauchten Flutter Widgets, wenn es darum geht ein Layout zu programmieren. Hier links sehen wir ein einfaches Rechteck, mit blauer Hintergrundfarbe und einem zentrierten Text. Hier der Code dazu auf GitHub.

Mit Verwendung von BoxDecoration können wir den Rand, den Körper des Containers, und gegebenenfalls den Schattenwurf des Containers kontrollieren. Dieser Container kann rechteckig, aber auch rund sein. Wichtig dabei ist auch zu wissen, wie Flutter diesen auf den Bildschirm bringt. Flutter zeichnet dabei in Ebenen. Die erste ebene die gezeichnet wird, ist die Hintergrundfarbe, welche den Container ausfüllt. Sollten wir dabei noch einen Gradienten definiert haben, kommt der als nächstes obendrauf. Beide Arten füllen den Container komplett aus. Sollte der Container noch ein Bild enthalten, wird dieses als nächstes gezeichnet, wobei dessen genaue Positionierung innerhalb des Containers durch eine eigene Klasse kontrollier wird. Zu guter letzt zeichnet Flutter den Rand, "über" den Körper des Containers und einen eventuellen Schatten...natürlich unter ihm.

Natürlich kann man mit den Möglichkeiten die das Container Widget bietet, spielen. BorderRadius hat zum Beispiel einige Varianten, so können wir zum Beispiel noch den Wert blurRadius benutzen, um den Schatten weich zu zeichnen. Ebenso ist es möglich die Stärke des Rands zu setzen, oder nur spezifische Ecken des Quadrats abzurunden. Auch zu diesem Beispiel findet man den Code hier. Ich gehe hier jetzt nicht auf alle Möglichkeiten ein ,die da Container Widget bietet. Es gibt da noch einige....



import 'package:flutter/material.dart';



void main() => runApp(MeineApp());

class MeineApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Beispiel",
home: new Scaffold(
body: Center(
child: new Container(
width: 100.0,
height: 100.0,
child: Center(child: new Text("Hello")),
decoration: new BoxDecoration(
border: new Border.all(
color:Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
color: Colors.blue,
borderRadius: BorderRadius.all(
new Radius.circular(
10.0
)
),
boxShadow: [new BoxShadow(
color: Colors.grey,
offset: new Offset(3.0, 3.0),
blurRadius: 5.0,
)],
),
),
),
),
);
}
Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Listen in Dart (2021): Part 1 List.filled List.empty und List.add

Bild
  Vor langer Zeit hatte ich in diesem Blogg schon einmal das Thema Listen aufgegriffen. Im ersten Post dazu, anhand eines einfachen Beispiels. Anschliessend war die Iterable Klasse ein Thema, welche mit der List Klasse einen engen Bezug hat. Abschließend wurde das Thema dann noch in einem zweiten Post vertieft. Wie oben geschrieben war das vor langer Zeit und es macht Sinn das Thema noch einmal aufzugreifen und sei es nur um das Wissen dazu aufzufrischen. Alle Code Beispiele wurden mit Dart 2.13, Null safety aktiviert, getestet . 2 Sorten von Listen Dart stellt zwei Arten von Listen zur Verfügung: eine mit fixer Grösse und eine die "wachsen" kann. Im Code oben sehen Sie zwei Versionen, wie Sie eine Liste definieren können. Wichtig dabei ist, das Sie die leere Liste erst dann über den Index ansprechen können, wenn Sie mindestens einen Eintrag hinzugefügt haben !  Im Vergleich zu früheren Dart Versionen hat sich das erstellen einer Liste mit fixer Länge geändert. Aktuell
Mehr anzeigen

Dart und Klassen

Bild
Dart und Klassen -- ein erstes Beispiel Objekte und Klassen sind wesentliche Bestandteile der objektorientierten Programmierung. Ich habe eine kleines Video zu meinen ersten Erkenntnissen in diesem Bereich gemacht: Im Video oben wurde die Klasse mitArbeiter definiert. Anschließend eine Funktion bzw im Klassen/Objekt Kontext eine Methode des selben Namens: mitArbeiter() . Sie übernimmt als Argumente 3 Strings. Was hat es damit auf sich ? Bei der Erstellung einer Klasse können wir Konstruktoren definieren, was an sich eine Funktion ist, die den gleichen Namen wie die Klasse trägt. Sie hat Zugriff auf die Variablen innerhalb der Klasse. Ganz am Anfang der Klasse definieren wir: String nachName; Diese Variable hat nach Erzeugung des neuen Klassenobjekts nmitarbeiter, den Wert NULL, was nichts anderes heißt, als das die Variable leer ist. Ein String den wir übergeben haben, den ersten, ist der Nachname. Mit this.nachName = nachName wird der anfangs leeren Stringva
Mehr anzeigen

Dart Basic: Strings Part 1

Bild
Dart Die Manipulation von Zeichenketten ist eine wiederkehrende Aufgabe in der Programmierung. Natürlich hat auch Dart diverse Möglichkeiten mit Zeichenketten umzugehen. Dieser Serie wird auf einige eingehen. Basis Alles in Dart ist letztendlich ein Objekt. Auch der Datentyp String ist ein Objekt, beziehungsweise, die entsprechenden Variablen die wir erstellen. In der dart:core Library ist die String Klasse implementiert. Die Dokumentation dazu ist, wie bei Dart üblich, hervorragend. Ich kann nur empfehlen, sich eingehend damit zu beschäftigen. Zum testen kann man das DartPad verwenden. Es ist ideal für kleine Programme und erste Schritte in Dart. Eine Zeichenkette einer Variablen zuweisen Einfache Zuweisung von Strings Links sehen wir zwei einfache Zuweisungen. Einmal an die Variable test , diese ist vom Typ String . Das andere Mal an test1 , diese wiederum ist vom Typ var . Beides ist legitim, obwohl ein kleiner Unterschied besteht. Während String test
Mehr anzeigen