À quoi sert un Container dans Flutter ?
Pour le décrire simplement, un Container est un espace rectangulaire auquel vous allez donner une hauteur et une largeur. C’est un widget de base auquel vous allez également pouvoir donner une couleur et une bordure à cet espace, ainsi qu’y placer un autre widget comme un icon, un bouton, du texte, etc. Les Containers sont donc un widget central dans la définition des différents éléments qui vont composer votre application.
Je vous partage ici une vidéo de la documentation officielle de Flutter, vous permettant de comprendre de manière illustrée à quoi servent les Containers :
Comment donner une taille, une couleur et une marge à mon Container ?
Les trois paramètres principaux que vous allez probablement vouloir donner à votre Container, vont être :
- Une taille (hauteur et largeur) ;
- Une couleur ;
- Une marge ou un padding (marge intérieure).
Donner une taille à un Container
Vous allez pouvoir définir la taille d’un Container grâce aux propriétés heigth (hauteur), et width (largeur). Ces deux propriétés peuvent prendre une valeur absolue (en nombre de pixels), ou bien relative (Selon la taille de l’écran ou d’un autre élément). Voici un exemple tout simple d’un Container de 50 pixels sur 50 pixels, placé au centre de son parent :
Center(
child: Container(
width: 50,
height: 50,
),
)Donner une couleur à un Container
Vous pouvez donner une couleur à votre Container en lui ajoutant une propriété color (Couleur). Il existe trois méthodes pour définir cette valeur :
- Colors.xxx . Couleurs de bases de la palette Flutter ;
- Color.fromARGB(a, r, g, b) . Ici, les valeurs doivent être remplacées par des nombres compris entre 0 et 255. La lettre a représente l’opacité, r la couleur rouge, g pour le vert et b pour le bleu ;
- Color.fromRGBO(r, g, b, opacity) . Même chose que pour ARGB, mais ici l’opacité va prendre une valeur comprise entre 0 et 1
Voici un exemple de comment donner une couleur à notre Container de 50 pixels :
Center(
child: Container(
width: 50,
height: 50,
color: Colors.greenAccent,
),
)Donner une marge et un padding à un Container
La marge va vous permettre de créer de l’espace entre le Container et ce qui l’entoure. Le padding quant à lui, va ajouter de l’espace entre les bords du Container et le widget enfant qu’il contient. Ces deux valeurs peuvent être définies très simplement grâce à l’une des méthodes qui suivent :
- EdgeInsets.all() -> Permet d’ajouter une même marge ou un même padding à tous les côtés ;
- EdgeInsets.symmetric() -> Permet d’ajouter une marge ou un padding haut – bas ou droite – gauche ;
- EdgeInsets.only() ->Permet d’ajouter une marge ou un padding différent pour chaque côté.
Comme pour width et heigth, ces deux propriétés peuvent prendre une valeur absolue (en pixel), ou bien relative (à l’écran ou un autre élément). Voici donc un exemple tout simple de comment ajouter une marge et un padding à mon Container :
Center(
child: Container(
width: 50,
height: 50,
color: Colors.greenAccent,
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)Ici, j’ai ajouté une marge de 10 pixel en haut et en bas de mon Container, ainsi qu’un padding de 5 pixel en bas.
Comment donner un bord à mon Container dans Flutter ?
Une question souvent posée est comment donner un bord à un Container dans Flutter. Vous allez cette fois-ci devoir utiliser la propriété décoration, à laquelle vous allez donner un widget BoxDecoration. Celui-ci contient lui-même une propriété border, à laquelle vous allez donner une valeur de Border.all(), qui va prendre comme argument la taille de votre bordure, ainsi que sa couleur. Voici ce que cela donne, une fois codé :
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
color: Colors.greenAccent,
),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)Comment faire un Container arrondi ou rond dans Flutter ?
Donner une forme ronde à votre Container n’est pas si compliqué qu’il n’y parait. Pour cela, vous aurez encore besoin de la BoxDecoration à laquelle vous allez cette fois-ci ajouter une propriété borderRadius, qui va prendre comme argument BorderRadius.circular(radius). Ici, radius doit être remplacé par une valeur numérique absolue ou relative. Plus la valeur sera élevée, plus vos bords seront arrondis, jusqu’à ce que votre Container devienne complètement rond :
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
borderRadius : Border.circular(5),
color: Colors.greenAccent,
),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)Comment faire un Container penché ?
Pour finir, vous vous demandez peut être comment changer l’orientation d’un Container ? Par exemple, comment faire pour avoir un Container en forme de losange ? Tout simplement en utilisant cette fois-ci la propriété transfrom, qui va prendre comme argument la méthode Matrix4.rotationZ(radiant). Radiant prend une valeur allant de 0 à 1, comme dans l’exemple ci-dessous :
Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.black),
color: Colors.greenAccent,
),
transform: Matrix4.rotationZ(0.1),
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(bottom: 5),
),
)Conclusion
Maintenant que vous connaissez les widgets Scaffold et Container, vous êtes en mesure de commencer à placer les premiers éléments de votre application. Toutefois, comment les positionner exactement à l’endroit où vous le souhaitez ? Je vous en dis davantage dans ces deux articles :
