Flutter Container et Decoration
Container est le widget conteneur polyvalent le plus couramment utilisé dans Flutter, offrant des fonctionnalités telles que la définition de la taille, de l'arrière-plan, de la bordure et de l'ombre.
Présentation de Container
Container est un widget composite qui encapsule en interne des fonctionnalités telles que Padding, ColoredBox, SizedBox et DecoratedBox.
Exemple : utilisation de base de Container
// Le Container le plus simple
Conteneur(
child: Text('Hello'),
)
// Container avec taille
Conteneur(
width: 200,
height: 100,
child: Text('Taille fixe'),
)
// Container avec couleur
Conteneur(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Fond bleu', style: TextStyle(color: Colors.white)),
)
Conteneur(
child: Text('Hello'),
)
// Container avec taille
Conteneur(
width: 200,
height: 100,
child: Text('Taille fixe'),
)
// Container avec couleur
Conteneur(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Fond bleu', style: TextStyle(color: Colors.white)),
)
BoxDecoration - Effets décoratifs
L'utilisation de BoxDecoration peut ajouter des effets de décoration plus riches, tels que l'arrière-plan, la bordure, l'ombre, les coins arrondis, etc.
Couleur d'arrière-plan
Exemple: Réglage de la couleur d'arrière-plan
// Arrière-plan de couleur unie
Conteneur(
decoration: BoxDecoration(
color: Colors.blue,
),
child: const Text('Fond bleu'),
)
// Utiliser un arrière-plan dégradé
Conteneur(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Text('Fond dégradé'),
)
// Dégradé radial
Conteneur(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.yellow, Colors.orange],
),
),
child: const Text('Dégradé radial'),
)
Conteneur(
decoration: BoxDecoration(
color: Colors.blue,
),
child: const Text('Fond bleu'),
)
// Utiliser un arrière-plan dégradé
Conteneur(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: const Text('Fond dégradé'),
)
// Dégradé radial
Conteneur(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.yellow, Colors.orange],
),
),
child: const Text('Dégradé radial'),
)
Border
Exemple : Réglage de bordure
// Bordure simple
Conteneur(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: const Text('Bordure noire'),
)
// Bordures différentes de chaque côté
Conteneur(
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('Des bordures différentes de chaque côté'),
)
// Bordure circulaire
Conteneur(
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width: 3),
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.all(16),
child: const Text('Bordure arrondie'),
)
Conteneur(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: const Text('Bordure noire'),
)
// Bordures différentes de chaque côté
Conteneur(
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('Des bordures différentes de chaque côté'),
)
// Bordure circulaire
Conteneur(
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width: 3),
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsets.all(16),
child: const Text('Bordure arrondie'),
)
Rayon de bordure
Exemple : Réglage des coins arrondis
// Rayon de bordure uniforme
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20), // Rayon de bordure 20
),
)
// Différents rayons de bordure
Conteneur(
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),
),
),
)
// Cercle
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
)
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20), // Rayon de bordure 20
),
)
// Différents rayons de bordure
Conteneur(
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),
),
),
)
// Cercle
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
)
Shadow
Exemple : réglage d'ombre
// Ombre simple
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10, // Rayon de flou
offset: Offset(5, 5), // Décalage
),
],
),
)
// Ombres multiples
Conteneur(
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),
),
],
),
)
// Ombre de Card (avec elevation)
Card(
elevation: 8,
child: Container(
width: 100,
height: 100,
child: const Center(child: Text('Card')),
),
)
Conteneur(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10, // Rayon de flou
offset: Offset(5, 5), // Décalage
),
],
),
)
// Ombres multiples
Conteneur(
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),
),
],
),
)
// Ombre de Card (avec elevation)
Card(
elevation: 8,
child: Container(
width: 100,
height: 100,
child: const Center(child: Text('Card')),
),
)
Clip - Découpage
L'utilisation de la classe Clip permet de découper la zone d'affichage des Widgets enfants.
Exemple : Utilisation du découpage
// Découpage circulaire
ClipOval(
child: Image.network(
'https://example.com/avatar.jpg',
width: 100,
height: 100,
fit: BoxFit.cover,
),
)
// Découpage de rectangle arrondi
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 150,
fit: BoxFit.cover,
),
)
// Découpage de chemin personnalisé
ClipPath(
clipper: TriangleClipper(),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 200,
),
)
ClipOval(
child: Image.network(
'https://example.com/avatar.jpg',
width: 100,
height: 100,
fit: BoxFit.cover,
),
)
// Découpage de rectangle arrondi
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 150,
fit: BoxFit.cover,
),
)
// Découpage de chemin personnalisé
ClipPath(
clipper: TriangleClipper(),
child: Image.network(
'https://example.com/image.jpg',
width: 200,
height: 200,
),
)
Exemple complet
Exemple : Exemple d'utilisation complet
// Carte avec dégradé, coins arrondis et ombre
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(
// Arrière-plan dégradé
gradient: LinearGradient(
colors: [Colors.blue[400]!, Colors.blue[700]!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
// Coins arrondis
borderRadius: BorderRadius.circular(16),
// Ombre
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.4),
blurRadius: 12,
offset: const Offset(0, 6),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Icône
Conteneur(
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),
// Titre
Texte(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
// Description
Texte(
description,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 14,
),
),
],
),
);
}
}
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(
// Arrière-plan dégradé
gradient: LinearGradient(
colors: [Colors.blue[400]!, Colors.blue[700]!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
// Coins arrondis
borderRadius: BorderRadius.circular(16),
// Ombre
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.4),
blurRadius: 12,
offset: const Offset(0, 6),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Icône
Conteneur(
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),
// Titre
Texte(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
// Description
Texte(
description,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize: 14,
),
),
],
),
);
}
}