Flutter中如何为DropdownButton设置默认初始值（API数据场景）

假设你从API获取到如下格式的分类列表：

"homepage_categories": [
    {
        "id": 1,
        "name": "Electronics",
        "slug": "electronics",
        "icon": "fas fa-anchor",
        "image": "uploads/custom-images/electronics-2022-11-19-02-48-28-5548.png"
    },
    {
        "id": 2,
        "name": "Game",
        "slug": "game",
        "icon": "fas fa-gamepad",
        "image": "uploads/custom-images/game-2022-11-19-02-48-48-6382.png"
    },
    {
        "id": 3,
        "name": "Mobile",
        "slug": "mobile",
        "icon": "fas fa-mobile-alt",
        "image": "uploads/custom-images/mobile-2022-11-19-02-49-20-2538.png"
    },
    {
        "id": 4,
        "name": "Lifestyle",
        "slug": "lifestyle",
        "icon": "fas fa-home",
        "image": "uploads/custom-images/lifestyle-2022-11-19-02-49-38-3139.png"
    }
]

现在需要在Flutter的DropdownButton中展示这些分类，同时添加“选择分类”作为默认初始值。以下是尝试的代码，但未实现需求：

late List<CategoryModel> category;
late String value;

@override
void initState() {
  category = context.read<CategoryBrandCubit>().categoryBrandModel.category;
  value = category.first.id.toString();
  super.initState();
}


DropdownButton<String>(
          hint: const Text('Select Status'),
          isExpanded: true,
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          underline: const SizedBox(),
          value: value,
          onChanged: (String? val) {
            value = val!;
            bloc.add(StoreProductEventCategory(value));
            print('catVal: $value');
          },
        
          items: category
              .map(
                (e) => DropdownMenuItem<String>(
                  value: e.id.toString(),
                  child: Text(e.name),
                ),
              )
              .toList(),
        ),

请问如何正确实现为该DropdownButton设置默认初始值？

要实现带“选择分类”默认初始值的下拉按钮，需修改以下几个关键点：

1. 调整初始值变量类型与默认值

   • 将value改为可空类型String?，初始值设为null，这样DropdownButton才会显示hint提示文本，而不是默认选中第一个分类。

2. 修正提示文本

   • 将原hint的'Select Status'替换为'选择分类'，匹配需求的提示内容。

3. 完善状态更新逻辑

   • 更新onChanged时需调用setState刷新UI，同时增加非空判断，仅当选中有效分类时触发后续业务逻辑。

修改后的完整代码如下：

late List<CategoryModel> category;
String? value; // 改为可空类型

@override
void initState() {
  category = context.read<CategoryBrandCubit>().categoryBrandModel.category;
  // 初始值设为null，不选中任何分类
  super.initState();
}


DropdownButton<String?>(
          hint: const Text('选择分类'), // 修改提示文本
          isExpanded: true,
          icon: const Icon(Icons.keyboard_arrow_down_rounded),
          underline: const SizedBox(),
          value: value,
          onChanged: (String? val) {
            setState(() { // 调用setState更新UI
              value = val;
            });
            if(val != null){ // 仅选中有效分类时触发事件
              bloc.add(StoreProductEventCategory(val));
              print('catVal: $val');
            }
          },
        
          items: category
              .map(
                (e) => DropdownMenuItem<String>(
                  value: e.id.toString(),
                  child: Text(e.name),
                ),
              )
              .toList(),
        ),

另外，如果页面使用Bloc/Cubit管理状态，建议将value纳入状态管理体系，替代局部变量，让状态更新更规范可控。

内容的提问来源于stack exchange，提问作者Ali