如何为我的下拉菜单添加自定义选项？

Question

So for now i have a dropdown that i fetch from api. Here is what i do

  Future<String> getSWData() async {
    var res = await http.get(
        Uri.encodeFull(Configuration.url + "api/getCategories"),
        headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);
    setState(() {
      data = resBody;
    });
    print(data);
    return "Sucess";
  }

then here is how i use it on dropdown

DropdownButtonHideUnderline(
      child: new DropdownButton(
      hint: new Text("Choose Category"),
      items: data.map((item) {
      return new DropdownMenuItem(
      child: new Text(item['categoryName']),
      value: item['categoryId'].toString(),
     );
  }).toList(),
  onChanged: (newVal) {
              setState(() {
                 mySelection = newVal;
             });
},
  value: _mySelection, ),),

Everything is working fine, but now i want to add All Category to my dropdown as an option, how can i achieve that ? thanks in advance

Answer 1

Your DropdownButton items is a list, so you can add to that list using ..add

   DropdownButtonHideUnderline(
          child: new DropdownButton(
          hint: new Text("Choose Category"),
          items: data.map((item) {
          return new DropdownMenuItem(
          child: new Text(item['categoryName']),
          value: item['categoryId'].toString(),
         );
      }).toList()
      ..add(DropdownMenuItem(child: Text("All Category"), value: 'allcategory')),
      onChanged: (newVal) {
                  setState(() {
                     mySelection = newVal;
                 });
    },
      value: _mySelection, ),),

Answer 2

1. You can use Cascade operator

DropdownButtonHideUnderline(
      child: new DropdownButton(
      hint: new Text("Choose Category"),
      items: data..add({
         'categoryName': 'All Categories', 
         'categoryId': 'AllCategories',
      }).map((item) {
      return new DropdownMenuItem(
      child: new Text(item['categoryName']),
      value: item['categoryId'].toString(),
     );
  }).toList(),
  onChanged: (newVal) {
              setState(() {
                 mySelection = newVal;
             });
},
  value: _mySelection, ),),

this solution will have the effect that "All Categories" item will be last.

2. You can add "All Categories" item in getSWData().

   ... 
   setState(() {
      data = List();
      data.add({
         'categoryName': 'All Categories', 
         'categoryId': 'AllCategories',
      });
      data.addAll(resBody);
    });
    ...

I would recommend the second approach, you get better readable code.