Le widget Container dans Flutter
Le widget Container dans Flutter
-
Présentation
- Le Container est simplement un conteneur à taille défini dans lequel d’autres widgets peuvent venir se placer. Par défaut, sa dimension est celle de son enfant et comme il ne possède pas de couleur, il est invisible.
- En revanche, il est possible de lui attribuer une couleur grâce à la propriété color. Il devient alors visible.
- L’avantage du Container est qu’il est possible de lui donner un style bien précis grâce à une propriété : decoration. Elle peut accepter des widgets BoxDecoration ou ShapeDecoration. Grâce à ceux-ci, il est possible de définir des bordures par exemple.
- La dimension du Container est modulable avec plusieurs propriétés. Il est possible de jouer sur le padding qui correspond à la marge interne. De la même façon, il faudra utiliser
marginpour gérer l’écart du container vis-à-vis des widgets qui l’entourent. - Enfin, il dispose de deux propriétés essentielles :
widthetheight. Elles permettent de définir une taille pour la largeur et la hauteur. -
Propriétés du widget
Containerdans Flutter child: Cette propriété est utilisée pour stocker le widget child du conteneur.color: Cette propriété est utilisée pour définir la couleur de fond du texte . Cela change également la couleur d’arrière-plan de l’ensemble du conteneur.heightetwidth: Cette propriété est utilisée pour définir la hauteur et la largeur du containermargin: Cette propriété est utilisée pour entourer l’ espace vide autour du conteneur .padding: cette propriété est utilisée pour définir la distance entre la bordure du conteneur (les quatre directions) et son widget child.alignment: cette propriété est utilisée pour définir la position de l’enfant dans le container.Decoration: Cette propriété permet d’ajouter une décoration sur le widget.transform: La propriété transform permet aux développeurs de faire pivoter le conteneur .Constraints:Cette propriété est utilisée pour ajouter des contraintes supplémentaires au child.ClipBehaviour: cette propriété prend Clip Enum comme objet. Cela décide si le contenu à l’intérieur du conteneur sera coupé ou non.Foreground Decoration: ce paramètre contient la classe Décoration en tant qu’objet. Il contrôle la décoration devant le widget Container.-
Utilisation de container dans Flutter
- Dans Flutter,
Containerest une boîte utilisée pour contenir un widget enfant. En même temps, il est possible de définir son style grâce à des propriétés telles que padding, margin, alignment, etc. - Container surligne le contenu ou le sépare des autres.
- Il y a beaucoup de paramètres impliqués dans la création de Container, tels que width, height, child, alignment, etc.
- Tout comme la balise <div> en html, si le widget conteneur flutter ne contient aucun widget enfant, il remplira toute la zone de l’écran. D’un autre côté, s’il y a des widgets enfants, le widget conteneur les enveloppera en fonction de la hauteur et de la largeur spécifiées.
- Constructeurs
- Exemple
- Résultat
- Ajouter des bordures au widget
containerdans Flutter - Exemple: 01
- Exemple: 02
- Utilisez l’opérateur d’addition (+) pour ajouter plusieurs ShapeBorder (s) afin de créer une bordure associative.
Le Widget container ne doit pas s’afficher directement sans aucun widget parent. Vous pouvez utiliser le widget Center, le widget Padding, le widget Column, le widget Row ou le widget Scaffold en tant que parent.
Container({Key key,
AlignementGeometry alignement,
EdgeInsetsGeometry padding,
Color color,
double width,
double height,
Decoration decoration,
Decoration foregroundDecoration,
boxConstraints constraints,
Widget child,
Clip clipBehaviour: Clio.none
})Code de l’exemple
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter formation',
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
alignment: Alignment.center,
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.symmetric(horizontal: 50, vertical: 30),
decoration: const BoxDecoration(
color: Color.fromARGB(255, 4, 248, 248),
shape: BoxShape.circle,
//borderRadius: BorderRadius.circular(25)
),
child: const Text(
'Containers dans Flutter',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
));
}
}
