Flutter Redux DropdownButton in Dialog

Viewed 556

In flutter_redux, how do I use StoreConnector to make a DropdownButton in a dialog?

I have a dialog in a stateful widget, so that when the DropdownButton changes, it gets updated rendered again.

Making the switch to Redux, I created two StoreConnectors, one for the selected value, one for the state.dispatch callback.

I had to add this code to the builder:

if(_selectedId == null) {
  _selectedId = size;
}

If that's not there, either the drop down doesn't change as it always has the redux state value, or the redux state value doesn't show in the drop down even though it's there.

Widget build(BuildContext context) {
    return SimpleDialog(
      title: new Text("User Settings"),
      children: <Widget>[
      // Redux store connector, to listen on state.size only, not entire state
      StoreConnector<AppState, dynamic>(
        converter: (store) => store.state.size,
        builder: (context, size) {
          if(_selectedId == null) {
            _selectedId = size;
          }
          print("prior to container: ${_selectedId}");
          return new Container(
              padding: const EdgeInsets.all(10.0),
              child: new DropdownButton<String>(
                hint: const Text("Select your size"),
                value: _selectedId,
                onChanged: (String changedValue) {
                  // this sets State for the parent widget, the dialog, so the
                  // dropdown runs it's render. It has nothing to do with
                  // redux, only updating the dropdown value
                  setState(() {
                    _selectedId = changedValue;
                    print(changedValue);
                    print(_selectedId);
                  });
                },
                items: _sizes,
              )
          );
        } // builder
      ),
      // need a second store connector, for dispatch ChangeSize action
      StoreConnector<AppState, dynamic>(
        converter: (store) {
          return (size) => store.dispatch(ChangeSize(_selectedId));
        },
        builder: (context, callback) {
          return new SimpleDialogOption(
            onPressed: () {
              // StoreConnector callback
              callback(_selectedId);
              // close dialog
              Navigator.pop(context);
            },
            child: const Text('Close'),
          );
        }  // builder
      )
      ],
    );
  } //widget build
0 Answers
Related