Le widget Image dans Flutter
Le widget Image dans Flutter
-
Présentation
- Le widget d’image est un widget essentiel dans Flutter car sans image, vous ne pouvez pas développer une belle application. Les images expriment mieux le contenu que le texte.
- Pour rendre une application agréable en termes d’expérience utilisateur, il est courant d’insérer des images. Avec Flutter, il existe aussi un widget dédié : Image.
- L’affichage d’images est le concept fondamental de la plupart des applications mobiles. Flutter dispose d’un widget Image qui permet d’afficher différents types d’images dans l’application mobile.
- Les formats d’images pris en compte sont nombreux : JPEG, PNG, GIF, WebP, AnimatedWebP, BMP et WBMP.
-
Constructeurs du widget image dans flutter
- Plusieurs constructeurs sont fournis pour les différentes façons dont une image peut être spécifiée :
Image, pour obtenir une image à partir d’un ImageProvider .Image.asset, pour obtenir une image à partir d’un AssetBundle à l’ aide d’une clé.Image.network, pour obtenir une image à partir d’une URL.Image.file, pour obtenir une image à partir d’un File .Image.memory, pour obtenir une image à partir d’une Uint8List .-
Image.asset
- Pour insérer une image directement dans le projet, , procédez comme suit :
- Tout d’abord, nous devons créer un nouveau dossier à la racine du projet Flutter et le nommer assets. Nous pouvons également lui donner un autre nom si vous le souhaitez, mais idéalement c’est assets.
- Ensuite, dans ce dossier (assets) créez un autre dossier portant le nom images.
- Vous pouvez maintenant copier votre image dans le sous-dossier d’ images . Le chemin doit ressembler à assets/images/yourImage . Avant d’ajouter des images, vérifiez également les formats d’image pris en charge mentionnés ci-dessus.
- Mettez à jour le fichier pubspec.yaml.
- Le fichier pubspec spécifie les dépendances requises par le projet, telles que des packages particuliers (et leurs versions), des polices ou des fichiers image. Il spécifie également d’autres exigences, telles que les dépendances sur les packages de développement (comme les packages de test ou de simulation), ou des contraintes particulières sur la version du SDK Flutter.
- Pour pouvoir utiliser les images, il va falloir retourner dans le fichier pubspec.yaml. À l’intérieur, dans la section « flutter : » il faudra décommenter l’exemple d’insertion d’assets :
- Attention, il s’agit d’un fichier yaml. Il s’agit donc d’un fichier de configuration où l’indentation a une importance cruciale, il faut absolument veiller à la respecter ; assets, par exemple, doit être inscrit à deux espaces de la marge gauche.
- Il est donc possible de ne déclarer que le dossier contenant toutes les images. Elles seront ainsi toutes prises en compte en une seule ligne. Pour cela, il suffit d’indiquer le chemin du dossier et de finir la déclaration par « /« .
-
Exemple d’application
-
Images du Web
- Si l’insertion des images directement dans le projet est une bonne façon de maitriser ses ressources, il est aussi possible de récupérer une image depuis le Web directement.
- Le widget d’image nous permet de charger directement une image à partir d’une URL donnée.
- Cette technique est évidemment plus simple et moins coûteuse en stockage. Mais elle présente un risque non négligeable, celui de voir la ressource disparaître et devenir inaccessible. C’est le cas, notamment, quand l’application n’arrive plus à se connecter au réseau.
- Pour inclure des images provenant du web, le widget Image propose un constructeur nommé
Image.networkqui attend une URL. - Pour faire suite au code déjà présenté, cette ligne est rajoutée :
-
Exemple d’application
-
Image.network
- Si l’insertion des images directement dans le projet est une bonne façon de maitriser ses ressources, il est aussi possible de récupérer une image depuis le Web directement.
- Cette technique est évidemment plus simple et moins coûteuse en stockage. Mais elle présente un risque non négligeable, celui de voir la ressource disparaître et devenir inaccessible. C’est le cas, notamment, quand l’application n’arrive plus à se connecter au réseau.
- Pour inclure des images provenant du web, le widget Image propose un constructeur nommé
Image.network()qui qui accepte comme argument une URL. -
Exemple d’application
- Au lieu de donner la largeur, vous pouvez ajuster l’image network à l’intérieur d’un conteneur avec l’argument fit. Ici, nous utilisons Boxfit.contain qui rend l’image contenue dans le conteneur, comme indiqué dans l’image ci-dessous.
- Les valeurs qui peuvent être données à l’argument fit sont :
BoxFit.contain– Aussi grand que possible mais contenu dans le conteneurBoxFit.cover– Aussi petit que possible mais couvrant tout le conteneurBoxFit.fill– Remplit tout le conteneur mais peut déformer le rapport d’aspect de l’imageBoxFit.fitHeight– La hauteur de l’image sera égale à celle du conteneur. Cela ne gâchera pas le rapport d’aspect de l’imageBoxFit.fitWidth– La hauteur de l’image sera égale au conteneur.BoxFit.none– L’image n’est pas du tout redimensionnéeBoxFit.scaleDown– Réduit l’image pour l’adapter à l’intérieur du conteneur-
Application
- A l’aide du
widget NetworkImage()pour afficher une image network en arrière-plan d’un conteneur. Pour cela, utiliser le widget SizedBox avec les propriétés width: double.infinity et_double.infinity - L’argument Fit peut également être utilisé pour ajuster la taille de l’image affichée.
Le code de l’exemple
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Insérer une image',
),
),
body: Center(
child: Column(
children: [
Image.asset('images/apcpedagogie.png',
height: 200,
scale: 2.5,
// color: Color.fromARGB(255, 15, 147, 59),
opacity:
const AlwaysStoppedAnimation(0.5)), //Image.asset
Image.asset(
'images/apcpedagogie.png',
height: 400,
width: 400,
), // Image.asset
], //[]
), //Column
), //Center
),
);
}
}
Résultat attendu
Solution
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Insérer une image',
),
),
body: Center(
child: Column(
children: [
Image.asset('images/apcpedagogie.png',
height: 200,
scale: 2.5,
// color: Color.fromARGB(255, 15, 147, 59),
opacity:
const AlwaysStoppedAnimation(0.5)), //Image.asset
Image.asset(
'images/apcpedagogie.png',
height: 400,
width: 400,
), // Image.asset
], //[]
), //Column
), //Center
),
);
}
}
Résultat attendu
Le code de l’exemple
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Le widget Image dans Flutter',
),
),
body: Center(
child: Column(
children: [
Image.network(
'https://images.unsplash.com/photo-1547721064-da6cfb341d50',
// color: Color.fromARGB(255, 15, 147, 59),
width: 300,
), //Image.asset
], //[]
), //Column
), //Center
),
);
}
}
Résultat attendu
Le code de l’exemple
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Le widget Image dans Flutter',
),
),
body: SizedBox(
width: double.infinity,
height: double.infinity,
child: Image.network(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",
fit: BoxFit.cover,
),
),
),
);
}
}