Flutter：如何通过SharedPreferences保存Slider调节的字号值

步骤1：添加本地存储依赖 #

在项目的pubspec.yaml文件中添加shared_preferences依赖，用于持久化存储字号和开关状态：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 版本号可根据最新稳定版调整

执行flutter pub get完成依赖安装。

步骤2：修改页面逻辑，整合本地存储 #

将原有代码替换为以下完整实现，包含本地存储的读取、保存逻辑：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
// 注意：如果你的Switcher是第三方组件，需确保已引入对应的包

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

  @override
  State<FontSizeSettingPage> createState() => _FontSizeSettingPageState();
}

class _FontSizeSettingPageState extends State<FontSizeSettingPage> {
  bool toggle = false;
  int _value = 38;
  late SharedPreferences _prefs;

  @override
  void initState() {
    super.initState();
    _loadSavedSettings(); // 页面初始化时读取本地存储的设置
  }

  // 从本地存储读取保存的字号和开关状态
  Future<void> _loadSavedSettings() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      toggle = _prefs.getBool('fontSizeToggle') ?? false;
      _value = _prefs.getInt('fontSizeValue') ?? 38;
    });
  }

  // 保存开关状态到本地存储
  Future<void> _saveToggleState(bool value) async {
    await _prefs.setBool('fontSizeToggle', value);
  }

  // 保存字号到本地存储
  Future<void> _saveFontSize(int value) async {
    await _prefs.setInt('fontSizeValue', value);
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Switcher(
            size: SwitcherSize.small,
            curveType: Curves.fastLinearToSlowEaseIn,
            colorOn: Colors.green,
            colorOff: Colors.redAccent,
            iconOn: Icons.done,
            iconOff: Icons.dangerous,
            onChanged: (value) {
              setState(() {
                toggle = value;
              });
              _saveToggleState(value); // 保存开关状态
            },
          ),
        ),
        Expanded(
          flex: 12,
          child: Slider(
            thumbColor: Colors.red.shade900,
            value: _value.toDouble(),
            activeColor: Colors.black,
            inactiveColor: Colors.grey.shade400,
            onChanged: toggle // 直接用toggle控制Slider是否可交互
                ? (double s) {
                    setState(() {
                      _value = s.toInt();
                    });
                    _saveFontSize(_value); // 保存调整后的字号
                  }
                : null, // 关闭时Slider自动变为不可用
            min: 20.0,
            max: 60.0,
          ),
        ),
      ],
    );
  }
}

// 使用字号的地方保持原有逻辑：fontSize: _value.toDouble(),

关键修改点说明 #

• 本地存储初始化：在initState中调用_loadSavedSettings，读取之前保存的开关状态和字号，确保重启应用后设置不丢失。
• 开关状态保存：Switch的onChanged回调中，更新状态后立即调用_saveToggleState持久化状态。
• Slider交互控制：直接将onChanged设为toggle ? 回调 : null，比原有判断逻辑更简洁，关闭开关时Slider自动变为不可用状态。
• 字号保存：Slider调整时，更新状态后调用_saveFontSize保存当前字号到本地。

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