À quoi sert un placeholder ?
Dans Flutter, un placeholder est une image temporaire ou un widget qui est affiché pendant que l’image principale est en cours de chargement. Ceci permet d’améliorer l’expérience utilisateur en évitant d’afficher une zone vide lorsqu’une ressource prend du temps à se charger. Ajouter un placeholder est donc quelque chose de recommandé lorsque vos images proviennent d’un réseau ou d’une source distante (Par exemple Firebase).
Comment ajouter une placeholder ?
Il existe plusieurs manières de mettre en place un placeholder pour une image dans Flutter, mais voici les deux plus simples.
Utiliser le widget FadeInImage
Flutter propose un widget appelé FadeInImage qui facilite l’affichage d’un placeholder pendant le chargement de l’image. Celui-ci dispose de trois propriétés permettant de mettre en place ce comportement :
- placeholder : Chemin vers l’image qui sera affichée en attendant le chargement de l’image principale. Ici, c’est une image locale (assets/placeholder.png).
- image : URL de l’image qui sera chargée depuis le réseau.
- fadeInDuration : Temps de la transition en fondu lorsque l’image principale remplace le placeholder.
Voici un exemple :
FadeInImage.assetNetwork(
placeholder: 'assets/placeholder.png',
image: 'https://example.com/image.png',
fadeInDuration: Duration(milliseconds: 200),
)Utiliser la propriété loadingBuilder
Une autre manière de faire est d’utiliser la propriété loadingBuilder, fournie par le widget Image.network, qui permet de personnaliser le comportement d’une image pendant son chargement.
Voici un exemple :
Image.network(
'https://example.com/image.png',
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
} else {
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / (loadingProgress.expectedTotalBytes ?? 1)
: null,
),
);
}
},
)
