Comment afficher des images dans Flutter

Afficher des images dans flutter se fait de deux manières. C’est en fonction de l’emplacement de l’image, à savoir des images internes ou provenant d’Internet.

Dans une application, les images sont un élément important pour produire des visuels plus attrayants qui peuvent également améliorer l’interactivité des utilisateurs.

Alors comment afficher des images dans l’application flutter ?

Afficher des images dans Flutter en interne

Les assets sont des fichiers image qui sont ajoutés au dossier de l’application. Ensuite, ils seront utilisés pour afficher des images sans connexion Internet. Voici les étapes que vous devez suivre :

• Créer un nouveau dossier appelé /assets dans votre projet (nomDuProjet/assets/).
• Mettre les images dans le dossier.
• Définir les assets à utiliser dans pubspec.yaml.
• Charger l’image à partir des assets dans le code.

Il est recommandé de créer un répertoire assets. Puis, créer un sous-répertoire nommé images pour stocker toutes les images requises dans l’application.

Dans le fichier pubspec.yaml recherchez cette ligne :

# To add assets to your application, add an assets section, like this:

Puis, modifiez le code des assets pour inclure votre image:

assets:  
    - assets/images/image_1.jpg

Ou plusieurs images.

assets:  
    - assets/images/image_1.jpg
    - assets/images/image_2.jpg

Si vous souhaitez importer toutes les images, nous pouvons utiliser un moyen plus simple, qui consiste à utiliser le nom du répertoire.

assets:  
    - assets/images/           

Voici le code qui affichera votre image.

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("Afficher des images"),
        ),
        body: Image.asset('assets/images/image_1.jpg'), //   <-- image
      ),
    );
  }
}

Afficher des images dans Flutter à partir d’internet

Afficher des images dans Flutter à partir d’internet est plus facile car il n’est pas nécessaire de gérer les dossiers des images. Utilisez simplement Image.network et entrez l’URL de l’image (clique droit sur l’image).

Image.network(
  'https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg',
  width: 320.0,
)

En fait, dans cet exemple, nous utilisons 2 arguments, l’url et la largeur de l’image. Les arguments width et height peuvent être utilisés pour contrôler la taille de l’image. Lors de l’exécution, flutter chargera l’image à partir du Web ou de l’URL fournie et l’affichera à l’intérieur du conteneur.

Bien qu’il soit plus simple d’afficher des images dans Flutter à partir d’internet, vous aurez quelques défis, à savoir :

• Chaque image nécessitera une connexion Internet.
• Si vous êtes déconnecté, l’image sera vide et vous aurez une erreur.

Cependant, pour réduire les requêtes répétées sur des images déjà chargées, utilisez le cache. Le cache est utile pour stocker des images qui ont été chargées temporairement.

Vous aurez besoin d’installer le package cached_network_image en l’ajoutant dans pubspec.yaml.

Définir la hauteur et la largeur de l’image

Pour définir la hauteur et la largeur de l’image, nous pouvons utiliser les propriétés height pour la hauteur et width pour la largeur.

body: Image.asset(
  'assets/images/image_1.jpg',
  height: 100,
  width: 200,
),

Manipulation des couleurs de l’image

Dans le widget Image, nous pouvons également manipuler la couleur de l’image avec la propriété colorBlendMode. En fait, l’utilisation de cette propriété est généralement combinée avec la propriété color.

body: Column(children: <Widget>[
  Image.asset('assets/images/image_1.jpg'),
  Image.asset('assets/images/image_1.jpg',
      color: Colors.grey,
      colorBlendMode: BlendMode.hue),
]),

Lorsque nous utilisons plusieurs widgets, nous remplaçons la propriété child par la propriété children.

À présent vous savez comment afficher des images dans votre application.