Flutter中如何为DatePicker和Checkbox添加SharedPreferences存储

核心实现逻辑 #

• 利用SharedPreferences存储Checkbox的布尔状态、DatePicker的日期字符串（DateTime转ISO标准格式，方便序列化/反序列化）
• 页面初始化时异步读取存储值，更新组件状态
• 状态变更（勾选Checkbox/选择日期）后，立即将新值写入SharedPreferences

完整代码示例 #

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

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

  @override
  State<PersistSettingsPage> createState() => _PersistSettingsPageState();
}

class _PersistSettingsPageState extends State<PersistSettingsPage> {
  bool _isAgreed = false;
  DateTime? _selectedDate;
  late SharedPreferences _prefs;

  @override
  void initState() {
    super.initState();
    _loadSavedData();
  }

  // 读取本地存储的状态
  Future<void> _loadSavedData() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      // Checkbox默认未选中
      _isAgreed = _prefs.getBool('agreement_status') ?? false;
      // 解析存储的日期字符串
      final savedDateStr = _prefs.getString('birthday_date');
      if (savedDateStr != null) {
        _selectedDate = DateTime.parse(savedDateStr);
      }
    });
  }

  // 保存Checkbox状态
  Future<void> _saveAgreementStatus(bool newValue) async {
    await _prefs.setBool('agreement_status', newValue);
  }

  // 保存选择的日期
  Future<void> _saveBirthdayDate(DateTime newDate) async {
    await _prefs.setString('birthday_date', newDate.toIso8601String());
  }

  // 唤起日期选择器
  Future<void> _openDatePicker() async {
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: _selectedDate ?? DateTime.now(),
      firstDate: DateTime(1900),
      lastDate: DateTime.now(),
    );

    if (pickedDate != null && pickedDate != _selectedDate) {
      setState(() {
        _selectedDate = pickedDate;
      });
      _saveBirthdayDate(pickedDate);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设置')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 同意条款Checkbox
            Row(
              children: [
                Checkbox(
                  value: _isAgreed,
                  onChanged: (value) {
                    if (value != null) {
                      setState(() => _isAgreed = value);
                      _saveAgreementStatus(value);
                    }
                  },
                ),
                const Text('是否同意服务条款'),
              ],
            ),
            // 生日选择器
            ListTile(
              title: Text(
                _selectedDate != null
                    ? '${_selectedDate!.year}-${_selectedDate!.month.toString().padLeft(2, '0')}-${_selectedDate!.day.toString().padLeft(2, '0')}'
                    : 'Birthday',
              ),
              trailing: const Icon(Icons.calendar_today),
              onTap: _openDatePicker,
            ),
          ],
        ),
      ),
    );
  }
}

关键注意事项 #

• 必须异步初始化SharedPreferences：不能在initState同步调用SharedPreferences.getInstance()，需通过异步方法完成读取
• 日期存储需转字符串：DateTime无法直接存入SharedPreferences，用toIso8601String()转成标准格式，读取时用DateTime.parse()解析
• 键名唯一：确保Checkbox和DatePicker的存储键名（如agreement_status、birthday_date）与下拉菜单的键名不重复
• 状态变更后立即保存：勾选Checkbox或选择日期后，在更新组件状态的同时调用保存方法，确保数据实时持久化

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