Le widget Icon dans Flutter : Utilisation et liste d’icons

Afficher un icon dans une application Flutter

Les icônes sont essentielles à une bonne interface utilisateur, en permettant d’identifier rapidement à quoi sert un élément visuel. Icon, comme son nom l’indique, est donc un widget de base vous permettant d’afficher des icônes dans votre application Flutter, provenant soit de la bibliothèque directement intégrée, soit d’une source externe.

Voici un exemple tout simple d’utilisation du widget Icon :

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('Icônes dans Flutter'),
        ),
        body: Center(
          child: Icon(
            Icons.favorite,
          ),
        ),
      ),
    );
  }
}

Changer la couleur d’une icône

Modifier la couleur d’une icône dans Flutter est très simple. En effet, il vous suffit de spécifier la propriété color du widget Icon. Voici un exemple :

Icon(
  Icons.favorite,
  color: Colors.red,
);

Changer la taille d’un icon

De la même manière, vous pouvez changer la taille d’une icône en utilisant la propriété size. Voici comment le faire :

Icon(
  Icons.favorite,
  size: 50.0,
);

Les types d’icônes

Flutter propose généralement 4 versions d’une même icone :

1. Normal (Filled) : C’est le style par défaut, où l’icône est complètement remplie. Par exemple Icons.home.
2. Outlined : Ce sont des icônes avec seulement le contour (bordure) apparent, ce qui leur donne une esthétique plus légère et aérée. Par exemple, Icons.home_outlined
3. Rounded : Ces icônes ont des coins plus arrondis, ce qui leur donne un aspect plus doux. Par exemple Icons.home_rounded.
4. Sharp : Ces icônes ont des bords et des angles bien définis (sans arrondis). Par exemple Icons.home_sharp.

Créer un bouton à partir d’un icon

Les icônes permettent d’exprimer des idées d’une manière plus visuelle que du texte. On va donc souvent les utiliser pour designer les boutons d’une interface utilisateur. C’est pourquoi Flutter dispose d’un autre widget IconButton qui vous permet de facilement créer un bouton à partir d’une icône.

Voici un exemple tout simple qui affiche du texte dans le terminal quand on clique dessus :

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('Icônes dans Flutter'),
        ),
        body: Center(
          //DEBUT DU BOUTON
            child: IconButton(
          icon: Icon(Icons.favorite),
          onPressed: () {
            // Action à effectuer lorsque le bouton est pressé
            print("J'aime");
          },
          color: Colors.red,
          iconSize: 60.0,
        )
        //FIN DU BOUTON
        ),
      ),
    );
  }
}

Liste des icônes Flutter

Flutter ne dispose pas directement sur son site d’une liste des icônes directement intégrées dans sa bibliothèque. En revanche, vous pouvez les retrouver sur le site Google Font avec leur visuel et leur nom d’icone (Icon name).

Sachez qu’il existe également de nombreuses autres bibliothèques que vous pouvez utiliser pour votre application après les avoir importées. Pour en savoir plus, je vous invite à lire mon article sur les packages d’icons dans Flutter.

Conclusion

Vous savez désormais ajouter des icons dans votre application Flutter, afin de la rendre plus compréhensible pour les utilisateurs. Pourquoi ne pas maintenant apprendre à ajouter des images afin d’améliorer son apparence ?

Guide complet Flutter : Le widget Icon →