Layouts dans Flutter ou Widgets de mise en page
Sommaire
- 1- Objectif
- 2- Présentation
- 3- Types de mise en page
- 4- Type de widgets de mise en page
- 4.1- Widget prenant en charge un seul child (Single Childwidgets )
- 4.1.1- Le widget
containerdans Flutter - 4.1.2- Le widget
centerdans Flutter - 4.2- Widget prenant en charge plusieurs childs (Multi-Child Layout Widget)
- 5- Disposition des colonnes :
- 5.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.
-
Types de mise en page
- En effet, il existe plusieurs types de mises en page (layouts) dans le développement d’applications Android, chacun ayant ses propres caractéristiques et avantages. Voici quelques-uns des types de mises en page les plus couramment utilisés :
- LinearLayout : Cette mise en page organise les éléments de manière linéaire, soit horizontalement, soit verticalement. Il est utile lorsque vous souhaitez empiler des éléments les uns en dessous des autres ou les aligner côte à côte.
- RelativeLayout : Avec cette mise en page, vous spécifiez les relations entre les éléments en fonction de leur position les uns par rapport aux autres ou par rapport au parent. Cela offre une grande flexibilité pour la conception d’interfaces utilisateur complexes.
- FrameLayout : Il s’agit d’une mise en page simple qui empile les éléments les uns sur les autres. Il est souvent utilisé pour afficher un seul élément à la fois, par exemple une seule image ou une seule vue.
- ConstraintLayout : C’est une mise en page puissante qui permet de définir des relations complexes entre les éléments, tout en garantissant que l’interface utilisateur s’adapte à différentes tailles d’écran. C’est particulièrement utile pour la conception d’applications multiplateformes.
- TableLayout : Cette mise en page organise les éléments dans un tableau à deux dimensions de lignes et de colonnes. Il est principalement utilisé lorsque vous avez besoin de disposer des éléments dans une structure de grille.
- GridLayout : Similaire à TableLayout, GridLayout organise les éléments dans une grille, mais il offre plus de contrôle sur la disposition des éléments. Vous pouvez spécifier le nombre de lignes et de colonnes ainsi que la taille des cellules.
- ScrollView : Cette mise en page permet aux éléments enfants de défiler lorsque l’espace disponible est insuffisant. C’est utile lorsque vous avez du contenu dépassant l’écran.
- DrawerLayout : Il est utilisé pour créer un tiroir de navigation (drawer) qui peut être glissé depuis le bord de l’écran pour révéler des options de navigation ou de menu.
- ViewPager : Cette mise en page est spécialement conçue pour créer des interfaces utilisateur basées sur un système de navigation par onglets ou de diapositives. Elle est couramment utilisée dans les applications de type « Swiping » pour basculer entre différentes vues.
- FragmentLayout : Les fragments sont des éléments d’interface utilisateur réutilisables dans une activité. Vous pouvez utiliser cette mise en page pour organiser des fragments dans une activité.
- Ces types de mises en page offrent une flexibilité considérable lors de la création de l’interface utilisateur d’une application Android.
- Le choix de la mise en page dépendra des besoins spécifiques de votre application et de la manière dont vous souhaitez organiser et afficher vos éléments à l’écran.
-
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.
