13 widgets à connaître #Part1

Comme vous le savez sans doute déjà , Flutter est un framework qui permet de construire des interfaces utilisateurs. Ainsi, chaque interface Flutter se compose de Widgets. Je vous propose de découvrir à travers cette série de posts différents Widgets Flutter, leur utilité et surtout comment s’en servir dans vos différents projets 😇.

Nos Widgets 🏄🏽‍♂️

Dans ce premier épisode nous allons parler du layout. Le layout peut se définir comme la façon dont on manipule la disposition et la position des éléments dans une interface. N’hésitez pas lire cet article que j’ai écrit pour mieux comprendre comment fonctionne Flutter.

Le layout ou la façon de disposer des éléments sur une interface

Column

Il s’agit d’un widget assez courant qui nous permet de disposer des éléments en colonne comme le nom le suggère.

Column(
  children: [
    FlutterLogo(
      size: 90,
    ),
  ],
)

Son attribut children est une liste de widgets qui va contenir les elements que vous souhaitez disposer en colonne. Il dispose aussi d’attributs qui vous permettent de gérer l’alignement et l’espacement des éléments.

Column(
  /// L'attribut crossAxisAlignment sert à définir la disposition
  /// dans le sens de la largeur du widget
  crossAxisAlignment: CrossAxisAlignment.center,

  /// L'attribut mainAxisAlignment sert gérer l'espace entre les éléments
  /// et leur disposition dans le sens de la longueur
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: const [
    FlutterLogo(
      size: 90,
    ),
    FlutterLogo(
      size: 90,
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Column.

Row

Il reprend le même principe que Column mais en rangée horizontale.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const [
    FlutterLogo(
      size: 90,
    ),
    FlutterLogo(
      size: 90,
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Row.

💡

L’attribut mainAxisAlignment permet de manipuler l’espacement entre les widgets qu’il contient notamment avec les attributs spaceAround et spaceBetween. Ils permettent respectivement de donner de façon proportionnelle de l’espace au début et la fin des widgets qu’il contient et de faire de même mais entre les widgets le constituants pour le second.

Wrap

Ce Widget est en quelque sorte une façon de combiner Row et Column. En effet, il s’adapte à l’espace disponible de sorte à disposer soit en Row soit en Column suivant le cas. Il est plutôt pratique pour gérer la responsivité des interfaces Flutter, c’est-à-dire l’adaptabilité de l’interface aux différentes tailles d’écran qui existe.

Wrap(
  children: const [
    FlutterLogo(
      size: 150,
    ),
    FlutterLogo(
      size: 150,
    ),
    FlutterLogo(
      size: 150,
    ),
  ],
)

The code

En bonus il vous permet de gérer l’espacement entre les widgets qui le constitue. Il peut constituer une super alternative à un usage abusif de SizedBox pour mettre de l’espace entre les widgets. Pour cela nous disposons des attributs:

runSpacing qui contrôle l'espace entre les éléments qui sont disposés verticalement,

spacing contrôle l'espace entre les éléments qui disposés horizontalement.

Wrap(
  runSpacing: 60,
	spacing: 60,
	children: const [
    FlutterLogo(
      size: 150,
    ),
    FlutterLogo(
      size: 150,
    ),
    FlutterLogo(
      size: 150,
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Wrap.

Stack

Il s’agit d’un Widget de la même famille que Row et Column, c’est-à-dire qu’il nous permet de donner une disposition aux enfants qu’il contient. Dans notre cas précis, Stack permet de superposer des widgets les uns sur les autres.

Stack(
  children: [
    ColoredBox(
      color: Colors.red,
      child: Container(),
    ),
/// Padding pour rajouter de l'espacement autour des ColoredBox
    Padding(
      padding: const EdgeInsets.all(50),
      child: ColoredBox(
        color: Colors.blue,
        child: Container(),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(100),
      child: ColoredBox(
        color: Colors.yellow,
        child: Container(),
      ),
    ),
  ],
)

The code

Les Widgets s’empilent les uns sur les autres dans l’ordre dans lequel ils sont appelés 👌🏽.

💡

Plus d’informations dans la documentation de Stack.

Positioned

Un Widget qu’on utilise presque uniquement à l’intérieur d’un Stack. Il permet de spécifier de l’endroit où l’on souhaite positionner un Widget dans un Stack. Il nous permet en gros de preciser de façon très complète l’emplacement du Widget dans le Stack avec les attributs left, right, top et bottom qui sont respectivement les distances qui doivent séparer notre Widget des limites ou bordures gauche, droite, haute et basse de l’interface où le rendu est effectué.

Il s’utilise généralement de deux façons:

La première :

En spécifiant tous les détails de l’emplacement du Widget

Stack(
  children: [
    ColoredBox(
      color: Colors.red,
      child: Container(),
    ),
    Positioned(
      left: 70,
      top: 10,
      right: 10,
      bottom: 100,
      child: ColoredBox(
        color: Colors.blue,
        child: Container(),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(100),
      child: ColoredBox(
        color: Colors.yellow,
        child: Container(),
      ),
    ),
  ],
)

The code

La seconde :

En utilisant le constructeur Positioned.fill qui permet de n’avoir qu’à préciser l’un des attributs left, right, top ou bottom à l’opposer de l’autre où chaque attribut doit être explicité sous peine ne plus voir s’afficher le Widget 😅

Stack(
  children: [
    ColoredBox(
      color: Colors.red,
      child: Container(),
    ),
    Positioned.fill(
      top: 10,
      bottom: 100,
      child: ColoredBox(
        color: Colors.blue,
        child: Container(),
      ),
    ),
    Positioned.fill(
      left: 50,
      right: 10,
      child: ColoredBox(
        color: Colors.yellow,
        child: Container(),
      ),
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Positioned.

Expanded

Le widget Expanded sert à donner à son enfant le reste de l’espace disponible sur l’interface.

Column(
  children: [
    Expanded(
      /// ColoredBox nous permet d'avoir une
      /// boîte de couleur defini par l'attribut
      /// color
      child: ColoredBox(
        color: Colors.red,
        child: Container(),
      ),
    ),
    Expanded(
      child: ColoredBox(
        color: Colors.blue,
        child: Container(),
      ),
    ),
  ],
)

The code

Dans l’exemple ci dessous nous avons mis deux ColoredBox dans un Expanded, ce qui fait que chacun d’eux va se retrouver à vouloir prendre l’ensemble de l’espace disponible sur la surface de l’interface. Résultats ? Ils se partagent juste l’interface moitié moitié 😅.

💡

Plus d’informations dans la documentation de Expanded.

Align

Ce Widget nous permet de manipuler l’alignement de son enfant grâce son attribut alignment.

Column(
  children: const [
    Align(
      alignment: Alignment.centerLeft,
      child: FlutterLogo(
        size: 150,
      ),
    ),
    Align(
      alignment: Alignment.centerRight,
      child: FlutterLogo(
        size: 150,
      ),
    ),
    Align(
      alignment: Alignment.center,
      child: FlutterLogo(
        size: 150,
      ),
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Align.

Spacer

Il s’agit d’un Widget simple que vous pouvez utiliser pour mettre de l’espace entre les Widgets de votre layout.

Row(
  children: const [
    FlutterLogo(
      size: 90,
    ),
    FlutterLogo(
      size: 90,
    ),
    Spacer(),
    FlutterLogo(
      size: 90,
    ),
  ],
)

The code

💡

Spacer dispose d’un attribut flex qui est un int qui permet de mieux gérer l’espacement entre les Widgets.

Row(
  children: const [
    FlutterLogo(
      size: 90,
    ),
    Spacer(
      flex: 1,
    ),
    FlutterLogo(
      size: 90,
    ),
    Spacer(
      flex: 3,
    ),
    FlutterLogo(
      size: 90,
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de Spacer.

SingleChildScrollView

Un SingleChildScrollView permet de rendre scrollable ses enfants qui sont souvent des Columns et des Rows.

Il dispose d’un attribut scrollDirection pouvant être mis sur Axis.vertical, pour un scroll vertical (par défaut , souvent pour les Column), ou un Axis.horizontal, pour un scroll horizontal (qu’on explicite souvent pour les Rows).

SingleChildScrollView(
  child: Column(
		/// Pour générer une liste de 30 FlutterLogo
		scrollDirection: Axis.vertical, // Ou Axis.horizontal si on veut mettre un Row ensuite 
    children: List<Widget>.generate(
      30,
      (index) => const FlutterLogo(
        size: 90,
      ),
    ),
  ),
);

The code

💡

Plus d’informations dans la documentation de SingleChildScrollView.

FittedBox

Quant à lui, il se place entre un Widget parent et un Widget enfant de sorte à faire en sorte que le Widget enfant s’adapte aux dimensions du Widget parent. Un exemple:

Container(
  height: 600,
  width: 300,
  color: Colors.blue,
  child: const FittedBox(
    child: FlutterLogo(),
  ),
)

The code

A présent , FittedBox dispose d’un attribut fit qui nous permettra de définir de quelle façon nous allons faire en sorte que notre Widget enfant (FlutterLogo dans notre cas) s’adapte aux proportions de son parent (notre Container qui a une height et une width precise).

fit: BoxFit.fitHeight, pour prendre s’adapter à la longueur du parent

fit: BoxFit.fitWidth, pour s’adapter à la largeur du parent

💡

Plus d’informations concernant juste dans cette vidéo et dans la documentation de FittedBox.

SizedBox

SizedBox nous permet de définir des boîtes dans notre interface qui peuvent servir à soit donner des proportions à ses enfants, soit à définir des espaces entre les widgets comme dans l’exemple ci-dessous.

Row(
  children: const [
    FlutterLogo(
      size: 90,
    ),
    FlutterLogo(
      size: 90,
    ),
    SizedBox(
      width: 100,
    ),
    FlutterLogo(
      size: 90,
    ),
  ],
)

The code

💡

Plus d’informations dans la documentation de SizedBox.

ConstrainedBox

Ce Widget est assez sous-estimé pour ma part 🤔. Il permet de définir la limite d’espace dans laquelle un Widget doit être contenu. Un exemple simple:

Avant

Text(
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
)

Après

ConstrainedBox(
  constraints: const BoxConstraints(
    maxWidth: 350,
  ),
  child: const Text(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  ),
)

Ce Widget dispose de l’attribut constraints qui prend un BoxConstraints dans lequel nous pouvons définir une largeur maximale ou minimale (maxWidth et minWidth) ainsi qu’une longueur maximale et minimale (maxHeight et minHeight) dans laquelle votre widget devra se contraindre de rester. Il est très utile surtout avec les Text pour les limiter dans l’espace qui leur est alloué.

💡

Plus d’informations dans la documentation de ConstrainedBox.

Gap

Le Widget Gap n’est pas natif à Flutter. Il vient avec le package gap et nous permet de gérer les espaces à l’intérieur d’un Column ou d’un Row.

Pour l’installer:

flutter pub add gap

Il rajoute de l’espace en horizontal quand il est appelé dans un Row et en vertical quand il est appelé dans un Column. Il peut être une super alternative aux SizedBox.

/// Don't
Row(
  children: const [
    FlutterLogo(
      size: 90,
    ),
		SizedBox(width: 100),
    FlutterLogo(
      size: 90,
    ),
  ],
)

/// Do
Row(
  children: const [
    FlutterLogo(
      size: 90,
    ),
		Gap(100),
    FlutterLogo(
      size: 90,
    ),
  ],
)

Merci de la lecture ✨

Si tu as apprécié tu peux m’offrir un café juste ici 💙, réagir et commenter en bas si tu as des apports et/ou des corrections. C’est toujours un plaisir et cela m’encourage à écrire plus souvent .