Exemple de liste déroulante Flutter
Dans Flutter, le widget Dropdown est utilisé pour fournir une liste d'options à l'utilisateur. Ce widget est couramment utilisé dans les formulaires où l'utilisateur doit sélectionner une option dans une liste de choix. Le widget Dropdown est facile à utiliser et offre aux utilisateurs un moyen élégant et intuitif de sélectionner une option.
Création d'un widget déroulant
Créer un widget Dropdown dans Flutter est simple. Pour créer un widget Dropdown, vous devez spécifier les options qui seront affichées dans la liste. Voici un exemple de création d'un widget Dropdown :
String dropdownValue = 'One';
DropdownButton<String>(
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: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
Dans cet exemple, le widget DropdownButton est créé et le paramètre value est défini sur dropdownValue. Le paramètre items est une liste de chaînes qui seront affichées dans la liste déroulante. Le paramètre onChanged est défini sur une fonction qui sera appelée lorsque l'utilisateur sélectionnera une option dans la liste.
Personnalisation du widget déroulant
Le widget Dropdown peut être personnalisé pour s'adapter au style et à la conception de votre application. Voici quelques exemples de personnalisation du widget Dropdown :
Modification de l'icône du bouton déroulant
Pour changer l'icône qui s'affiche sur le bouton déroulant, vous pouvez utiliser le paramètre icon. Voici un exemple:
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_forward),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
Dans cet exemple, le paramètre icon est défini sur le widget Icon avec l'icône Icons.arrow_forward.
Changer la couleur du bouton déroulant
Pour changer la couleur du bouton Dropdown, vous pouvez utiliser le paramètre style. Voici un exemple:
DropdownButton<String>(
value: dropdownValue,
style: TextStyle(color: Colors.red),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
Dans cet exemple, le paramètre style est défini sur un objet TextStyle avec la color définie sur Colors.red.
Plus d'exemples
Ceci est un exemple de liste déroulante flottante. Grâce aux listes déroulantes, nous pouvons sélectionner un ou plusieurs éléments. Les listes déroulantes occupent normalement un espace plus petit que les autres types de widgets qui affichent des listes de données comme gridview et listview.
Cet exemple ne nécessite aucune dépendance.
(un). main.dart
C'est le seul fichier que vous devez créer dans ce projet.
Commencez par ajouter des importations :
import 'package:flutter/material.dart';
Ce material.dart nous donne accès à plusieurs composants de conception de matériaux flottants à utiliser, y compris la liste déroulante.
Créez MyAppState, en étendant la classe d'état. Le MyApp est un StatefulWidget personnalisé pour lequel l'état est en cours de création.
class MyAppState extends State<MyApp> {
Dans cette classe, définissez la liste des éléments qui seront affichés dans la liste déroulante :
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
Ajoutez ensuite deux autres champs d'instance, y compris une liste d'éléments de menu déroulant et une chaîne pour contenir l'élément sélectionné :
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
Remplacez ensuite la classe initState() :
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
Voici la méthode pour construire et obtenir les éléments du menu déroulant :
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
Voici la méthode pour changer les éléments déroulants :
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Remplacez enfin la méthode build() :
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
Voici le code complet pour main.dart :
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
}
Démo
Voici la démo
La licence pour le code ci-dessus est Apache Version 2.0.
Conclusion
Le widget Dropdown est un widget important dans Flutter qui est utilisé pour fournir une liste d'options à l'utilisateur. Ce widget est facile à utiliser et peut être personnalisé pour s'adapter au style et à la conception de votre application. En utilisant les exemples fournis, vous pouvez créer un widget Dropdown qui répond aux exigences de votre application.