Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.
És un element que es deplega per mostrar diverses opcions i permet que l'usuari en triï una. Té força paràmetres però aquí comentarem els que ens han semblat més útils. El paràmetre value permet indicar a quina variable estarà l'opció seleccionada; si aquesta variable té un valor no nul, aquest serà el que es mostrarà quan no està desplegat. El paràmetre hint conté el que es mostra (normalment un text; però pot xer altres coses, com una icona) quan no hi ha cap opció seleccionada i no està desplegat. El paràmetre items és on hi ha les opcions; aquestes han d'estar en format DropdownMenuItem i, per tant, si les tenim en una llista o un diccionari cal fer la conversió. El paràmetre onChanged permet definir la funció que s'executarà quan l'usuari seleccioni una opció.
Hi ha paràmetres que permeten establir com es visualitza el selector. El paràmetre isExpanded indica si l'amplada és la mínima necessària o bé ocupa tota l'amplada disponible.
Veiem com podem crear un menú desplegable a partir d'una llista:
...
class _PantPrincipalState extends State<PantPrincipal> {
final List<String> _opcions = ['Primavera', 'Estiu', 'Tardor', 'Hivern'];
String? _opcioSeleccionada;
String txt = "Cap";
...
@override
Widget build(BuildContext context) {
...
children: [
DropdownButton<String>(
value: _opcioSeleccionada,
hint: const Text('Estació preferida'),
items: _opcions.map<DropdownMenuItem<String>>((String valor) {
return DropdownMenuItem<String>(value: valor, child: Text(valor));
}).toList(), // Convertim el resultat a una llista d'ítems
onChanged: (String? novaClauSeleccionada) {
setState(() {
_opcioSeleccionada = novaClauSeleccionada;
txt = _opcioSeleccionada ?? 'Cap';
});
},
),
const SizedBox(height: 30),
Text("L'opció seleccionada és: $txt"),
...
Podem fer que hi hagi una opció seleccionada per defecte. En aquest cas, farem també que el selector ocupi tota l'amplada.
...
class _PantPrincipalState extends State<PantPrincipal> {
final List<String> _opcions = ['Primavera', 'Estiu', 'Tardor', 'Hivern'];
String? _opcioSeleccionada;
String txt = "Cap";
...
@override
void initState() {
super.initState();
_opcioSeleccionada = _opcions[1];
txt = _opcioSeleccionada ?? "Cap";
...
}
...
@override
Widget build(BuildContext context) {
...
children: [
DropdownButton<String>(
value: _opcioSeleccionada,
isExpanded: true,
hint: const Text('Estació preferida'),
items: _opcions.map<DropdownMenuItem<String>>((String valor) {
return DropdownMenuItem<String>(value: valor, child: Text(valor));
}).toList(), // Convertim el resultat a una llista d'ítems
onChanged: (String? novaClauSeleccionada) {
setState(() {
_opcioSeleccionada = novaClauSeleccionada;
txt = _opcioSeleccionada ?? 'Cap';
});
},
),
const SizedBox(height: 30),
Text("L'opció seleccionada és: $txt"),
...
En alguns casos ens pot interessar que el resultat de la selecció sigui diferent que el text que veu l'usuari; llavors, farem servir un diccionari i l'usuari veurà el valor però el programa treballarà amb la clau.
...
class _PantPrincipalState extends State<PantPrincipal> {
final Map<String, String> _opcions = {
'1': 'Primavera',
'2': 'Estiu',
'3': 'Tardor',
'4': 'Hivern',
};
String? _opcioSeleccionada;
String txt = "0";
...
@override
void initState() {
super.initState();
_opcioSeleccionada = '2';
txt = _opcioSeleccionada ?? '0';
...
}
...
@override
Widget build(BuildContext context) {
...
children: [
DropdownButton<String>(
value: _opcioSeleccionada,
isExpanded: true,
hint: const Text('Estació preferida'),
isExpanded: true,
items: _opcions.keys.map((String clau) {
return DropdownMenuItem<String>(
value: clau, // El valor intern de l'element serà la clau
child: Text(_opcions[clau]!), // El text que veurà l'usuari serà el valor
);
}).toList(), // Convertim el resultat a una llista d'elements
onChanged: (String? novaClauSeleccionada) {
setState(() {
_opcioSeleccionada = novaClauSeleccionada;
txt = _opcioSeleccionada ?? '0';
});
},
),
const SizedBox(height: 30),
Text("L'opció seleccionada és: $txt"),
...
En aquest apartat de l'exemple recuperar dades en format JSON es mostra com emprar el selector a partir d'un diccionari.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.