Get Value of Selected DropdownMenuItem in Flutter

user_9694045 0
Viewed 10208

I am trying to build Multiple DropdownButton using ListView.builder as many time as user clicks on the float action button

new FloatingActionButton(
          onPressed: () {
            setState(() {
              counter++;
            });
          },
          child: new Icon(Icons.add),
      )

new ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return buildfields(index); },
              itemCount: counter,
              scrollDirection: Axis.vertical,
            )

new DropdownButton<String>(
            onChanged: (String value) { setState((){
              setUn();
              _unit = value;
            });
            },
            hint: new Text('Course Unit'),
            value: _unit,
            items: <String>["1", "2", "3", "4", "5"].map((String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text(value),
              );
            }).toList(),
          )

The problem am having is this, when user generates multiple DropdownButton and select the value for One, EVERY OTHER GENERATED DropdownButton CHANGES its Value to the newly selected value. How do i set a unique id for each generated DropdownButton?

dart flutter
2 Answers

Try this using the ListView.Builder and a list to save the values.

class MultipleDropDownPage extends StatefulWidget {
  MultipleDropDownPage({Key key}) : super(key: key);

  @override
  _MultipleDropDownPageState createState() => new _MultipleDropDownPageState();
}

class _MultipleDropDownPageState extends State<MultipleDropDownPage> {
  List<String> selectedValues;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    selectedValues = [];
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text('Multi Drop'),
      ),
      body: new ListView.builder(
        itemCount: selectedValues.length,
        itemBuilder: (context, index) {
          return new DropdownButton<String>(
            onChanged: (String value) {
              setState(() {
                selectedValues[index] = value;
              });
            },
            hint: new Text('Course Unit'),
            value: selectedValues[index],
            items: <String>["1", "2", "3", "4", "5"].map((String value) {
              return new DropdownMenuItem<String>(
                value: value,
                child: new Text(value),
              );
            }).toList(),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            selectedValues.add(null);
          });
        },
      ),
    );
  }
}
user_35725460 
List<DropDownMenuButton> listDropdownMenu = new List<DropDownMenuButton>;
List<String> listValue = new List<String>;

@Override
initState(){
listDropdownMenuBtn = getDropDownList();
listValue = getStringList();
}

   //Creating list of DropDownMenu
List<DropdownMenuButton> getDropDownList(){
var localList = new List<DropdownMenuButton>();
  //You can set your own max here
for(int a = 0;i<10; i++){
 localList.add(
 new DropdownButton<String>(
        onChanged: (String value) { setState((){
         listValue[i] = value;})
        },
        hint: new Text('Course Unit'),
        value: _unit,
        items: <String>["1", "2", "3", "4", "5"].map((String value) {
          return new DropdownMenuItem<String>(
            value: value,
            child: new Text(value),
          );
        }).toList(),
      )
     ))}
           return localList;
  }
List<String> getStringList{
 var localList = new List<String>();
for(int i=0,i<10, i++){
  localList.add("");
}
   return localList;
}}

Then you can add the DropdomMenuButton like this in buildFieldIndex

listDropdownMenu[index];

Hope it is helpful;

user_87735600
Related