Construire les pages de votre application avec Flutter

Quels widgets utiliser pour construire mon application Flutter ?

L’avantage de coder avec Flutter est qu’il va vous fournir de nombreux widgets vous permettant de construire l’interface de votre application. Voici une brève description des plus connues et de comment les utiliser.

Container()

Le widget que vous serez probablement le plus amené à utiliser pour construire les pages de votre application est le Container(). Pour le décrire très rapidement, le Container est une boîte à laquelle vous allez donner une hauteur, une largeur, une couleur, etc. Vous allez également pouvoir lui attribuer un widget enfant, qui sera contenu dans celui-ci et prendra par défaut sa taille et sa hauteur. Par exemple, voici un exemple de Container() :

Container( 	
	heigth: 40, 
	width: 80,
	color: Colors.white, 
	child : Text(
		"Mon premier container", 
		fontSize: 15,
		)
)

Ici, mon container à une hauteur de 40 pixels, une largeur de 80 pixels, une couleur de fond blanche et un widget enfant de type Text().

Quelle différence avec une SizedBox() ?

Le widget SixedBox() fonctionne comme un Container(), mais ne peut pas contenir de widget child. Vous allez donc l’utiliser, soit pour créer un espace entre deux widgets, soit ajouter une zone de couleur.

Ajouter du texte

Pour ajouter du texte dans Flutter, vous pouvez utiliser le widget Text(). Celui-ci prend comme paramètre, le message à afficher, mais aussi la taille de la police, son épaisseur, sa couleur, etc. Par exemple :

Text(
	"Mon message à afficher", 
	style: TextStyle(
		fontSize : 15, 
		fontWeigth: FontWeight.bold,
		color: Colors.red,
  ),
)

Ici mon texte “Mon message à afficher” aura une taille de 15, sera en gras et en rouge.

Il existe de nombreux packages pour encore plus personnaliser vos textes. Par exemple, GoogleFont vous permet d’ajouter des polices. Auto_size_text quant à lui, permet d’adapter la taille de votre texte selon l’écran.

Ajouter une image

Des images peuvent être ajoutées à votre application, en utilisant le widget Image, suivi des méthodes .network(), ou .asset(). La première vous permet d’ajouter des images issues d’internet en indiquant un url, alors que la seconde utilise des images stockées dans votre fichier d’application. Par exemple, voici à quoi pourraient ressembler les deux widgets :

Image.network("https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png");
Image.asset("assets/images/image_exemple.png");

Pour la première image, la méthode .network() utilise un lien. Alors que .asset() utilise une image que j’ai stockée dans mon dossier d’application, plus précisément dans assets, puis image.

Les images utilisées avec .asset doivent au préalable avoir été stockées dans vos fichiers, et leur chemin ajouté dans votre dossier pubspec.yaml, sous la ligne assets : .

Créer des boutons

Vous pouvez ajouter des boutons à votre application grâce à ces trois widgets :

ElevatedButton() qui pemet d’utiliser un Container comme bouton ;
IconButton() qui permet d’utiliser un icon comme bouton ;
TextButton() qui utilise du texte comme bouton.

Les trois fonctionne d’une manière similaire et ont au moins besoin d’un paramètre onPressed et child pour fonctionner. onPresse(){} vous permet de définir ce qu’il se passe lorsque l’on appuie sur votre bouton. Child quant à lui va vous permettre de définir le texte ou l’icon, ou l’image de votre bouton. Par exemple, voici à quoi pourrait ressembler un bouton texte :

TextButton(onPressed: () {print("Cela fonctionne");},
child: Text('Appuyer ici')
)

Il est technique possible de transformer n’importe quel widget en bouton en utilisant un GestureDetector(), mais cela requiert un niveau un peu plus avancé de connaissance de Flutter.

Créer des champs de formulaire

Avoir des champs de formulaire sera important pour récupérer des informations de vos utilisateurs, comme leur mail ou leur mot de passe. Flutter met donc à votre disposition le widget TextField() (champ de texte), qui vous permet d’écrire du texte à l’intérieur. Celui-ci ne requiert qu’un seul paramètre pour fonctionner, qui s’appelle controller. Le controler est une variable de type TextEditingController, que vous devez définir au préalable et qui va contenir ce qui écrit dans votre formulaire. Chaque controller, ne pouvant contenir qu’une seule valuer à la fois, vous devez en faire un par champ de texte. Par exemple :

TextEditingController email = TextEditingController();
TextEditingController mdp = TextEditingController();

TextField(
	controller: email, 
	decoration: InputDecoration(
              hintText: "Entrez email"
  ),
),
TextField(
	controller: mdp, 
	decoration: InputDecoration(
              hintText: "Entrez mot de passe"
  ),
)

Créer des listes

Vous pouvez créer des listes dans Flutter grâce au widget ListView(), qui peut être suivi des méthodes .builder(), ou .separated(). La ListView va contenir des ListTiles, qui représenteront les différents éléments de votre liste. Par exemple :

ListView(
  children: const <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
),

Les ListView dans Flutter

Pour en apprendre plus sur ce widget, je vous invite à lire cet article plus complet.

Donner une taille à vos widgets

La taille d’un écran de smartphone étant limitée, il est important de bien maîtriser comment leur donner la hauteur et la largeur voulue. Sinon, ceux-ci risquent d’être trop petits ou bien trop grands et d’affecter l’expérience utilisateur. Voici donc plusieurs manières de gérer la taille de vos widgets.

Taille absolue

La première manière de définir la largeur et la hauteur d’un widget est de lui attribuer une valeur absolue, c’est-à-dire qui ne change pas, peu importe la taille de l’écran. Pour cela, vous n’avez cas indiquer une valeur numérique aux paramètres heigth et width. Ces valeurs définiront la hauteur et la largeur en pixels. Par exemple :

Container( 
	heigth: 40, 
	width: 80, 
	color: Colors.blue, 
)

Ici, mon widget va afficher un rectangle bleu de 40 pixels de hauteur, sur 80 de large.

Cette méthode est la plus simple à utiliser quand on débute, mais pas la plus pratique. Si vous testez votre application sur différents écrans, vous allez vite vous rendre compte que donner des valeurs absolues à vos widgets n’est pas toujours une bonne idée.

Taille relative à l’écran

Une deuxième manière de définir la taille à vos widgets est cette fois-ci d’utiliser la taille de l’écran. Vous allez ensuite pouvoir donner une largeur et une hauteur en % de cet écran. Par exemple :

Container( 
	heigth: MediaQuery.of(context).size.heigth * 0.1 
	width: MediaQuery.of(context).size.width * 0.3
	color: Colors.blue, 
)

Ici, mon widget va afficher un rectangle bleu qui prend 10% de la hauteur de mon écran et 30% de sa largeur.

Vous pouvez tout à fait utiliser .width pour calculer la hauteur et .heigth pour la largeur. Gardez juste en tête que 1% de la hauteur de votre écran est plus grand que 1% de sa largeur.

Taille relative à un widget parent

Enfin, une dernière manière de définir la taille d’un widget est de la définir par rapport à son parent. Par exemple, dire que mon image va faire la moitié de la hauteur de son widget parent et 30% de sa largeur.

FractionallySizedBox(
 widthFactor: 0.7,
 heightFactor: 0.5,
 child: Container(
 color: Colors.green, 
 )
),

Ici, mon rectangle vert fera 70% de la largeur de son parent et 50% de sa hauteur.

Utiliser tout l’écran

Pour indiquer qu’un Container doit prendre toute la place disponible sur l’écran, il vous suffit d’utiliser la méthode double.infinity :

Container( 
	heigth: double.infinity
	width: double.infinity
	color: Colors.blue, 
)

Ici, mon rectangle bleu va prendre toute la hauteur et la largeur de mon écran. Je peux m’en servir comme base de ma page, par exemple pour lui donner une couleur de fond.

Placer un widget sur l’écran

Une fois que vos widgets ont la taille que vous souhaitez, il va être important de les placer au bon endroit sur l’écran. Voici quelques méthodes qui vont vous y aider.

Widget Center()

Le widget Center(), va automatiquement placer le widget child que vous allez placer dedans, au centre de son parent. Par exemple :

Container( 
	heigth: 80,
	width: 80,
	color: Colors.blue, 
	child: Center(
		child: Container(
			height: 40, 
			width: 40, 
			color: Colors.yellow, 
		),
	),
)

Ici, mon carré vert de 40 pixels est placé au centre du carré bleu de 80 pixels.

Ajouter une marge ou un padding à votre widget

Un moyen d’espace un widget par rapport à un autre est de lui ajouter une marge ou un padding. La première va permettre de laisser un espace entre deux widgets, alors que le deuxième va laisser un espace entre les bords d’un widget parent et ceux de son enfant. Par exemple, je peux utiliser un padding, pour dire à mon widget Text() de rester bien au centre de mon Container(). Pour ajouter un espace, il vous suffit d’utiliser EdgetInset, suivi d’une des méthodes qui suivent :

.all(), qui applique le même espace partout ;
.symetric(), qui applique un espace pour le haut et le bas et un autre pour la droite et la gauche,
.only(), qui permet de définir l’espace à gauche, en bas, à droite et en haut.

Par exemple :

Container( 
	heigth: 80,
	width: 80,
	margin: EdgeInsets.only(right: 20, top: 20),
)

Ici, j’ai appliqué une marge de 20 pixels à droite de mon Container et 20 pixels en haut.

Comme pour la taille de vos widgets, je vous conseille de définir vos marges non pas en valeurs absolues, mais en valeurs relatives.

Lignes et colonnes

Pour empiler vos widgets dans le sens de la hauteur ou de la largeur, Flutter met à disposition les widgets Row() (ligne) et Column() (colonne). Ceux-ci prennent un unique paramètre Children[], dans lequel vous allez pouvoir placer vos divers éléments, séparés par des virgules :

Container( 
	heigth: 200,
	width: 100,
	Column(
		children[
			Text("Mon premier texte"), 
			Container(
				heigth: 50,
				width: 40, 
				color: Colors.red,
			),
			Row(
				children[
					Text("Mon deuxième texte"),
					Text("Mon troisièlme texte"),
        ]
)

Ici, mon container contient une colonne dans laquelle se trouve un premier texte, puis un rectangle rouge et enfin, une ligne avec deux textes.

Vos lignes et vos colonnes auront la hauteur et la largeur du Container dans lequel elles sont stockées. Pensez donc bien à leur donner assez d’espace pour que tous les éléments s’affichent.

MainAxisAlignment et CrossAxisAlignment

Une fois vos lignes et colonnes créées, vous allez pouvoir définir comment les éléments ajoutés dedans vont s’empiler. Pour cela, Flutter met à disposition les méthodes MainAxisAlignment et CrossAxisAlignment. Celle-ci peuvent être utilisées avec :

.center ;
.start ;
.end ;
.spacearound ;
.spacevenly ;
.spacebetween;

Par exemple, si j’utilise MainAxisAlignment.center tous les éléments dans ma colonne seront affichés au milieu de mon écran dans le sens de la largeur. Puis si j’indique CrossAxisAlignment.start, ceux-ci seront empilés à partir du haut de ma colonne.

Conclusion

Réussir à créer une application qui est esthétique en plus de fonctionner est quelque chose qui prend du temps. Donner la bonne taille à ses différents éléments et les placer où on le souhaite sur l’écran est loin d’être simple quand on commence ? C’est pourquoi je vous conseille de commencer par là pour coder votre application. Apprenez à créer des pages basiques, leur donner de la couleur, créer des boutons ou des champs de texte. La partie fonctionnelle viendra plus tard.

Testez les différents paramètres des widgets qui sont présentés ici et regardez ce qu’il se passe quand vous les modifier. C’est le meilleur moyen de comprendre comment chacun fonctionne et ce que vous pouvez faire. Cet article n’est qu’une introduction et la route sera longue avant de pouvoir réaliser exactement ce que vous avez en tête. Mais il faut commencer quelque part et s’entrainer un peu tous les jours est la meilleure manière de progresser.

Pourquoi ne pas prendre une application de votre téléphone et tenter de reproduire le design d’une de ses pages ?

Si vous souhaitez en apprendre plus sur les éléments à utiliser pour construire votre application, je vous invite à consulter mon article sur les widgets Flutter de base.