Dropdown menu in flutter - 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.

Answer 2

Specify the types of DropdownButton and that map
String? valueChoose;
List listItem = ["A", "B", "C", "D", "E"];
DropdownButton<String>(
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<DropdownMenuItem<String>>((valueItem) {
return DropdownMenuItem(
value: valueItem,
child: Text(valueItem),
);
}).toList(),
)

Answer 3

Declare variables outside the build method.
String? valueChoose;
List listItem = ["A", "B", "C", "D", "E"];
Inside the build method add the Dropdown widget, So the complete state class code would look like this,
class _DropdownViewState extends State<DropdownView> {
String? valueChoose;
List listItem = ["A", "B", "C", "D", "E"];
#override
Widget build(BuildContext context) {
return DropdownButton<String>(
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: (String? newValue) {
setState(() {
valueChoose = newValue;
});
},
items: listItem.map<DropdownMenuItem<String>>((valueItem){
return DropdownMenuItem(
value: valueItem,
child: Text(valueItem),
);
}).toList(),
);
}