Search code examples
drop-down-menudartflutterdropdown

How to read Drop-down selected index id?


I added the DropDownButton. It's working well. Data coming from the cache. How to get selected description id(id mean i)

Future<List<DataWorkTypes>> displayWorkTypes() async {
    var db = await db1;
    final List<Map<String, dynamic>> maps = await db.query('WorkTypesTable');

    return List.generate(maps.length, (i) {
      return DataWorkTypes(i: maps[i]['i'], d: maps[i]['d']);
    });
  }

I need to get i

  @override
  void initState() {
    getWorkTypes().then((result) {
      setState(() {
        workTypes = result;
      });
    });
  }

  Future getWorkTypes() async {
    List workType = (await HelperDatabase1().displayWorkTypes());
    for (int i = 0; i < workType.length; i++) {
      workTypes.add(workType[i].d);
    }
    return workTypes;
  }



Container(
            child: ButtonTheme(
              alignedDropdown: true,
              child: DropdownButton<String>(
                isExpanded: true,
                value: _workTypes,
                items: workTypes.map((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(
                      value,
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                }).toList(),
                onChanged: (value) => setState(() => _workTypes = value),
                style: Theme.of(context).textTheme.title,
              ),
            ),
          ),

Solution

  • You can get the index of the selection by using the indexOf() function of a List. For example, given your code:

    onChanged: (value) {
      int index = workTypes.indexOf(value);
      setState(() => _workTypes = value);
    },
    

    Just be aware that indexOf() returns the index of the first matching element from the list, so if you have duplicate Strings you will get the wrong index.

    Edit after question clarification

    A DropdownMenuItem can take the value of an object and still display just a String. For your code above, start by changing the type of _workTypes to DataWorkTypes and workTypes to List<DataWorkTypes>. Your code would end up looking roughly like this:

    @override
    void initState() {
      HelperDatabase1().displayWorkTypes().then((result) {
        setState(() {
          workTypes = result;
        });
      });
    }
    
    child: DropdownButton<DataWorkTypes>(
      isExpanded: true,
      value: _workTypes,
      items: workTypes.map((DataWorkTypes value) {
        return DropdownMenuItem<DataWorkTypes>(
          value: value,
          child: Text(
            value.d, // same label as before
            overflow: TextOverflow.ellipsis,
          ),
        );
      }).toList(),
      onChanged: (value) => setState(() {
        int index = value.i; // here is your index
        _workTypes = value;
      }),
      style: Theme.of(context).textTheme.title,
    ),