Flutter中DropdownButton绑定空动态列表触发非空错误排查

错误原因 #

1. 语法错误：onChanged回调函数末尾遗漏逗号，导致items参数被错误嵌套在onChanged代码块内，DropdownButton实际未获取到items参数，触发“items不可为null”的报错。
2. 状态管理不规范：
   • list0被声明为全局变量，会导致多个mainPage实例共享同一列表，不符合StatefulWidget的状态封装逻辑；
   • 未声明并初始化dropdownValue，DropdownButton缺少合法的value属性，即使列表有值也可能引发异常。

解决办法 #

1. 修复语法错误 #

在onChanged回调的闭合花括号后添加逗号，确保items是DropdownButton的独立参数。

2. 规范状态变量定义 #

将list0移至State类内部作为成员变量，同时声明并初始化dropdownValue。

3. 适配动态数据加载 #

如果是从网络或本地异步加载数据，需处理加载状态，避免列表为空时DropdownButton报错。

修正后的基础代码 #

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  // 将列表移至State内部，封装组件状态
  List<String> list0 = [];
  // 声明并初始化下拉选中值
  late String dropdownValue;

  @override
  void initState() {
    super.initState();
    // 初始化列表数据
    list0.addAll(["value1", "value 2"]);
    // 设置初始选中值为列表第一个元素
    dropdownValue = list0.first;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton<String>(
          // 绑定选中值
          value: dropdownValue,
          onChanged: (String? value) {
            setState(() {
              dropdownValue = value!;
            });
          },
          // 修复逗号问题，确保items参数正常传递
          items: list0.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

动态数据加载适配代码（模拟网络请求） #

class _MainPageState extends State<MainPage> {
  List<String> list0 = [];
  String? dropdownValue;
  // 标记数据加载状态
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟异步加载数据
    Future.delayed(const Duration(seconds: 1), () {
      setState(() {
        list0 = ["value1", "value 2", "value3"];
        dropdownValue = list0.first;
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: isLoading
            ? // 加载中显示进度指示器
              const CircularProgressIndicator()
            : DropdownButton<String>(
                value: dropdownValue,
                // 当选中值为空时显示提示文本
                hint: const Text("请选择"),
                onChanged: (String? value) {
                  setState(() {
                    dropdownValue = value;
                  });
                },
                items: list0.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
      ),
    );
  }
}

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