Le widget IconButton dans Flutter

Présentation

Dans Flutter, l’IconButton est un widget qui permet de créer un bouton avec une icône à l’intérieur. Il est souvent utilisé pour les actions telles que partager, aimer ou ajouter à la liste de favoris. Il prend en entrée un objet IconData qui définit l’icône à afficher et peut également avoir une fonction de rappel lorsque le bouton est appuyé. Il peut également être personnalisé en utilisant des propriétés telles que la couleur et la taille de l’icône.
Flutter IconButton agit comme un bouton, mais avec une icône au lieu d’un bouton habituel.
L’IconButton est, comme son nom le suggère, un bouton intégrant une icône. Il s’agit d’un bouton de style Material Design.
Dans la majorité des cas, ces boutons sont utilisés au sein d’appBar.

Le Widget IconButton

Créer un bouton IconButton

Il existe plusieurs façons de créer un bouton avec icône dans Flutter, mais l’une des manières les plus simples est d’utiliser le widget IconButton.
Voici un exemple de code qui crée un bouton avec une icône de cœur :

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // Code à exécuter lorsque le bouton est pressé
  },
)

Vous pouvez personnaliser l’apparence du bouton en utilisant les propriétés de IconButton, telles que color, iconSize, padding, alignment, etc.

Personnaliser l’apparence d’un bouton IconButton

Pour personnaliser l’apparence d’un bouton IconButton dans Flutter, vous pouvez utiliser la propriété « icon » pour définir l’icône qui sera affichée sur le bouton, et la propriété « color » pour définir la couleur de l’icône. Vous pouvez également utiliser la propriété « splashColor » pour définir la couleur de l’effet lorsque l’utilisateur appuie sur le bouton
Il y a plusieurs façons de personnaliser l’apparence d’un bouton Widget IconButton dans Flutter, mais voici quelques exemples courants :
Utiliser des propriétés de style

Utiliser des propriétés de style : Vous pouvez utiliser des propriétés telles que « color« , « size » et « icon » pour personnaliser l’apparence de votre bouton IconButton.
Changer la couleur de l’icône en utilisant le paramètre iconColor :

IconButton(
  icon: Icon(Icons.favorite),
  iconColor: Colors.red,
  onPressed: () {},
)

Changer la couleur de fond en utilisant le paramètre color :

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.green,
  onPressed: () {},
)

Il est également possible de personnaliser la forme, la taille et le style en utilisant les propriétés « shape », « iconSize » et « textStyle » respectivement.

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  splashColor: Colors.pink,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30.0),
  ),
  iconSize: 50,
  textStyle: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 20
  ),
  onPressed: () {
    // action lorsque le bouton est pressé
  },
)

Utiliser un widget de décoration

Utiliser un widget de décoration : Vous pouvez utiliser un widget de décoration pour ajouter des bordures, des ombres ou des arrière-plans à votre bouton IconButton. Par exemple, pour ajouter une bordure à votre bouton, vous pouvez utiliser le widget « Container » :

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.green, width: 2),
  ),
  child: IconButton(
    icon: Icon(Icons.add),
    onPressed: () {},
  ),
)

Utiliser des thèmes

Vous pouvez utiliser des thèmes pour personnaliser l’apparence de tous les boutons IconButton de votre application. Par exemple, pour changer la couleur de tous les boutons IconButton, vous pouvez utiliser la propriété « iconTheme » dans votre thème :

ThemeData(
  iconTheme: IconThemeData(
    color: Colors.green,
  ),
)

Utiliser un thème personnalisé pour changer l’apparence de tous les boutons IconButton dans l’application :

Theme(
  data: ThemeData(
    iconTheme: IconThemeData(
      color: Colors.blue,
    ),
  ),
  child: IconButton(
    icon: Icon(Icons.favorite),
    onPressed: () {},
  ),
)

Il est important de noter que vous pouvez combiner ces différentes méthodes pour personnaliser l’apparence de votre bouton IconButton selon vos besoins.

Exemples

Voici deux exemples d’application Flutter qui contiennent deux Widgets IconButton :

Exemple-01

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("Mon application"),
        ),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              print("Bouton ajouter pressé");
            },
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, nous utilisons le Widget IconButton pour créer un bouton qui affiche l’icône d’ajout (Icon(Icons.add)) et qui imprime un message lorsque l’utilisateur clique dessus (onPressed: () { print(« Bouton ajouter pressé »); }).

Exemple-02

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('IconButton Example'),
        ),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.favorite),
            onPressed: () {
              // Action to perform when the button is pressed
            },
          ),
        ),
      ),
    );
  }
}

Ce code crée une application qui contient un bouton en forme d’icône qui affiche un coeur lorsqu’il n’est pas pressé et un coeur rempli lorsqu’il est pressé. Lorsque l’utilisateur appuie sur le bouton, une action définie dans la méthode onPressed est déclenchée.

Flutter

Le widget IconButton dans Flutter