Flutter从JSON加载数据到DropdownButton触发LateInitializationError

错误原因 #

你使用late声明了_valores变量，但JSON数据是通过异步方法cargarValores()加载的，第一次Widget构建时_valores还未完成赋值，此时DropdownButton尝试调用_valores.map()就会触发未初始化错误。同时你的图标转换逻辑未覆盖JSON中的sports_soccer等字段，会导致图标显示异常。

解决方案 #

1. 修正图标转换逻辑

更新carga_deportes.dart中的_getIconDataFromString方法，补充JSON中对应的图标case：

static IconData _getIconDataFromString(String iconoString) {
  switch (iconoString) {
    case 'arrow_back':
      return Icons.arrow_back;
    case 'search':
      return Icons.search;
    case 'add':
      return Icons.add;
    case 'sports_soccer':
      return Icons.sports_soccer;
    case 'sports_basketball':
      return Icons.sports_basketball;
    case 'sports_tennis':
      return Icons.sports_tennis;
    default:
      return Icons.error;
  }
}

2. 重构状态类，处理异步加载逻辑

修改main.dart中的状态类，移除late修饰符，用空列表初始化_valores，并在数据加载完成前显示加载状态：

class _SelectorValoresState extends State<SelectorValores> {
  List<Valor> _valores = [];
  Valor _valorSeleccionado = Valor(nombre: 'Selecciona un valor', icono: Icons.error);

  @override
  void initState() {
    super.initState();
    cargarValores().then((listaValores) {
      setState(() {
        _valores = listaValores;
        if (_valores.isNotEmpty) {
          _valorSeleccionado = _valores.first;
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Selecciona un Valor'),
        ),
        body: Center(
          child: _valores.isEmpty
              ? const CircularProgressIndicator()
              : DropdownButton<Valor>(
                  value: _valorSeleccionado,
                  onChanged: (Valor? newValue) {
                    setState(() {
                      _valorSeleccionado = newValue!;
                    });
                  },
                  items: _valores.map<DropdownMenuItem<Valor>>((Valor value) {
                    return DropdownMenuItem<Valor>(
                      value: value,
                      child: Row(
                        children: [
                          Icon(value.icono),
                          const SizedBox(width: 10),
                          Text(value.nombre),
                        ],
                      ),
                    );
                  }).toList(),
                ),
        ),
      ),
    );
  }
}

关键注意点 #

• 避免用late处理异步加载的数据，改用初始空值+加载状态的组合，防止Widget构建时访问未初始化变量
• 异步操作完成后必须通过setState()更新UI，触发Widget重建
• 根Widget需要用MaterialApp包裹，提供Flutter所需的主题、导航等上下文环境
• 确保图标转换逻辑覆盖所有JSON中出现的图标字符串，避免显示默认错误图标

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