Flutter中为Dropdown集成SharedPreferences遇错误，求解决方案

常见类型错误原因 #

• 读取SharedPreferences时未处理null值，直接赋值给非可空变量
• 保存与读取的类型不匹配（比如存String却读int）
• 初始化状态时未正确异步加载保存的值

完整实现代码 #

首先确保pubspec.yaml中引入依赖：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 使用最新稳定版本即可

页面核心代码：

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

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

  @override
  State<DropdownPersistencePage> createState() => _DropdownPersistencePageState();
}

class _DropdownPersistencePageState extends State<DropdownPersistencePage> {
  final List<String> _dropdownOptions = ['howmany', 'one', 'two', 'three'];
  String? _selectedValue; // 用可空类型处理初始化前的状态

  @override
  void initState() {
    super.initState();
    _loadSavedSelection(); // 初始化时加载本地保存的值
  }

  // 从本地读取保存的选中值
  Future<void> _loadSavedSelection() async {
    final prefs = await SharedPreferences.getInstance();
    // 读取不到值时默认设为'howmany'
    final savedVal = prefs.getString('selected_dropdown') ?? 'howmany';
    setState(() => _selectedValue = savedVal);
  }

  // 将选中值保存到本地
  Future<void> _saveSelection(String value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('selected_dropdown', value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dropdown 状态持久化')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 处理加载中的状态，避免value为null导致报错
            _selectedValue == null
                ? const CircularProgressIndicator()
                : DropdownButton<String>(
                    value: _selectedValue,
                    items: _dropdownOptions.map((option) {
                      return DropdownMenuItem<String>(
                        value: option,
                        child: Text(option),
                      );
                    }).toList(),
                    onChanged: (newVal) {
                      if (newVal != null) {
                        setState(() => _selectedValue = newVal);
                      }
                    },
                  ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                if (_selectedValue != null) {
                  await _saveSelection(_selectedValue!);
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('值已保存，重启App验证')),
                  );
                }
              },
              child: const Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

关键注意事项 #

• 类型安全：统一用getString和setString处理字符串类型的选中值，避免类型转换错误；用?? 'howmany'兜底处理读取null的情况。
• 异步初始化：_loadSavedSelection是异步方法，必须在initState中调用，且通过setState更新UI，确保Dropdown能获取到正确的初始值。
• 空值处理：在build方法中判断_selectedValue是否为null，加载完成前显示加载指示器，避免因value为null导致Dropdown崩溃。
• 保存时机：点击Next按钮时触发保存逻辑，确保选中值被持久化到本地存储。

常见错误修复 #

如果遇到类型错误，逐一排查：

1. 确认_selectedValue是可空类型String?，因为异步加载完成前它的值为null。
2. 检查SharedPreferences的读写方法是否匹配：保存用setString，读取必须用getString，不能混用其他类型方法。
3. 确保Dropdown的value参数非空，要么通过默认值兜底，要么在UI中处理加载状态。

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