How can you change the value of the selected Choice

[aro-wolo]

Using setState is not working, the formState.value is not changing the value

I created a wrapper for the choice widget and change the state of the selected from the new widget, but for some reason, PromptedChoice.single wont set the new state, it will only change when i use the controls to manual change the control

Am trying to clear the selected data on the control

[davigmacode]

Would it be possible to get a look at your code?

[aro-wolo]

import 'package:flutter/material.dart';
import 'package:choice/choice.dart';

class SingleChoice extends StatefulWidget {
  final List<String> options;
  final String? selected;
  final ValueChanged<String?>? onChanged;
  final String? label;
  final bool? required;
  final FormFieldValidator<String>? validator;

  const SingleChoice({
    super.key,
    this.validator,
    required this.options,
    required this.selected,
    required this.onChanged,
    this.label = "Choose",
    this.required = false,
  });

  @override
  State<SingleChoice> createState() => _SingleChoiceState();
}

class _SingleChoiceState extends State<SingleChoice> {
  String? defaultValidator(value) {
    if (value?.isEmpty ?? value == null) {
      return 'Please select ${widget.label}';
    }
    return null;
  }

  String? selectedValue;
  void setSelectedValue(String? value) {
    setState(() => selectedValue = value);
  }

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

  @override
  Widget build(BuildContext context) {
    selectedValue = widget.selected;
    return Column(
      children: [
        FormField<String>(
          //autovalidateMode: AutovalidateMode.always,
          //initialValue: widget.selected,
          initialValue: selectedValue,
          onSaved: setSelectedValue,
          validator: (widget.required == true) ? defaultValidator : widget.validator,
          builder: (formState) {
            /* print("${widget.label} => formState.value -> ${formState.value}");
            print("${widget.label} => selectedValue ->${selectedValue}"); */
            // formState.didChange(selectedValue);
            return Column(
              children: [
                PromptedChoice<String>.single(
                  clearable: true,
                  searchable: widget.options.length > 20 ? true : false,
                  title: widget.label,
                  value: formState.value,
                  //value: selectedValue,
                  onChanged: (val) {
                    widget.onChanged?.call(val);
                    setSelectedValue.call(val);
                    formState.didChange(selectedValue);
                  },
                  itemCount: widget.options.length,
                  itemSkip: (state, i) =>
                      !ChoiceSearch.match(widget.options[i], state.search?.value),
                  itemBuilder: (state, i) {
                    return RadioListTile(
                      value: widget.options[i],
                      groupValue: state.single,
                      onChanged: (value) {
                        state.select(widget.options[i]);
                      },
                      title: ChoiceText(
                        widget.options[i],
                        highlight: state.search?.value,
                      ),
                    );
                  },
                  promptDelegate: (context, modal) {
                    FocusManager.instance.primaryFocus?.unfocus();

                    return showModalBottomSheet(
                      context: context,
                      isScrollControlled: true,
                      builder: (_) {
                        double heightFactor = .6;
                        final MediaQueryData mq =
                            MediaQueryData.fromView(View.of(context));
                        final double topObstructions = mq.viewPadding.top;
                        final double bottomObstructions = mq.viewPadding.bottom;
                        final double keyboardHeight = mq.viewInsets.bottom;
                        final double deviceHeight = mq.size.height;
                        if (widget.options.length < 4) {
                          heightFactor = .3;
                        } else if (widget.options.length < 5) {
                          heightFactor = .4;
                        } else if (widget.options.length < 7) {
                          heightFactor = .5;
                        } else if (widget.options.length < 10) {
                          heightFactor = .6;
                        } else if (widget.options.length < 15) {
                          heightFactor = .7;
                        } else if (widget.options.length < 25) {
                          heightFactor = .8;
                        } else if (widget.options.length > 25) {
                          heightFactor = .85;
                        }
                        final double modalHeight =
                            (deviceHeight * heightFactor) + keyboardHeight;
                        final bool isFullHeight = modalHeight >= deviceHeight;
                        return Container(
                          padding: EdgeInsets.only(
                            top: isFullHeight ? topObstructions : 0,
                            bottom: keyboardHeight + bottomObstructions,
                          ),
                          constraints: BoxConstraints(
                            maxHeight: isFullHeight ? double.infinity : modalHeight,
                          ),
                          child: modal,
                        );
                      },
                    );
                  },

                  /*                     anchorBuilder: ChoiceAnchor.create(
                    trailing: Icon(
                      Icons.keyboard_arrow_down,
                      color: AppColors.grey(opacity: .8),
                    ),
                    title: Txt(label!, size: 12),
                    //inline: true,
                    dense: true,
                  ), */
                  anchorBuilder: (state, openModal) {
                    return ListTileTheme(
                      data: const ListTileThemeData(
                        contentPadding: EdgeInsets.symmetric(
                          vertical: 2,
                          horizontal: 15,
                        ),
                        visualDensity: VisualDensity(horizontal: 0, vertical: -4),
                        titleTextStyle: TextStyle(
                          fontSize: 12,
                          color: Colors.black87,
                        ),
                        subtitleTextStyle: TextStyle(
                          color: Colors.black87,
                          //fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: const BorderRadius.all(Radius.circular(7)),
                          border: Border.all(
                            width: 0.5,
                            color: formState.hasError
                                ? Colors.red
                                : AppColors.grey(opacity: 0.5),
                          ),
                        ),
                        child: ChoiceAnchor.create(
                          valueTruncate: 2,
                          trailing: const Icon(
                            Icons.keyboard_arrow_down_sharp,
                            color: Colors.grey,
                          ),
                        )(state, openModal),
                      ),
                    );
                  },
                  //ChoiceAnchorBuilder
                  modalHeaderBuilder: ChoiceModal.createHeader(
                    elevation: 2,
                    automaticallyImplyLeading: false,
                    searchFieldBuilder: ChoiceModal.createSearchField(autoSubmit: true),
                    actionsBuilder: [
                      ChoiceModal.createSpacer(width: 5),
                    ],
                  ),
                ),
                Container(
                  padding: const EdgeInsets.fromLTRB(15, 5, 20, 0),
                  alignment: Alignment.centerLeft,
                  child: Txt(
                    formState.errorText ?? '',
                    color: Colors.red,
                    size: 11,
                  ),
                )
              ],
            );
          },
        ),
      ],
    );
  }
}

I customized it with this widget, as u can see

this is how am using it

 SingleChoice(
                                label: "Access Role",
                                options: roleList,
                                selected: selectedAccessRole,
                                onChanged: (value) {
                                  setState(() {
                                    selectedAccessRole = value;
                                  });
                                  
                                },
                                required: true,
                              ),

All the above work well

But if i set set state using another button to clear the value of selectedAccessRole='' it does not work, mind you i clear the value of selectedAccessRole using the code below

  setState(() {
    selectedAccessRole = '';
  });

thank you for your time

[davigmacode]

The reason you might be seeing this behavior is because you're using a StatefulWidget. To keep the UI updated when properties change, you can override the didUpdateWidget method in your State class.

You can add something like this to _SingleChoiceState

@override
  void didUpdateWidget(covariant SingleChoice oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.selected != widget.selected) {
      setState(() {
        selectedValue = widget.selected;
      });
    }
  }

[aro-wolo]

Thank you for the reply, Its still not working....

 print("${widget.label} => formState.value -> ${formState.value}");
 print("${widget.label} => selectedValue ->${selectedValue}");

formState.value does not change