Flutter DropDownButton - How to display the selected value when dropdown button gets disabled?
5,447
If you have your List
of items as a List
of Map
and generate the DropdownMenuItems
from it you will have an easier time identifying what's selected and set it as the disabledHint
:
class DropdownProblem extends StatefulWidget {
@override
_DropdownProblemState createState() => _DropdownProblemState();
}
class _DropdownProblemState extends State<DropdownProblem> {
bool _enabled = true;
int value;
List<Map> _items = [
{
"value": 11,
"text": 'asdf'
},
{
"value": 27,
"text": 'qwert'
},
{
"value": 31,
"text": 'yxcv'
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DropdownButton problem'),
),
body: Center(
child: Column(
children: <Widget>[
Text(
'Disabling the DropdownButton looses its selection',
),
Switch(
onChanged: (v) => setState(() {
_enabled = v;
}),
value: _enabled,
),
DropdownButton(
disabledHint: value != null
? Text(_items.firstWhere((item) => item["value"] == value)["text"])
: null,
items: _items.map((item) => DropdownMenuItem(
value: item["value"],
child: Text(item["text"]),
)).toList(),
onChanged: _enabled
? (v) => setState(() {
value = v;
})
: null,
value: value,
)
],
),
),
);
}
}
Author by
Jemolah
Updated on December 17, 2022Comments
-
Jemolah over 1 year
The Flutter DropdownButton shows some strange behaviour: it displays widget
disabledHint
instead of the selected value when it gets disabled (which must be done by settingonChanged
to null).How can I display the selected value?
Here is my sample code:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'DropdownButton disable problem', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _enabled = true; int value; List<DropdownMenuItem<int>> items = [ DropdownMenuItem( value: 11, child: Text('asdf'), ), DropdownMenuItem( value: 27, child: Text('qwert'), ), DropdownMenuItem( value: 31, child: Text('yxcv'), ) ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('DropdownButton problem'), ), body: Center( child: Column( children: <Widget>[ Text( 'Disabling the DropdownButton looses its selection', ), Switch( onChanged: (v) => setState(() { _enabled = v; }), value: _enabled, ), DropdownButton( items: items, onChanged: _enabled ? (v) => setState(() { value = v; }) : null, value: value, ) ], ), ), ); } }
-
Jemolah over 4 yearsThx. It works. Although I still have a bad feeling about building code which already must exist within DropdownButton class itself since it can display the selected value. Seems that there is space for some optimization within DropdownButton class.
-
J. S. over 4 yearsYou might be right. You can always propose changes on GitHub.