Images et ressources Flutter

Cette section présentera le chargement d'images, la gestion des ressources locales et la gestion des images réseau dans Flutter.

Widget Image - Affichage d'image

Exemple : différentes méthodes de chargement d'images

// Charger l'image depuis le réseau
Image.network(
'https://example.com/image.png',
width: 200,
height: 200,
fit: BoxFit.cover,
)

// Charger l'image depuis les ressources locales
Image.asset('assets/images/logo.png')

// Charger l'image depuis un fichier local
Image.file(File('path/to/image.png'))

// Image avec état de chargement
Image.network(
'https://example.com/image.png',
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
)

// Image avec gestion des erreurs
Image.network(
'https://example.com/image.png',
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.error, size: 50);
},
)

Gestion des ressources locales

Configurez le dossier des ressources dans pubspec.yaml :

flutter:
  assets:
    - assets/images/
    - assets/data.json

Exemple : Utilisation des ressources locales

// Utiliser une image locale
class AssetImageExample extends StatelessWidget {
const AssetImageExample({super.key});

@override
Widget build(BuildContext context) {
return Column(
children: [
// Charger avec Image.asset
const Image(
image: AssetImage('assets/images/logo.png'),
width: 100,
),
// Forme abrégée
const Image.asset('assets/images/icon.png', width: 50),
const SizedBox(height: 20),
// Utiliser l'ajustement d'image
Conteneur(
width: 200,
height: 100,
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage('assets/images/bg.jpg'),
fit: BoxFit.cover,
),
border: Border.all(color: Colors.grey),
),
),
],
);
}
}

BoxFit Ajustement d'image

Valeur	Description
fill	Étirer pour remplir (peut déformer)
contain	Mettre à l'échelle proportionnellement, agrandir au maximum pour s'adapter
cover	Mettre à l'échelle proportionnellement, couvrir complètement
fitWidth	Mettre à l'échelle proportionnellement, remplir la largeur
fitHeight	Mettre à l'échelle proportionnellement, remplir la hauteur
none	Centrer l'affichage à la taille d'origine
scaleDown	contenir et ne pas dépasser la taille d'origine

CachedNetworkImage - Mise en cache des images

Utilisez le package cached_network_image pour implémenter la mise en cache des images.

Ajouter une dépendance

dependencies:
  cached_network_image: ^3.0.0

Exemple : CachedNetworkImage

import 'package:cached_network_image/cached_network_image.dart';

class CachedImageExample extends StatelessWidget {
const CachedImageExample({super.key});

@override
Widget build(BuildContext context) {
return CachedNetworkImage(
imageUrl: 'https://example.com/image.png',
// Afficher pendant le chargement
placeholder: (context, url) => const CircularProgressIndicator(),
// Afficher l'erreur
errorWidget: (context, url, error) => const Icon(Icons.error),
// Ajustement de l'image
fit: BoxFit.cover,
// Largeur et hauteur
width: 200,
height: 200,
// Image circulaire
imageBuilder: (context, imageProvider) => CircleAvatar(
backgroundImage: imageProvider,
),
);
}
}

Pour les images réseau, il est recommandé d'utiliser CachedNetworkImage, qui peut mettre automatiquement en cache les images et améliorer les performances de chargement.

autres extensions