Dropdown Menu inside dialog

Question

On pressing the elevated button, a need a dialogue to be opened, and inside this dialog there is a dropdown menu. Problem is, when an item is selected, the new item doesn't appear on the dropdown menu as the selected one. (always on the default one). Why?

      class _ReviewDetailsPageState extends State<ReviewDetailsPage> {
       @override
       Widget build(BuildContext context) {
       String _dropdownValue = 'One';
       return Scaffold(...

  
     ElevatedButton(
              onPressed: () async {
                await showDialog(
                    context: context,
                    builder: (context) {
                      return Dialog(
                        child: Container(
                            width: double.infinity,
                            height: 500.h,
                            child: Padding(
                              padding:
                                  EdgeInsets.fromLTRB(5.w, 5.h, 5.w, 5.h),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    "please select the type of order: ",
                                    style: GoogleFonts.lato(
                                      fontStyle: FontStyle.normal,
                                      color: Colors.grey[750],
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.w700,
                                    ),
                                  ),
                                  DropdownButton<String>(
                                    value: _dropdownValue,
                                    isExpanded: true,
                                    items: <String>[
                                      'One',
                                      'Two',
                                      'Free',
                                      'Four'
                                    ].map<DropdownMenuItem<String>>(
                                        (String value) {
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(value),
                                      );
                                    }).toList(),
                                    onChanged: (String? selectedvalue) {
                                      _dropdownValue = selectedvalue!;
                                      this.setState(() {
                                        _dropdownValue = selectedvalue;
                                      });
                                      print(_dropdownValue);
                                    },
                                  ),
                                ],
                              ),
                            )),
                      );
                    });
              },
              style: TextButton.styleFrom(
                  primary: Colors.white, backgroundColor: Colors.red),
              child: Container(
                width: 60.w,
                height: 20.h,
                alignment: Alignment.center,
                child: Text(
                  "Report",
                  style: GoogleFonts.lato(
                    fontStyle: FontStyle.normal,
                    color: Colors.white,
                    fontSize: 16.sp,
                  ),
                ),
              ),
            ),

the _dropdownvlue is changing by the selection to the correct one, however it doesn't reflect on the dropdown item shown.

Answer 1

To update the UI inside dialog, wrap the Dialog with StatefulBuilder and use its setsState

await showDialog(
        context: context,
        builder: (context) {
          return StatefulBuilder(
            builder: (context, setStateSB) =>  
              Dialog( .....
             

///....

onChanged: (String? selectedvalue) {
  _dropdownValue = selectedvalue!;
    setState(() { }); // update the main(state) UI
  setStateSB((){}); // update UI inside Dialog
    
},