Le widget Icon dans Flutter
Le widget Icon dans Flutter
-
Présentation
- Les icônes sont l’un des outils les plus employés de nos jours. Elles permettent d’obtenir une compréhension rapide simplement au travers d’un visuel.
- De plus, à force de les employer, des conventions se sont mises en place. Par exemple, tout le monde associe la loupe à une recherche ou une roue dentée aux paramètres.
- Flutter offre un vaste choix d’icônes. Faciles à trouver, puisqu’il existe un choix important déjà prévu. Il propose deux possibilités de base, soit en travaillant avec la classe Icons qui comporte une collection au style Material Design, soit avec la classe CupertinoIcons qui propose un style iOS.
-
Comment utiliser le widget Icon dans Flutter ?
-
Comment ajouter une icône dans l’application Flutter ?
- Vous pouvez utiliser le widget
Icon()pour ajouter des icônes à votre application Flutter. - L’insertion de l’icône peut être réalisée au travers du widget
Icon. Ce dernier permet de jouer avec certaines propriétés. icon: Il est utilisé pour spécifier le nom de l’icône à afficher dans l’application. Généralement, Flutter utilise des icônes de conception matérielle qui sont des symboles pour des actions et des éléments courants.color: Couleur Il est utilisé pour spécifier la couleur de l’icône.size: Taille Il est utilisé pour spécifier la taille de l’icône en pixels. Habituellement, les icônes ont la même hauteur et la même largeur.textDirection: Il est utilisé pour spécifier dans quelle direction l’icône sera rendue.-
Comment changer la taille et la couleur de l’icône ?
- Pour redimensionner la taille de l’icône et changer la couleur de l’icône, vous devez transmettre la taille et la valeur de couleur avec les données de l’icône au widget Icon().
-
Exemple d’application
- Dans cet exemple, nous verrons le widget d’icône de base qui a des valeurs par défaut. Commencez par créer un projet dans l’IDE, accédez au dossier lib , puis ouvrez le fichier main.dart . Maintenant, remplacez le code ci-dessous dans le fichier main.dart :
- La propriété
mainAxisAlignment: MainAxisAlignment.center,permet de mettre les icones à l’endroit souhaité MainAxisAlignmentet ses sous-propriétés comme le centre ou center (le cas choisi ici), la fin ou end, l’espace autour ou spaceAround , l’espace entre ou spaceBetween, l’espace uniformément ou spaceEvenly et le début ou start.MainAxisAlignmentest une propriété du widget Colonne.- Il est utilisé pour organiser les widgets enfants au format vertical selon un axe donné.
- Maintenant est ce que c’est possible de changer les icone horizontalement
- pour répondre à cette question changer le widget column par row
- Maintenant, nous allons placer du texte en dessous de chaque icone. Nous utiliserons le widget Row ainsi que la propriété
mainAxisAlignment: MainAxisAlignment.spaceAround. - Attention le texte et son widget doivent être aligné sur la même colonne
- Créer un espacement entre l’icone et son texte
- Voici les icones de Material Design que vous pouvez trouver dans Flutter.
Icon(Icons.message,
size: 50,
color: Colors.red
)
........
appBar: AppBar(
title: const Text("Le widget Icon"),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
....
Afficher le code
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Le widget Icon"),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(children: const [
Icon(
Icons.account_balance,
color: Colors.red,
size: 50.0,
),
Text('photo',
style: TextStyle(color: Color.fromARGB(255, 18, 39, 228))),
]),
Column(children: const [
Icon(
Icons.access_alarm,
color: Colors.green,
size: 50.0,
),
Text('Horraires',
style: TextStyle(color: Color.fromARGB(255, 18, 39, 228))),
]),
Column(children: const [
Icon(
Icons.add_shopping_cart,
color: Colors.blue,
size: 50.0,
),
Text('Email',
style: TextStyle(color: Color.fromARGB(255, 18, 39, 228))),
]),
],
),
),
),
);
}
}
Le résultat attendu
Afficher le code
.....
Column(children: const [
Icon(
Icons.add_shopping_cart,
color: Colors.blue,
size: 50.0,
),
Padding(padding: EdgeInsets.all(6)),
Text('Achats',
style: TextStyle(color: Color.fromARGB(255, 18, 39, 228))),
]),
......
Le résultat attendu
