Flutter中用SharedPreferences保存多下拉框值出现断言错误怎么解决？

问题根源分析 #

你遇到的断言错误，大概率是这几个原因：

• 多个下拉框的状态变量初始化时没正确从SharedPreferences读取，导致初始值为null，而DropdownButton要求value不能为null（未设置hint的情况下）
• 保存/读取时用了重复的键名，导致两个下拉框的数据互相覆盖
• 异步读取SharedPreferences的时机不对，UI构建时还没拿到值，触发空值断言

解决步骤 #

1. 给两个下拉框分配独立的存储键，比如第一个用'selected_howmany'，第二个用'selected_which'，避免数据覆盖
2. 初始化时异步读取保存的值，在initState里完成，读取不到就用默认值兜底
3. 点击next时分别保存两个选中值，确保两个键对应各自的下拉框数据
4. 确保DropdownButton的value始终非空，用状态变量绑定，初始值用默认值

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

  @override
  State<DropdownPage> createState() => _DropdownPageState();
}

class _DropdownPageState extends State<DropdownPage> {
  // 下拉框选项列表
  final List<String> _howManyOptions = ['howmany', '1', '2', '3'];
  final List<String> _whichOptions = ['which', 'A', 'B', 'C'];

  // 状态变量，初始值设为需求默认值
  String _selectedHowMany = 'howmany';
  String _selectedWhich = 'which';

  @override
  void initState() {
    super.initState();
    // 页面初始化时读取已保存的选中值
    _loadSavedValues();
  }

  // 从SharedPreferences读取保存的选中值
  Future<void> _loadSavedValues() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      // 读取不到值时用默认值兜底
      _selectedHowMany = prefs.getString('selected_howmany') ?? 'howmany';
      _selectedWhich = prefs.getString('selected_which') ?? 'which';
    });
  }

  // 保存当前选中值到SharedPreferences
  Future<void> _saveSelectedValues() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('selected_howmany', _selectedHowMany);
    await prefs.setString('selected_which', _selectedWhich);
    // 保存完成后可执行页面跳转或关闭逻辑
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dropdown Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 第一个下拉框
            DropdownButtonFormField<String>(
              value: _selectedHowMany,
              items: _howManyOptions.map((option) {
                return DropdownMenuItem(
                  value: option,
                  child: Text(option),
                );
              }).toList(),
              onChanged: (value) {
                if (value != null) {
                  setState(() {
                    _selectedHowMany = value;
                  });
                }
              },
              decoration: const InputDecoration(labelText: 'How Many'),
            ),
            const SizedBox(height: 20),
            // 第二个下拉框
            DropdownButtonFormField<String>(
              value: _selectedWhich,
              items: _whichOptions.map((option) {
                return DropdownMenuItem(
                  value: option,
                  child: Text(option),
                );
              }).toList(),
              onChanged: (value) {
                if (value != null) {
                  setState(() {
                    _selectedWhich = value;
                  });
                }
              },
              decoration: const InputDecoration(labelText: 'Which'),
            ),
            const SizedBox(height: 30),
            // Next按钮
            ElevatedButton(
              onPressed: _saveSelectedValues,
              child: const Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• _loadSavedValues方法在initState中调用，通过异步读取确保UI构建时状态变量已有值，避免空值断言
• 保存时使用不同的键名存储两个下拉框的数据，彻底避免数据覆盖问题
• DropdownButton的value直接绑定状态变量，读取不到保存值时用默认值兜底，保证始终非空
• onChanged中增加null判断，避免空指针异常

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