Widgets de base

Widget Text

Le widget Text est un élément très important, il est présent dans toutes les applications. Son constructeur demande un paramètre obligatoire : une chaîne de caractères. On peut travailler sur ce texte en modifiant son style pour changer son aspect, son alignement, sa couleur.

Exemple

1
Text("Ceci est une première chaine",
2
 style: TextStyle(
3
   color: Colors.red,
4
   fontSize:20,
5
   fontWeight: FontWeight.w800,
6
   fontStyle:FontStyle.italic
7
 ),
8
 textAlign: TextAlign.center,
9
)

Ici, on définit un widget Text qui prend en argument la chaîne de caractères : « Ceci est une chaîne de caractères ». On lui spécifie un Style avec le widget TextStyle. À l'intérieur de ce style, on va définir la couleur du texte et l'aspect de la police de caractères. On peut aussi spécifier l'alignement de cette zone de texte. Ici, on centre le texte.

Si on veut pousser la personnalisation de l'application, on peut mettre en place une police de caractères spécifique dans le constructeur de TextStyle avec la propriété fontFamily.

Méthode

Étape 1 : dans l'arborescence de notre projet, il faut créer un répertoire « assets ». On fait un clic droit - new - Directory. À l'intérieur de ce dossier, on crée un dossier « fonts » pour stocker nos polices dans notre application. On va « glisser-déposer » la police de caractères dans le répertoire.

Complément

Sur Internet, on peut trouver des polices de caractères gratuites sur le site Google Fonts.

Méthode

Étape 2 : maintenant, il convient de modifier le fichier pubspec.yaml et de l'enrichir d'une rubrique « fonts ».

Dans Android Studio, cliquez sur Pub get pour finir l'installation de la police de caractères.

Étape 3 : une fois installée, on peut définir la font dans la propriété font-family dans le widget TextStyle.

Exemple

1
style: TextStyle(
2
 color: Colors.blue,
3
 fontSize:25,
4
 fontWeight: FontWeight.w800,
5
 fontStyle:FontStyle.italic,
6
 fontFamily:'BubbleShine'

Méthode

Voici comment créer un widget Text configuré avec une police de caractères, un style et une couleur :

1
Text simpleText(String text){
2
 return Text(
3
   text,
4
   style: TextStyle(
5
       color: Colors.blue,
6
       fontSize:25,
7
       fontWeight: FontWeight.w800,
8
       fontStyle:FontStyle.italic,
9
       fontFamily:'BubbleShine'
10
   ),
11
   textAlign: TextAlign.center
12
 );

Complément

Pour créer un widget avec cette configuration, on aura juste à l'appeler :

simpleText(“On peut réutiliser notre texte”)

Cela évite que l'on ait à chaque fois à reconfigurer notre widget Text de base.

DéfinitionWidget Icon

De nos jours, les icônes sont aussi des éléments essentiels de nos applications. Leur utilisation permet une compréhension rapide de l'interface utilisateur. Par exemple, tout le monde associe une icône « pin » à la cartographie.

L'utilisation du widget Icon permet l'insertion d'une icône. On pourra spécifier certaines de ses propriétés comme sa taille.

Exemple

1
body:Center(
2
child: Container(
3
  height: 150,
4
  width: 150,
5
  child: Icon(Icons.home,
6
  color:Colors.green,
7
  size: 50,)
8
),
9
)

Dans le container, on met un Icon Home en tant qu'enfant. On lui applique une taille de 50 avec size et on lui applique la couleur verte.

En important : import 'package:flutter/cupertino.dart';

On pourra mettre des styles d'icônes qui se rapprochent de ceux utilisés sur iOS.

1
Icon(CupertinoIcons.add,
2
color:Colors.green,
3
size: 50,)

Les icônes pourront être ajoutées à l'endroit souhaité pour personnaliser le floatingActionButton ou la barre d'onglets.

DéfinitionWidget Image

Afin d'enjoliver une application, il est fréquent d'avoir recours à des images. Flutter a un widget dédié Image.

Méthode

De la même manière que pour les polices de caractères, il convient de créer un dossier images dans le répertoire assets. Ensuite, on dépose les images dans ce dossier. On va aussi ajouter le chemin des images dans le fichier pubspec.yaml.

On modifie le fichier puspec.yaml en indiquant où se trouvent les fichiers images.

Attention

Il s'agit d'un fichier yaml. Il faut faire attention à l'indentation dont l'importance est cruciale. Par exemple assets doit être à deux espaces de la gauche.

Méthode

Une fois le fichier à jour, il faut cliquer sur le bouton pub get. Maintenant que l'image est déclarée, il ne reste plus qu'à l'incorporer dans le projet.

Exemple

1
Image.asset('assets/images/beach.png',
2
 width: 150,
3
)

Complément

Si on peut insérer des images en dur dans le projet, on peut aussi les afficher en les chargeant depuis internet. La syntaxe est Image.network(‘http://www.....').

1
Image.network('https://computingforgeeks.com/wp-content/uploads/2019/05/cf_white-1.png?ezimgfmt=rs:272x90/rscb23/ng:webp/ngcb23')

DéfinitionWidget Card

Le widget Card est utilisé pour créer une boîte rectangulaire avec un container comme enfant. On a l'impression que la Card est surélevée (une ombre portée). Cet effet peut être accentué avec la propriété elevation.

Exemple

1
body: Center(
2
 child: Card(
3
   child: Container(
4
     color: Colors.grey,
5
     height: 150,
6
     width: 300,
7
     child: simpleText("Ma premiere Card"),
8
   ),
9
   elevation: 10,
10
 ),
11
),

Ici, on a défini un widget Card à l'intérieur du widget Center. À l'intérieur, il contient un widget Text.

DéfinitionWidget Padding

Le widget Padding permet de positionner son enfant à l'intérieur d'un container ou d'une card.

Exemple

1
child: Card(
2
 child:
3
 Container(
4
   color: Colors.grey,
5
   height: 150,
6
   width: 300,
7
   child: Padding(
8
     padding: EdgeInsets.fromLTRB(10, 10,0,0),
9
     child: simpleText("Ma premiere Card"),
10
   )
11
 ),
12
 elevation: 7.5,
13
),

Dans cet exemple, Padding permet positionner le widget simpleText à 10 par rapport au Haut et 10 par rapport à gauche.

Widget Column

Le widget Column permet d'aligner verticalement des widgets. On peut le voir comme une pile d'éléments. Dans d'autres langages, on parlera de stackview. Ce widget possède des enfants : children. Ils s'espacent dans la column selon la propriété mainAxisAlignement.

Cette propriété peut prendre différentes valeurs :

  • Start : les éléments sont groupés en haut de colonne.

  • End : les éléments sont groupés en bas de la colonne.

  • Center : les éléments sont groupés au centre de la colonne.

  • SpaceEvenly : les éléments sont séparés les uns des autres avec le même espacement.

  • SpaceBetween : les éléments sont séparés les uns des autres avec le même espacement en étant collés aux extrémités.

  • SpaceAround : les éléments sont séparés les uns des autres avec le même espacement avec des marges réduites aux extrémités.

ExempleLa propriété spaceBetween

1
Column(
2
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
3
 children: [
4
   Container(
5
     height: 50,
6
     color: Colors.red,
7
     width: 50,
8
   ),
9
   Container(
10
     height: 50,
11
     color: Colors.yellow,
12
     width: 50,
13
   ),
14
   Container(
15
     height: 50,
16
     width: 50,
17
     color: Colors.green
18
   )
19
 ],)

DéfinitionWidget Row

Le widget Row a le même fonctionnement que Column. Row est un empilement de widgets enfants (children).

ExempleMainAxisAlignement.Start

1
Row(
2
 mainAxisAlignment: MainAxisAlignment.start,
3
 children: [
4
   Container(
5
     height: 50,
6
     color: Colors.red,
7
     width: 50,
8
   ),
9
   Container(
10
     height: 50,
11
     color: Colors.yellow,
12
     width: 50,
13
   ),
14
   Container(
15
     height: 50,
16
     width: 50,
17
     color: Colors.green
18
   )
19
 ],

La propriété mainAxisAlignement est aussi présente. Elle se comporte similairement, mais horizontalement.

DéfinitionWidget Expanded

En utilisant, le widget Expanded, dans une Column ou Row, son enfant occupera tout l'espace libre.

La propriété flex à l'intérieur du widget permet d'établir des proportions.

Exemple

Commençons par définir une column à l'intérieur du body. À l'intérieur de column, nous allons empiler 4 widgets expanded qui ont pour enfant un widget container. On définit une couleur pour chaque container. Par défaut, la propriété flex est égale à 1.

1
Body(
2
Column(
3
 children: [
4
   Expanded(
5
     child: Container(
6
       color: Colors.red,
7
     ),
8
   ),
9
   Expanded(
10
     child: Container(
11
       color: Colors.blue,
12
     ),
13
   ),
14
   Expanded(
15
     child: Container(
16
       color: Colors.yellow,
17
     ),
18
   ),
19
   Expanded(
20
     child: Container(
21
       color: Colors.green,
22
    ),
23
   ),
24
 ],
25
)

On met une propriété flex à 3 au widget expanded contenant le container jaune.

1
Expanded(
2
 flex: 3,
3
 child: Container(
4
   color: Colors.yellow,
5
 ),
6
),

Si on fait la somme des propriétés sachant que par défaut elle est à 1 :

1 (container rouge) + 1 (container bleu) + 3 (container jaune) + 1 (container vert) = 6

La proportion du container jaune sera de 3/6 de l'écran. On voit que cela correspond bien à la moitié de l'écran.

Pour se simplifier dans les calculs, on prendra 10 pour la somme des flex. Ensuite, on répartit la somme des propriétés flex sur chaque widget Expanded.

Adoptons la répartition suivante :

  • Rouge : flex = 1 soit 1/10

  • Bleu : flex = 2 soit 2/10

  • Jaune : flex = 2 soit 2/10

  • Vert : flex = 5 soit 5/10