Comment implémenter une liste déroulante (dropdown) avec Flutter ?

Comme tous les frameworks permettant de créer une interface graphique, Flutter propose tous les éléments nécessaires pour créer un formulaire. Parmi ceux-ci, la liste déroulante peut être utilisée pour que l'utilisateur puisse choisir une option parmi plusieurs possibles. Pour l'implémenter dans le framework, on utilise la classe "DropdownButton".

La classe "DropdownButton" accepte différents attributs qui permettent de la configurer. Le paramètre "items" va contenir la liste d'objets qui seront les valeurs disponibles dans la liste. Ces objets doivent être de la classe "DropdownMenuItem". On peut passer d'un tableau de chaînes de caractères à une liste d'objets de la classe "DropdownMenuItem" grâce à la méthode "map()", qui va permettre, pour le tableau, d'appliquer une fonction. Cette fonction va créer les objets qui seront incorporés dans la liste. La méthode "toList()" va ensuite convertir le tableau en liste. Si vous souhaitez effectuer des modifications dans votre application lorsqu'un utilisateur sélectionne une valeur dans la liste, vous devez le faire avec l'attribut "onChanged". L'attribut "value" permet quant à lui de sélectionner une valeur par défaut pour la liste.

new DropdownButton<String>(
  items: <String>['rouge', 'bleu', 'vert', 'jaune'].map((String value) {
     //La fonction crée un objet qui aura la même valeur et le même texte, à partir du tableau d'objet
     return new DropdownMenuItem<String>(
      value: value,
      child: new Text(value),
    );
  }).toList(),
  onChanged: (_) {},
  value: 'rouge'
)

Si vous souhaitez ajouter une valeur par défaut à la liste déroulante, elle doit être incluse dans la liste d'objets que vous fournissez. Sinon, vous obtiendrez le message d'erreur "Failed assertion: line X pos X: 'items == null || items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == value).length == 1': is not true." Si vous ne souhaitez pas que l'option par défaut soit sélectionnable, pour par exemple écrire un texte pour inviter l'utilisateur à parcourir la liste puis faire un choix, alors vous devez utiliser l'attribut "hint" et lui transmettre le texte.

//Solution en l'intégrant dans la liste d'objet (Vous devrez ensuite faire un contrôle)
new DropdownButton<String>(
  items: <String>['Sélectionnez une couleur', 'rouge', 'bleu', 'vert', 'jaune'].map((String value) {
     //La fonction crée un objet qui aura la même valeur et le même texte, à partir du tableau d'objet
     return new DropdownMenuItem<String>(
      value: value,
      child: new Text(value),
    );
  }).toList(),
  onChanged: (_) {},
)

//Solution avec l'attribut "hint" (la liste reste null tant qu'un objet n'a pas été choisi)
new DropdownButton<String>(
  hint: Text('Sélectionnez une couleur'),
  items: <String>['rouge', 'bleu', 'vert', 'jaune'].map((String value) {
     //La fonction crée un objet qui aura la même valeur et le même texte, à partir du tableau d'objet
     return new DropdownMenuItem<String>(
      value: value,
      child: new Text(value),
    );
  }).toList(),
  onChanged: (_) {},
)