Les Types de boutons dans flutter

Les Types de boutons dans Flutter

Présentation

Les boutons sont l’élément de contrôle graphique qui permet à un utilisateur de lancer des événements tels que prendre des mesures, faire des choix et rechercher des éléments.
Ils peuvent être placés n’importe où dans notre interface utilisateur sous forme de boîtes de dialogue, de formulaires, de cartes et de barres d’outils.
Les boutons sont les widgets Flutter et ils font partie de la bibliothèque de conception de matériaux. Flutter a plusieurs types de boutons et considérons certains d’entre eux.
Avec la sortie de Flutter v1.22 en octobre 2020, un « nouvel ‘univers’ de boutons Material » a été mis à disposition. Dans ce tutoriel, nous vous présenterons les nouveaux composants de bouton Material disponibles dans Flutter, passerons en revue quelques exemples d’utilisation et démontrerons comment les nouveaux boutons Flutter améliorent l’expérience du développeur.
Le tableau ci-dessous montre les anciens widgets et thèmes associés à l’itération précédente des boutons Flutter aux côtés des nouveaux widgets et thèmes conçus pour les remplacer.

Noter que la dernière ligne contient le OutlineButton qui devient OutlinedButton(La lettre d ajouté au ancien nom). Si vous ne faites pas attention, vous risquez de manquer ce changement et de finir par écrire tout votre code avec l’ancien bouton.

Les types de boutons dans flutter

Il existe plusieurs types de boutons dans flutter, voici quelques exemples :

TextButton : est un widget intégré à Flutter qui tire sa conception de la bibliothèque de conception de matériaux de Google. Il s’agit d’un simple bouton sans bordure qui écoute les gestes onPressed et onLongPress .
OutlinedButton : Ce bouton a une bordure autour de lui. Il peut également être utilisé pour les actions secondaires ou les options de choix.
IconButton : Ce bouton est un bouton qui contient uniquement une icône. Il est généralement utilisé pour les actions rapides et les options de navigation. Il peut prendre en entrée un icône et une fonction onPressed pour déclencher une action lorsque le bouton est appuyé.
FloatingActionButton : Ce bouton est un bouton flottant qui peut être utilisé pour les actions principales dans une interface utilisateur. Il est généralement utilisé pour les actions comme « Ajouter » ou « Partager ».
DropdownButton : Ce bouton est un bouton déroulant qui peut être utilisé pour afficher une liste déroulante d’options. Il est généralement utilisé pour les sélections de filtre ou de tri.
CupertinoButton : Ce bouton est un bouton de style iOS pour les applications Flutter pour iOS. Il a une apparence similaire aux boutons iOS natifs.
ButtonBar : Ce bouton est un barre qui contient plusieurs boutons. Il est généralement utilisé pour organiser plusieurs boutons en groupe.
PopupMenuButton : Ce bouton est un bouton qui ouvre un menu contextuel lorsqu’il est appuyé. Il est généralement utilisé pour les options de menu contextuel.
CupertinoButton : Bouton iOS avec un style plat. Il peut prendre en entrée un enfant (texte ou icône) et une fonction onPressed pour déclencher une action lorsque le bouton est appuyé.

Le Widget ElevatedButton

Le widget ElevatedButton dans Flutter est un bouton de style Material Design qui a un effet d’élévation lorsqu’il est pressé ou survolé. Il a un aspect élevé et se distingue des autres boutons en raison de sa hauteur et de sa couleur de fond. Il peut être utilisé pour les actions telles que soumettre un formulaire, ajouter un élément à un panier d’achats, etc. Il prend en charge les interactions tactiles et peut également être personnalisé en termes de style, de taille et de couleur. Il peut également être utilisé avec des icônes ou des images pour une meilleure présentation visuelle.
Dans Flutter, le widget ElevatedButton a une propriété appelée « style » qui vous permet de personnaliser l’apparence visuelle du bouton. La propriété « style » prend une valeur d’énumération de « ElevatedButton.style« , qui peut être « ElevatedButton.style.normal » ou « ElevatedButton.style.outline« .
Le style.normal donne au bouton une couleur d’arrière-plan unie, tandis que le style.outline donne au bouton un arrière-plan transparent avec un contour. Vous pouvez définir le style du bouton en transmettant la valeur d’énumération souhaitée à la propriété style lors de la création du widget ElevatedButton.
Vous pouvez également utiliser ElevatedButton.styleFrom() pour créer un style personnalisé à l’aide de la configuration ElevatedButtonThemeData.
Pour utiliser le widget ElevatedButton, vous devez d’abord l’importer dans votre fichier dart :import 'package:flutter/material.dart';
Ensuite, vous pouvez l’utiliser dans votre code en créant un objet ElevatedButton et en spécifiant les propriétés souhaitées, telles que le texte affiché sur le bouton, la couleur et la fonction de rappel lorsque le bouton est pressé.
Exemple:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    backgroundColor: Colors.white,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  ),
  onPressed: () {},
  child: Text('Custom Style'),
),

Le Widget TextButton

TextButton est un widget intégré à Flutter qui tire sa conception de la bibliothèque de conception de matériaux de Google. Il s’agit d’un simple bouton sans bordure qui écoute les gestes onPressed et onLongPress . Il a une propriété de style qui accepte ButtonStyle comme valeur.
Le Widget TextButton dans Flutter est un bouton de type texte qui permet aux utilisateurs de cliquer sur un bouton pour effectuer une action. Il est similaire à un bouton normal, mais il ne contient pas d’icône ou d’image. Il est utilisé pour des actions simples telles que la validation d’un formulaire ou la soumission d’un formulaire.
Pour utiliser le Widget TextButton, vous devez l’inclure dans votre code en utilisant le code suivant:

TextButton(
  child: Text("Valider"),
  onPressed: () {
    // code à exécuter lorsque le bouton est cliqué
  },
)

Vous pouvez également personnaliser l’apparence du bouton en utilisant des propriétés telles que color, disabledTextColor, minWidth, etc.
Il est important de noter que le TextButton n’est pas prévu pour être utilisé avec des actions longues ou des actions qui ont des conséquences importantes. Pour ces cas, il est préférable d’utiliser un bouton FlatButton ou RaisedButton.
L’utilisation de ce Widget est décortiqué dans la leçon : Le widget TextButton dans Flutter

Le Widget IconButton

L’icône bouton (IconButton) est un bouton qui contient une icône à l’intérieur. Il est utilisé pour les actions rapides et les commandes contextuelles dans une application.
Un bouton d’icône est une image imprimée sur un widget Material qui réagit au toucher en se remplissant de couleur. Vous pouvez également personnaliser l’apparence et les effets tactiles du bouton.
Le Widget IconButton est un bouton qui contient un icône à l’intérieur. Il peut être utilisé pour afficher des actions telles que l’ajout d’un élément à une liste ou la suppression d’un élément. Il est très similaire à un bouton normal, mais il utilise une icône à la place d’un texte pour indiquer l’action. Il est facile à utiliser et à personnaliser en utilisant des propriétés telles que icon, onPressed, et tooltip.
Il peut également être utilisé avec des thèmes pour adapter la couleur de l’icône et des boutons en fonction de l’application.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    // code à exécuter lorsque l'utilisateur appuie sur le bouton
  },
),

Ce code crée un bouton avec un icône de coeur (Icons.favorite) qui exécute une fonction définie lorsque l’utilisateur appuie dessus. Vous pouvez remplacer l’icône par n’importe quel autre icône de la bibliothèque Icons de Flutter.

Vous pouvez remplacer l’icône par n’importe quelle autre icône disponible dans le package Icons de Flutter. Vous pouvez également personnaliser l’apparence du bouton en utilisant les propriétés de IconButton telles que la taille, la couleur, etc.

Le Widget OutlinedButton

Le widget OutlinedButton dans Flutter est un bouton qui a un contour autour de lui mais pas de fond rempli. Il est similaire au bouton ElevatedButton, mais avec un contour visible. Il peut être utilisé pour les actions secondaires ou les options de navigation.
Voici un exemple d’utilisation du widget OutlinedButton :

OutlinedButton(
  onPressed: () {
    // Code d'action lorsque le bouton est pressé
  },
  child: Text('Bouton Outlined'),
)

Vous pouvez également personnaliser les propriétés du bouton, telles que la couleur du contour, la couleur de fond et la police en utilisant les propriétés de style appropriées.

OutlinedButton(
  onPressed: () {
    // Code d'action lorsque le bouton est pressé
  },
  child: Text('Bouton Outlined'),
  borderSide: BorderSide(color: Colors.blue, width: 2.0),
  textColor: Colors.blue,
  highlightedBorderColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

Il est important de noter que le widget OutlinedButton n’a pas de propriété pour changer l’épaisseur du contour. Il est donc conseillé de définir une bordure personnalisée en utilisant la propriété borderSide

Le Widget floatingActionButton

Le bouton d’action flottant, parfois appelé par son acronyme FAB, a été détaillé précédemment dans les sections Scaffold et AppBar.
Ce widget peut être considéré comme faisant partie du Scaffold contrairement aux autres boutons qui, eux, s’intègrent dans la propriété body du Scaffold, au sein d’autres widgets le plus souvent.
Le floatingActionButton (FAB) est un bouton flottant qui est généralement utilisé pour effectuer une action principale dans une application. Il est souvent utilisé pour ouvrir une boîte de dialogue, une fenêtre modale ou pour effectuer une action spécifique, comme envoyer un message ou ajouter un élément à une liste.
Pour utiliser un FAB dans votre application flutter, vous pouvez utiliser le widget FloatingActionButton fourni par le package material.dart. Il est généralement utilisé en conjonction avec un Scaffold pour fournir une apparence de matériau.
Voici un exemple de code pour ajouter un FAB à une application flutter :

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Code à exécuter lorsque le bouton est appuyé
    },
    child: Icon(Icons.add),
  ),
);

Dans cet exemple, lorsque l’utilisateur appuie sur le bouton, une fonction spécifiée dans la propriété onPressed sera appelée. Vous pouvez également utiliser la propriété child pour ajouter un icône ou un autre widget à l’intérieur du bouton.

Il est également possible de personnaliser l’apparence du bouton en utilisant des propriétés telles que backgroundColor et elevation pour changer la couleur et l’effet d’ombre du bouton.

Pour d’information consulter la leçon le Widget floatingActionButton de flutter

Application

1-Créez un bouton ElevatedButton rouge avec un texte « Supprimer » qui affiche un message lorsqu’il est appuyé. Utilisez une couleur de fond rouge et une couleur de texte blanche.

Solution

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.redAccent,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              fixedSize: const Size(300, 50),
            ),
            child: const Text(
              'Cliquez ici',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

2-Créez un bouton IconButton avec un icône de flèche qui navigate vers une autre page lorsque vous appuyez dessus. Utilisez une couleur de fond transparente et une couleur d’icône rouge.

Solution

IconButton(
  icon: Icon(Icons.arrow_forward),
  color: Colors.blue,
  onPressed: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
  },
)

3-Créez un bouton en forme de cercle avec un icône de plus qui ajoute un élément à une liste lorsque vous appuyez dessus.

Solution

FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {
    list.add(newItem);
  },
)

4-Créez un bouton avec une bordure qui change de couleur lorsque vous appuyez dessus.

Solution

OutlinedButton(
  child: Text("Changer de couleur"),
  borderColor: _borderColor,
  onPressed: () {
    setState(() {
      _borderColor = _borderColor == Colors.black ? Colors.red : Colors.black;
    });
  },
)

5-Créez un bouton avec un texte « Soumettre » qui valide un formulaire lorsque vous appuyez dessus.

Solution

FlatButton(
  child: Text("Soumettre"),
  onPressed: () {
    if (_formKey.currentState.validate()) {
      // Soumettre le formulaire
    }
  },
)

Flutter

Les Types de boutons dans flutter