Le Widget DropdownButton dans Flutter

Le Widget DropdownButton dans Flutter

1. Objectif

• Apprendre à utiliser le widget DropdownButton dans Flutter dans Flutter.
• Dans ce tutoriel, nous allons vous montrer comment ajouter DropdownButton, ajouter des éléments à l’intérieur ou styliser le bouton déroulant comme l’ajout d’une couleur d’arrière-plan, d’une bordure, d’un rayon de bordure.

2. Présentation

• Le Widget DropdownButton dans Flutter est un bouton qui affiche une liste d’options lorsque l’utilisateur le sélectionne.
• L’utilisateur peut alors choisir une option dans la liste en cliquant dessus. Le DropdownButton peut être personnalisé en modifiant son apparence, en ajoutant des icônes, des images et des sous-titres aux options de la liste. Lorsqu’une option est sélectionnée, le DropdownButton déclenche un événement qui peut être utilisé pour effectuer une action en fonction de l’option choisie.





3. Composants visuels d’un widget DropdownButton dans Flutter

• Les composants visuels d’un DropdownButton dans Flutter comprennent :
• Le bouton principal : c’est le composant visuel qui affiche le texte de l’option sélectionnée. Il peut inclure une icône ou toute autre décoration.
• La flèche de déroulement : c’est l’icône qui indique que le bouton principal est cliquable et qu’il déclenche l’affichage de la liste d’options. La flèche peut être personnalisée pour s’adapter au design de l’application.
• La liste d’options : c’est la fenêtre contextuelle qui s’affiche sous le bouton principal lorsque l’utilisateur clique dessus. Elle affiche toutes les options disponibles pour l’utilisateur.
• Les options : ce sont les éléments individuels de la liste d’options qui représentent les choix disponibles pour l’utilisateur. Chaque option peut être personnalisée pour s’adapter au design de l’application.

4. Comment créer un DropdownButton dans Flutter

• Pour créer un DropdownButton dans Flutter, procédez comme suit :
• Définissez une liste d’éléments que vous souhaitez afficher dans le bouton déroulant.

List items = ["Canada", "Russia", "USA", "China", "United Kingdom", "USA", "India"];

• Définissez une variable pour effectuer le suivi de l’élément actuellement sélectionné.

String selectedItem = 'Option 1';

• Créez le widget DropdownButton, pour cette étape je vais vous montrer deux méthodes différentes:
• Définition des éléments avec DropdownMenuItem
• Définition d’une liste
• Créez le widget DropdownButton et passez la liste des éléments et l’élément actuellement sélectionné.

DropdownButton(
  value: selectedItem,
  items: items.map((String item) {
    return DropdownMenuItem(
      value: item,
      child: Text(item),
    );
  }).toList(),
  onChanged: (String newValue) {
    setState(() {
      selectedItem = newValue;
    });
  },
),

• Dans le code ci-dessus, le widget DropdownButton prend en compte trois paramètres :
• value: élément actuellement sélectionné. Cette valeur sera mise à jour chaque fois que l’utilisateur sélectionnera un nouvel élément. « ÉlémentsDropdownMenuItem widget, qui prend en charge un value et un child paramètre.
• onChanged: fonction de rappel qui sera exécutée lorsque l’utilisateur sélectionnera un nouvel élément dans le bouton déroulant. Vous pouvez personnaliser davantage l’apparence du en modifiant le style, en ajoutant des icônes ou des images au DropdownMenuItem, etc.
• Dans le code ci-dessus, la méthode .map d’une liste peut être utilisée sur une liste pour transformer chaque élément de la liste et renvoyer une nouvelle liste avec les éléments transformés.
• Voici un exemple :mapList

List numbers = [1, 2, 3, 4, 5];
List doubledNumbers = numbers.map((number) => number * 2).toList();
print(doubledNumbers); // Output: [2, 4, 6, 8, 10]

• Dans cet exemple, nous définissons d’abord une liste d’entiers appelés numbers avec 5 éléments. Nous appelons ensuite la méthode map sur la liste et passons une fonction qui multiplie chaque élément de la liste par 2. Cela renvoie une nouvelle liste d’entiers appelée Numbersdoubled. Nous imprimons ensuite le contenu de numbersdoubled, qui devrait être [2, 4, 6, 8, 10].





5. Comment rendre les éléments d’un DropdownButton uniques à partir de la liste

• Si vous disposez d’une liste d’éléments et que vous souhaitez les utiliser pour créer un DropdownButton dans Flutter, vous pouvez rendre les éléments uniques en convertissant la liste en un ensemble, puis de nouveau en liste. Voici un exemple :

List items = ["apple", "banana", "cherry", "banana", "durian", "apple"];

List uniqueItems = items.toSet().toList();

DropdownButton(
  value: uniqueItems[0],
  items: uniqueItems.map((item) {
    return DropdownMenuItem(
      value: item,
      child: Text(item),
    );
  }).toList(),
  onChanged: (value) {
    // Do something with the selected value
  },
)

• Dans cet exemple, nous commençons par une liste d’éléments qui inclut des doublons (« pomme », « banane », « cerise », « banane », « durian », « pomme »). Nous convertissons d’abord la liste en un ensemble en appelant le ‘toList‘ , résultant en une liste d’articles uniques (« pomme », « banane », « cerise », « durian »).
• Nous créons ensuite un widget DropdownButton et passer les éléments uniques en tant qu’éléments avec paramètre ‘items‘. Nous utilisons la Méthode map pour transformer chaque élément en un widget DropdownMenuItem, avec le bouton value défini sur l’élément et le child défini sur un Text avec le texte de l’élément. Enfin, nous enveloppons le résultat de la map méthode dans un toList méthode pour convertir le résultat en une liste de ‘DropdownMenuItemDropdownMenuItem Widgets.
• En rendant les éléments uniques, vous vous assurez qu’il n’y a pas d’éléments en double dans la liste déroulante, ce qui peut éviter toute confusion pour l’utilisateur.

6. Comment styliser le widget DropdownButton dans flutter

• Pour styliser le widget DropdownButton dans Flutter, vous pouvez utiliser la propriété « style » du widget DropdownButton. La propriété style prend un objet TextStyle qui peut être utilisé pour modifier la couleur, la taille, la police et d’autres propriétés du texte du bouton.

DropdownButton(
  value: dropdownValue,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(
    color: Colors.deepPurple
  ),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String newValue) {
    setState(() {
      dropdownValue = newValue;
    });
  },
  items: ['One', 'Two', 'Free', 'Four']
    .map>((String value) {
      return DropdownMenuItem(
        value: value,
        child: Text(value),
      );
    })
    .toList(),
)

Dans cet exemple, le style de la couleur du texte est défini en utilisant la propriété « color » de l’objet TextStyle. La couleur de l’underline est également définie en utilisant une Container.

Enfin vous pouvez également personnaliser d’autres propriétés du DropdownButton telles que la taille de l’icône, l’élévation et d’autres propriétés.