Le widget Icon – ajouter des icônes avec Flutter

Le widget Icon de Flutter permet d’introduire des icônes dans vos applications. En fait, Flutter vous facilite la tâche en vous fournissons des icônes au lieu de les importer.

Les icônes sont des symboles représentatifs qui nous aident à comprendre facilement et rapidement la fonctionnalité ou le sens de quelque chose.

Flutter crée un meilleur contrôle pour les différentes tailles et les types des icônes à afficher sur les différents écrans. De plus, la classe Icon possède quelques propriétés qui permettent de modifier le style d’une icône.

Pour utiliser la classe Icon, vous devez définir uses-material-design: true dans le fichier pubspec.yaml de votre projet. Ce qui permet d’inclure la police MaterialIcons dans votre application. En fait cette police est utilisée pour afficher les icônes.

Comment utiliser le widget Icon dans Flutter ?

Pour utiliser les icônes Flutter, appelez le widget Icon dans votre application comme n’importe quelle autre méthode.

Icon()

De plus, vous devez connaître les différentes propriétés qui viennent avec le widget Icon. En fait, les éléments suivants sont les plus importants.

color – La propriété color vous permet de choisir la couleur d’une icône. Par défaut, elle prend la couleur Noir. Pour utiliser cette propriété, utilisez la classe Colors . L’accès aux couleurs dans Flutter est simple, écrivez le mot Colors, suivit d’un point, puis appuyez sur Ctrl+Espace.

icon – L’attribut icon contient l’espace de l’icône elle-même. Dans Flutter, les icônes peuvent être utilisées en tant que telles, mais en appelant la classe Icon. Cette classe contient toutes les constantes (essentiellement des nombres hexadécimaux) qui pointent vers des icônes.

size – cet attribut prend une valeur double et vous permet de donner n’importe quelle taille à l’icône. Par exemple, size: 25.0 créera une icône d’une taille de 25 px.

textDirection – La direction du texte est utilisée pour indiquer dans quelle direction l’icône s’affichera. Utilisez la classe TextDirection pour d’autres directions disponibles.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.lightGreen,
          title: Text("Le widget Icon"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                Icons.account_balance,
                color: Colors.red,
                size: 50.0,
              ),
              Icon(
                Icons.access_alarm,
                color: Colors.green,
                size: 50.0,
              ),
              Icon(
                Icons.add_shopping_cart,
                color: Colors.blue,
                size: 50.0,
              ),
            ],
          ),
        ));
  }
}

Maintenant, prenons un autre exemple, dans lequel nous allons placer du texte en dessous de chaque icone. Nous utiliserons le widget Row ainsi que la propriété mainAxisAlignment: MainAxisAlignment.spaceAround.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.lightGreen,
          title: Text("Le widget Icon"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Column(children: <Widget>[
              Icon(
                Icons.add_a_photo,
                color: Colors.red,
                size: 50.0,
              ),
              Text('photo', style: TextStyle(color: Colors.white)),
            ]),
            Column(children: <Widget>[
              Icon(
                Icons.access_alarm,
                color: Colors.green,
                size: 50.0,
              ),
              Text('Horraires', style: TextStyle(color: Colors.white)),
            ]),
            Column(children: <Widget>[
              Icon(
                Icons.attach_email,
                color: Colors.blue,
                size: 50.0,
              ),
              Text('Email', style: TextStyle(color: Colors.white)),
            ]),
          ],
        ));
  }
}

Ce qui vous donnera le résultat suivant :

En fait, dans l’exemple précédent, nous avons utilisé le widget Column pour placer le texte en dessous de l’image.

Voici les icones de Material Design que vous pouvez trouver dans Flutter.