Layouts dans Flutter ou Widgets de mise en page
Sommaire
- 1- Objectif
- 2- Présentation
- 3- Type de widgets de mise en page
- 3.1- Widget prenant en charge un seul child (Single Childwidgets )
- 3.1.1- Le widget
containerdans Flutter - 3.1.2- Le widget
centerdans Flutter - 3.2- Widget prenant en charge plusieurs childs (Multi-Child Layout Widget)
- 4- Disposition des colonnes :
- 4.1.1- Cours Flutter
Layouts dans Flutter ou Widgets de mise en page
-
Objectif
- Apprenez à utiliser des widgets de mise en page pour conserver la dimension et l’orientation de n’importe quel composant dans les applications Flutter.
-
Présentation
- Un widget dans Flutter peut être créé en combinant un ou plusieurs widgets. Flutter fournit une vaste gamme de widgets avec des fonctionnalités de mise en page qui peuvent être utilisées pour connecter de nombreux widgets en un seul widget. Le widget enfant, par exemple, peut être centré à l’aide du widget Center.
- Certains des widgets fournis par Flutter ont pour but de présenter l’interface utilisateur qui n’est généralement pas tout à fait visible. Ceswidgets incluent Row, Column, Stack, Expanded, Padding, Center, Container, SizedBox, etc.
- Les widgets de mises en page dans Flutter vous aident à définir la structure de l’interface utilisateur de votre application. Certaines de ces mises en page sont des mises en page enfant uniques, tandis que d’autres sont des mises en page enfants multiples.
-
Type de widgets de mise en page
- Les widgets de mise en page peuvent être regroupés en deux catégories distinctes en fonction de leur enfant –
- Widget prenant en charge un seul child
- Widget prenant en charge plusieurs childs
-
Widget prenant en charge un seul child (Single Childwidgets )
- Dans cette catégorie, les widgets n’auront qu’un seul widget comme child et chaque widget aura une fonctionnalité de mise en page spéciale.
- Les widgets prenant en charge un seul child sont les widgets de base et utiles, comme les
Containers,GridViewpour n’en nommer que quelques-uns. - Les
Containerssont utilisés lorsque nous devons faire du rembourrage, de la marge ou de la bordure. Ce widget ne peut spécifiquement avoir qu’un seul widget enfant sous lui. -
Le widget
containerdans 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. - Pour plus d’information visitez la page : Le widget Container dans Flutter
-
Le widget
centerdans Flutter - Le widget
Centerde Flutter est un widget pratique pour amener n’importe quel widget au centre. - Le
Centerprend d’abord tout l’espace disponible (tant que son parent le permet) puis place le widget enfant au centre à la fois verticalement et horizontalement. - Pour plus d’information visitez la page : Le widget Center dans Flutter
-
Widget prenant en charge plusieurs childs (Multi-Child Layout Widget)
- Les widgets de mise en page multi-enfants (Multi-Child) sont ceux qui accepteront plus d’un widget comme child. Tels que :
Column(),Row(),Stack(),GridView(),ListView(),Table()etc. -
Disposition des colonnes :
- Dans notre prochain exemple, nous allons créer un conteneur (Container) avec une colonne, qui est également ce Layouts
- La colonne (Column) aura plusieurs enfants de texte de type afin que nous comprenions que toutes les mises en page peuvent Il a un nombre illimité d’enfants.
Les widgets de mise en page à child unique sont ceux qui n’accepteront qu’un seul widget comme child Tels que :
Container(),Center(),Expanded(),Align(),SizedBox(),Padding(),FittedBox(),AspectRatio(),Baseline(),ConstrainedBox(),CustomSingleChildLayout(),FittedBox(),FittedBox(),FractionallySizedBox(),IntrinsicHeight(),IntrinsicWidth(),LimitedBox(),Offstage(),OverflowBox()etc.
