Guide complet Flutter : Le widget Image

Introduction au widget image

Le widget Image est un composant de base de Flutter qui vous permet d’afficher des illustrations et des images dans votre application mobile. Ce widget prend en charge plusieurs méthodes pour intégrer du contenu provenant de différentes sources :

Fichiers locaux (images stockées dans les ressources de l’application)
URL (images récupérées en ligne)
Mémoire (images stockées directement dans la mémoire)
Système de fichiers (images provenant du stockage local de l’appareil)

Quels sont les formats d’images autorisés ?

Flutter prend en charge de nombreux formats d’images, animés ou statiques, pour afin de lier esthétique et performance. Voici les principaux formats d’image utilisables avec le widget Image :

JPEG (Format compressé qui réduit la qualité, mais diminue le poids du fichier) ;
PNG (Format compressé sans perte et qui permet d’avoir un arrière-plan transparent) ;
GIF (Format d’image animé qui permet de stocker des séquences d’images en un seul fichier) ;
WEBP (Format d’image développé qui combine les avantages du JPEG et du PNG) ;
BMP (Images non compressées, de meilleures qualités) ;
HEIF (Similaire au WEBP) ;
ANPG (Extension du format PNG, qui permet d’animer des images).

Les différentes méthodes pour ajouter des images dans Flutter

Flutter propose plusieurs méthodes pour afficher des images en fonction de leur source. On trouve ainsi :

Image.asset : Pour les images locales (assets).
Image.network : Pour les images en ligne via une URL.
Image.file : Pour les images provenant du stockage local de l’appareil.
Image.memory : Pour les images stockées en mémoire sous forme de bytes.
Image.new : Une méthode flexible permettant de charger des images depuis diverses sources.

Utiliser Image.asset pour les images locales

La méthode Image.asset est utilisée pour afficher des images stockées localement dans votre projet Flutter.

Vous allez donc dans un premier temps devoir placer l’image que vous souhaitez utiliser, dans un dossier spécifique de votre projet. Il est conseillé de créer un dossier assets/images à la base de votre projet, dans lequel vous irez placer toutes vos images.

La deuxième chose à faire sera ensuite de déclarer ce dossier d’images dans le fichier pubspec.yaml pour que Flutter sache où trouver vos ressources. Ajoutez la section assets comme suit :

flutter:
  assets:
    - assets/images/mon_image.png

Enfin, vous allez pouvoir utiliser le widget Image.asset pour afficher cette image dans votre application. Attention toutefois, à bien fournir le chemin relatif (comme dans pubspec.yaml) et non pas le chemin complet :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image.asset Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/mon_image.png'),
        ),
      ),
    );
  }
}

Utiliser Image.network pour afficher des images depuis une URL

Image.network est utilisé pour afficher des images récupérées en ligne à partir d’une URL. Voici un exemple simple :

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image.network Example'),
        ),
        body: Center(
          child: Image.network('https://example.com/mon_image.png'),
        ),
      ),
    );
  }
}

Gérer les erreurs de chargement

Lors du chargement d’une image à partir d’une URL, des erreurs peuvent survenir (URL incorrecte, absence de connexion). Flutter offre des solutions pour gérer ces erreurs et améliorer l’expérience utilisateur :

errorBuilder : pour afficher un message ou une alternative en cas d’échec du chargement de l’image.

loadingBuilder : pour afficher un indicateur pendant le chargement.

Par exemple, voici comment mettre en place un loadingBuilder :

Image.network(
  'https://example.com/mon_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,
        ),
      );
    }
  },
)

Je vous invite également à consulter mon article sur le widget Placeholder, qui décrit plus en détails comment mettre en place le loadingBuilder.

Et voici un exemple de errorBuilder, afin d’afficher un widget de remplacement en cas d’erreur lors du chargement de l’image :

Image.network(
  'https://example.com/mon_image.png',
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    return Center(
      child: Text('Erreur de chargement'),
    );
  },
)

Gérer le cache des images

Par défaut, Flutter met en cache les images chargées via Image.network. Cela signifie que les images qui ont déjà été chargées une première fois vont être stockées localement pour être réutilisées sans avoir à les re-télécharger.

Cependant, sachez que pour un contrôle plus avancé du cache, vous pouvez utiliser des packages externes comme cached_network_image.

Utiliser Image.file pour afficher des images locales

La méthode Image.file vous permet d’afficher du contenu provenant du système de fichier local. Par exemple, vous pouvez utiliser des images générées par l’utilisateur ou téléchargées.

Pour utiliser cette méthode :

Commencez par importer les méthodes dart:io et flutter/material.dart ;
Utilisez la méthode Image.file() et donnez-lui comme paramètre un objet de type ‘File’, qui va pointer vers l’image locale à afficher.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image.file Example'),
        ),
        body: Center(
          child: Image.file(File('/chemin/vers/mon_image.png')),
        ),
      ),
    );
  }
}

Pour accéder aux images stockées dans l’appareil, vous pouvez utiliser des packages, comme image_picker par exemple.

Utiliser Image.new lorsque vous ne savez pas à l’avance le type de ressource

La méthode Image.new va vous permettre de créer différentes instances en fonction de la source que vous allez lui fournir. L’intérêt va être de gérer différents types de contenu, avec une seule méthode. En voici quelques exemples :

Image.new(asset: 'assets/images/mon_image.png')
Image.new(file: File('/chemin/vers/mon_image.png'))
Image.new(network: 'https://example.com/mon_image.png')
Image.new(memory: Uint8List.fromList([/* données de l'image */]))

Astuces pour optimiser l’affichage de vos images

Pour améliorer les performances et l’expérience utilisateur dans vos applications Flutter, voici quelques conseils :

Redimensionnez vos images pour éviter d’utiliser des fichiers trop lourds.
Utilisez des formats d’image optimisés comme le WEBP pour réduire la taille des fichiers tout en maintenant une bonne qualité.
Mettez en cache vos images pour éviter des téléchargements multiples.
Préchargez vos images afin d’améliorer le temps de chargement en amont.

En suivant ces bonnes pratiques, vous maximiserez les performances de votre application tout en garantissant une expérience fluide et agréable pour les utilisateurs.

Propriétés et techniques courantes liées aux images dans Flutter

Le widget Image possède plusieurs propriétés permettant d’améliorer le design de votre contenu. Ces propriétés permettent de contrôler l’opacité, de définir des bordures, d’ajuster la taille, et bien plus encore. Voici quelques-unes des plus utilisées.

Gérer l’opacité

Pour ajuster l’opacité d’une image, vous pouvez utiliser la propriété color combinée avec colorBlendMode. Cela permet d’appliquer une teinte de couleur à l’image avec un certain degré de transparence. Voici un exemple où j’assombris l’image de 50 % en lui appliquant une teinte noire :

Image.asset(
  'assets/images/mon_image.png',
  color: Colors.black.withOpacity(0.5), // Applique une opacité à l'image
  colorBlendMode: BlendMode.darken, // Mélange la couleur avec l'image
)

Ajouter une bordure

Pour ajouter une bordure autour d’une image, vous pouvez utiliser le widget Container et encapsuler votre image à l’intérieur, tout en définissant la propriété decoration pour créer la bordure.

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent, width: 5), // Bordure bleue de 5 pixels
  ),
  child: Image.asset('assets/images/mon_image.png'),
)

Redimensionner une image

Pour redimensionner une image dans Flutter, vous pouvez utiliser les propriétés width et height du widget Image. Cela permet de définir précisément la taille de l’image.

Image.asset(
  'assets/images/mon_image.png',
  width: 100, // Largeur définie à 100 pixels
  height: 100, // Hauteur définie à 100 pixels
)

Remplir un Container avec une image

La propriété fit vous permet de définir comment l’image s’ajuste à l’intérieur de son conteneur. Vous pouvez utiliser différentes options comme BoxFit.cover, BoxFit.contain, ou BoxFit.fill.

Image.asset(
  'assets/images/mon_image.png',
  fit: BoxFit.cover, // L'image couvrira tout l'espace disponible
)

La propriété BoxFit.cover montrée ici, fait en sorte que l’image remplisse complètement l’espace, en la rognant si nécessaire.

Ajouter des coins arrondis à une image

Pour ajouter des coins arrondis à une image, vous pouvez utiliser ClipRRect, un widget qui permet de découper les bords de l’image pour obtenir un effet arrondi.

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Arrondir les coins à 20 pixels
  child: Image.asset('assets/images/mon_image.png'),
)

Vous pouvez aussi en apprendre plus, dans mon guide dédié à comment rendre une image ronde dans Flutter.

Appliquer une ombre à une image

Pour ajouter une ombre sous une image, encapsulez l’image dans un Container et utilisez la propriété BoxShadow dans decoration.

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5), // Couleur de l'ombre
        spreadRadius: 5, // Expansion de l'ombre
        blurRadius: 7, // Rayon de flou de l'ombre
        offset: Offset(0, 3), // Décalage de l'ombre
      ),
    ],
  ),
  child: Image.asset('assets/images/mon_image.png'),
)

Conclusion

Vous êtes désormais capable d’ajouter des images à votre application pour la rendre l’experience utilisateur plus agréable, ou travailler avec des photos. Votre application commence à prendre forme, mais comment faire pour ajouter des boutons ? Je vous l’explique dans le prochain guide :

Guide complet Flutter : Le widget ElevatedButton →