Flutter DropDownButton - 如何在下拉按钮被禁用时显示选定的值？

Question

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 setting onChanged 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,
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

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,
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

From flutter dropDown api docs:

If the onChanged callback is null or the list of items is null then the dropdown 
button will be disabled, i.e. its arrow will be displayed in grey and it will not 
respond to input. A disabled button will display the disabledHint widget if it is non-
null. However, if disabledHint is null and hint is non-null, 
the hint widget will instead be displayed.`