Flutter Container und Decoration

Container ist das am häufigsten verwendete Allzweck-Container-Widget in Flutter und bietet Funktionen wie das Festlegen von Größe, Hintergrund, Rahmen und Schatten.

Container-Übersicht

Container ist ein zusammengesetztes Widget, das intern Funktionalität wie Padding, ColoredBox, SizedBox und DecoratedBox kapselt.

Beispiel: Grundlegende Verwendung von Container

// Der einfachste Container
Container(
child: Text('Hello'),
)

// Container mit Größe
Container(
width: 200,
height: 100,
child: Text('Feste Größe'),
)

// Container mit Farbe
Container(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Blauer Hintergrund', style: TextStyle(color: Colors.white)),
)

BoxDecoration - Dekorative Effekte

Mit BoxDecoration lassen sich reichhaltigere Dekorationseffekte hinzufügen, wie Hintergrund, Rahmen, Schatten, abgerundete Ecken usw.

Hintergrundfarbe

Beispiel: Hintergrundfarbe einstellen

// Einfarbiger Hintergrund
Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child: const Text('Blauer Hintergrund'),
)

// Hintergrund mit Farbverlauf verwenden
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Text('Farbverlauf-Hintergrund'),
)

// Radialer Farbverlauf
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.yellow, Colors.orange],
),
),
child: const Text('Radialer Farbverlauf'),
)

Border

Beispiel: Rahmeneinstellung

// Einfacher Rahmen
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: const Text('Schwarzer Rahmen'),
)

// Unterschiedliche Rahmen auf jeder Seite
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.red, width: 2),
bottom: BorderSide(color: Colors.blue, width: 2),
left: BorderSide(color: Colors.green, width: 2),
right: BorderSide(color: Colors.orange, width: 2),
),
),
child: const Text('Unterschiedliche Rahmen auf jeder Seite'),
)

// Kreisförmiger Rahmen
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width: 3),
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.all(16),
child: const Text('Abgerundeter Rahmen'),
)

Rahmenradius

Beispiel: Einstellung für abgerundete Ecken

// Einheitlicher Rahmenradius
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20), // Rahmenradius 20
),
)

// Unterschiedliche Rahmenradien
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(20),
),
),
)

// Kreis
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
)

Shadow

Beispiel: Schatteneinstellung

// Einfacher Schatten
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10, // Unschärferadius
offset: Offset(5, 5), // Versatz
),
],
),
)

// Mehrere Schatten
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.red.withOpacity(0.3),
blurRadius: 5,
offset: Offset(-3, -3),
),
BoxShadow(
color: Colors.blue.withOpacity(0.3),
blurRadius: 5,
offset: Offset(3, 3),
),
],
),
)

// Card-Schatten (mit elevation)
Card(
elevation: 8,
child: Container(
width: 100,
height: 100,
child: const Center(child: Text('Card')),
),
)

Clip - Zuschneiden

Mit der Clip-Klasse lässt sich der Anzeigebereich von untergeordneten Widgets zuschneiden.

Beispiel: Verwendung des Zuschneidens

// Kreisförmiges Zuschneiden
ClipOval(
child: Image.network(
'https://example.com/avatar.jpg',
width: 100,
height: 100,
fit: BoxFit.cover,
),
)

// Beschneiden abgerundeter Rechtecke
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 150,
fit: BoxFit.cover,
),
)

// Benutzerdefiniertes Pfad-Beschneiden
ClipPath(
clipper: TriangleClipper(),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 200,
),
)

Umfassendes Beispiel

Beispiel: Umfassendes Anwendungsbeispiel

// Karte mit Farbverlauf, abgerundeten Ecken und Schatten
class MyCard extends StatelessWidget {
final String title;
final String description;
final IconData icon;

const MyCard({
super.key,
required this.title,
required this.description,
required this.icon,
});

@override
Widget build(BuildContext context) {
return Container(
width: 280,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
// Hintergrund mit Farbverlauf
gradient: LinearGradient(
colors: [Colors.blue[400]!, Colors.blue[700]!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
// Abgerundete Ecken
borderRadius: BorderRadius.circular(16),
// Schatten
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.4),
blurRadius: 12,
offset: const Offset(0, 6),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Icon
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: Colors.white, size: 32),
),
const SizedBox(height: 16),
// Titel
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
// Beschreibung
Text(
description,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 14,
),
),
],
),
);
}
}

Weitere Erweiterungen