DropdownButton – créer un bouton avec une liste déroulante

DropdownButton est un bouton de menu déroulant que nous pouvons utiliser pour sélectionner une valeur parmi un ensemble de valeurs. Dans l’état par défaut, un bouton déroulant affiche sa valeur actuellement sélectionnée. Après avoir cliqué sur le bouton déroulant, il affiche un menu déroulant avec toutes les autres valeurs disponibles, parmi lesquelles l’utilisateur peut en sélectionner une nouvelle.

Un bouton déroulant Flutter est un widget de type générique, ce qui signifie que vous pouvez transmettre n’importe quel type de données selon vos besoins. Dans la liste déroulante du menu déroulant, les chaînes de caractères sont utilisées la plupart du temps.

Les propriétés de DropdownButton

Pour utiliser le widget dropdownbutton , nous pouvons utiliser des propriétés comme items et onChanged .
items: est de type List, où T est le type de valeur. Il peut s’agir d’un nombre, d’une chaîne ou de tout autre type. Pour chaque DropdownMenu item, vous devez définir la valeur et le widget enfant. La valeur doit être de type T, ce qui signifie qu’elle doit être la même pour toutes les options.

onChanged: est une fonction avec un paramètre. Lorsque vous sélectionnez une option, elle sera appelée avec la nouvelle valeur comme argument.

value: est l’élément actuellement sélectionné dans la liste d’options.

icon : pour afficher une petite icône à côté du bouton.

dropdownColor: définit la couleur du menu déroulant qui affiche la liste complète des éléments.

elevation: est un nombre entier qui définit à quelle hauteur au-dessus du canevas la liste déroulante flotte.

style: définit le style (police, couleur, etc.) à utiliser pour le texte dans le DropdownButton et la liste des éléments.

isExpanded: est une propriété booléenne ; si vrai, le DropdownButton occupe toute la largeur de son widget parent.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? dropdownvalue = 'Pomme';

  var items = [
    'Pomme',
    'Banane',
    'Fraise',
    'Orange',
    'abricot',
    'Melon'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DropdownButton"),
      ),
      body: Container(
        color: Colors.cyan,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DropdownButton(
                value: dropdownvalue,
                icon: Icon(Icons.keyboard_arrow_down),
                items: items.map((items) {
                  return DropdownMenuItem(value: items, child: Text(items));
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    dropdownvalue = newValue;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Le widget DropdownButton peut être utilisé dans votre application Flutter pour afficher et sélectionner une valeur unique parmi un large éventail d’options.

J’espère que ce tutoriel vous aidera à créer votre application en utilisant Flutter.