DropdownButton<String> not changing value onChanged - flutter

Question

I'm working with a DropDownButton, I have created a showModalBottomSheet that is called whenever I press the Add button. Inside of these Sheet I have inserted some textfields and a dropDownButton. The data from this sheet will be sent to firestore. I could successfully create the DropDownButton. But when pressed it doesn't change to the value I have selected.
The function:
void _CreateButtons(context){
TextEditingController _buttonName = TextEditingController();
TextEditingController _comodoName = TextEditingController();
String _iconName;
var _icons = ['None', 'Lock', 'LightBulb', 'Check', 'Cold', 'Alarm', 'Television', 'Bed'];
var _formKey = GlobalKey<FormState>();
showModalBottomSheet(context: context, builder: (BuildContext bc){
return Center(
child: Container(
color: Colors.black.withOpacity(0.3),
height: MediaQuery.of(context).size.height * 0.6,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 20, 12, 20),
child: Column(
children: [
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
maxLines: 1,
maxLength: 10,
controller: _buttonName,
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Button name",
enabledBorder: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(color: Colors.blue),
),
),
validator: (val){
if (val.length == 0){
return "Button name cannot be empty";
}else{
return null;
}
},
),
SizedBox(height: 20),
TextFormField(
maxLines: 1,
maxLength: 20,
textAlign: TextAlign.center,
controller: _comodoName,
decoration: new InputDecoration(
hintText: "Room name",
enabledBorder: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(color: Colors.blue),
),
),
validator: (val){
},
),
],
),
),
DropdownButton<String>(
items: _icons.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Row(
children: [
Icon(getIconData(dropDownStringItem)),
Text(dropDownStringItem),
],
),
);
}).toList(),
onChanged: (String name){
setState(() {
_iconName = name;
});
},
value: _iconName,
),
I call this function inside the stageful widget:
Padding(
padding: EdgeInsets.only(left: screenSize/1.2, top: screenSize*1.7),
child: FloatingActionButton(
backgroundColor: Color(0xFF0F52BA),
onPressed: (){
_CreateButtons(context);
},
child: Icon(Icons.add),
)
),
The _CreateButtons is inside the Stageful widget.

Answer 1

The problem is that you have used function to render UI and store state. But when you call setstate it rebuild all you UI of StatefulWidget. That is why your function - _CreateButtons called again with the same value. That is why, you should add all your bottom sheet code to different StatefulWidget to handle states correctly.
Move your codes to any StatefulWidget:
class MyCustomBottomSheet extends StatefulWidget {
createState() => _MyCustomBottomSheetState();
}
class _MyCustomBottomSheetState extends State<MyCustomBottomSheet> {
TextEditingController _buttonName = TextEditingController();
TextEditingController _comodoName = TextEditingController();
String _iconName;
var _icons = ['None', 'Lock', 'LightBulb', 'Check', 'Cold', 'Alarm', 'Television', 'Bed'];
var _formKey = GlobalKey<FormState>();
Widget build(BuildContext context) {
return Center(/// UI codes of build buttons);
}
}
and call this widget when your FloatingActionButton pressed like following:
FloatingActionButton(
backgroundColor: Color(0xFF0F52BA),
onPressed: () => showModalBottomSheet(context: context, builder: (ctx) => MyCustomBottomSheet()),
child: Icon(Icons.add),
)