Flutter 中的自定义下拉小部件如何实现 setState

Question

I implemented a custom DropdownButton widget, but I don't know how to implement it's setState. I would like to pass items and selectedItem to the widget, and let it to handle it's own state. And retrieve selected item when needed by myDropdownButton.selectedItem. How I could implement it?

class MyDropdownButton extends StatefulWidget {
  final String selected;
  final List<MyDropdownItem> items;

  MyDropdownButton({Key key, this.selected, this.items})
      : super(key: key);

@override
  _MyDropdownButtonState createState() => _MyDropdownButtonState();
}

class _MyDropdownButtonState extends State<MyDropdownButton> {
  Widget build(BuildContext context) {
  return DropdownButtonFormField(
  value: widget.selected,
  onChanged: (String value) {
            widget.selected = value;
            },

But the selected is final and cannot be modified. How to implement it?

Thank you!

Answer 1

There are two questions here:

1. Updating the widget, using setState.

2. Passing the value back to the widget that is using the Dropdown with a callback. Medium Article on callbacks

Firstly to have the dropdown update, you need to call a setstate on the value change. But first, you'll need to receive the value passed, usually this is done in initstate.

Second, you need to use a callback function. The class that calls this widget/class can then receive and process that value

class MyDropdownButton extends StatefulWidget {
  final String selected;
  final List<MyDropdownItem> items;
  
  final Function(String) valueReturned; //callback function

  MyDropdownButton({Key key, this.selected, this.items, this.valueReturned})
      : super(key: key);

@override
  _MyDropdownButtonState createState() => _MyDropdownButtonState();
}

class _MyDropdownButtonState extends State<MyDropdownButton> {
  String sel;
  @override
  void initState() { 
    super.initState();
    sel = widget.selected; //get the value passed
  }
  Widget build(BuildContext context) {
  return DropdownButtonFormField(
  value: sel
  onChanged: (String value) {
    setState() {
            sel = value;
            widget.valueReturned(value); //this will trigger the callback function
            },
      }

In the code that calls the widget, you will need to listen to and handle the response.

Container(
  child: MyDropdownButton(items: items, selected: selected, valueReturned: _handleValueReturned))

_handleValueReturned(String value) {
    thingToUpdate = value;
}     

Answer 2

Define a local variable and initialize it in initState():

String _selected;

@override
void initState() { 
  super.initState();
  _selected = widget.selected; 
}

use setState to update your local variable as the selection changes:

onChanged: (String value) {
  setState(() {_selected = value;})
}

To retrieve the value, define a getter in your class:

String get selectedItem => _selected;

You can then access the selected item using myDropdownButton.selectedItem .

For more detailed explanation on implicit and explicit getters/setters see How do getters and setters change properties in Dart?