Dropdown menu in flutter

Question

I have tried to build a dropdown button and a menu with it, where the value will be selected from the dropdown menu. The code is as below:

String valueChoose;
 List listItem = ["A", "B", "C", "D", "E"];

DropdownButton(
 hint: Text('Associate'),
 dropdownColor: Colors.white,
 icon: Icon(Icons.arrow_drop_down),
 iconSize: 20.0,
 style: TextStyle(
 fontSize: 22.0,
 color: Colors.black,
 ),
 value: valueChoose,
 onChanged: (newValue) {
 setState(() {
 valueChoose = newValue;
 });
 },
 items: listItem.map((valueItem){
 return DropdownMenuItem(
  value: valueItem,
  child: Text(valueItem),
  );
  }).toList(),
 ),

The error I'm facing is in the set state, where I've assigned newValue to the valueChoose.

A value of type 'Object?' can't be assigned to a variable of type 'String'.
Try changing the type of the variable, or casting the right-hand type to 'String'.

That is the error showing up for the newValue assinged in the set state. Please help regarding this, thanks in advance!

Below is the code, including the AlertDailog:

  class HomeScreen extends StatefulWidget {
   @override
   _HomeScreenState createState() => _HomeScreenState();
   }
    
   class _HomeScreenState extends State<HomeScreen> {
   String ? valueChoose;
    List listItem = [
        "A", "B", "C", "D", "E"
      ];
     void assignPopup(BuildContext context) {
     var alertDialog = AlertDialog(
      content: 
          Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
          Row(
          children:[
          Container(
          child: Text(
          'Action',
          ),
          ),
          ]
          ),
          Row(
          children:[
          Container(
          child: Card(
          elevation: 5.0,
          shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          ),
          child: TextField(
          decoration: InputDecoration(
          labelText: 'Please add any comments',
          ),
          ),
          ),
          ),
          ]
          ),
          Row(
          children:[
          Container(
          child: Text(
          'Assign To',
           ),
           ),
           ]
           ),
           Row(
           children: [
           Container(
           child: Card(
           elevation: 5.0,
           shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(10.0),
           ),
           child: DropdownButton<String>(
           hint: Text('Associate'),
           dropdownColor: Colors.white,
           icon: Icon(Icons.arrow_drop_down),
           iconSize: 40.0,
           style: TextStyle(
           fontSize: 18.0,
           color: Colors.black,
           ),
           value: valueChoose,
           onChanged: (newValue) {
           setState(() {
           valueChoose = newValue;
           });
           },
           items: listItem.map<DropdownMenuItem<String>>((valueItem){
           return DropdownMenuItem(
           value: valueItem,
           child: Text(valueItem),
            );
            }).toList(),
            ),
            ),
            ),
            ],
            ),
           ],
          ),
          );
          showDialog(
          context: context,
          builder: (BuildContext context) {
          return alertDialog;
           }
          );
        }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
              ...
              ...
         Container(
         child: TextButton(
         onPressed: (){
         assignPopup(context);
         },
         child: Text(
         'Assign',
          ),
          ),
          ),
         );
       }
      }

Answer 1

From the data that you provided I have created a example where I have used the alertdialog and inside it there is a drop down

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String valueChoose;
  List listItem = ["A", "B", "C", "D", "E"];

  void assignPopup(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return StatefulBuilder(builder: (context, setState) {
            return AlertDialog(
              content: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Row(children: [
                    Container(
                      child: Text(
                        'Action',
                      ),
                    ),
                  ]),
                  Row(children: [
                    Expanded(
                      child: Container(
                        child: Card(
                          elevation: 5.0,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: TextField(
                            decoration: InputDecoration(
                              labelText: 'Please add any comments',
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]),
                  Row(children: [
                    Container(
                      child: Text(
                        'Assign To',
                      ),
                    ),
                  ]),
                  Row(
                    children: [
                      Container(
                        child: Card(
                          elevation: 5.0,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),
                          ),
                          child: DropdownButton<String>(
                            hint: Text('Associate'),
                            dropdownColor: Colors.white,
                            icon: Icon(Icons.arrow_drop_down),
                            iconSize: 40.0,
                            style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.black,
                            ),
                            value: valueChoose,
                            onChanged: (newValue) {
                              setState(() {
                                valueChoose = newValue;
                              });
                            },
                            items: listItem
                                .map<DropdownMenuItem<String>>((valueItem) {
                              return DropdownMenuItem(
                                value: valueItem,
                                child: Text(valueItem),
                              );
                            }).toList(),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          });
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: TextButton(
            onPressed: () {
              assignPopup(context);
            },
            child: Text(
              'Assign',
            ),
          ),
        ),
      ),
    );
  }
}

So here in order to change dropdown value you have to use the StatefulBuilder which will change your dropdown value. you can check the above example and make changes as per your needs.

Please run the code to check the desired output.

Let me know if it works.