如何在Flutter中用Shared Preferences保存用户选择避免热重启丢失

问题分析 #

你当前的代码无法正确持久化Color类型，因为SharedPreferences不能直接存储Color对象，需要先转换为它的value（int类型）；同时还需要补充笔画宽度strokeWidth的持久化逻辑，才能实现热重启后不丢失设置。

完整实现代码与步骤 #

1. 修正颜色的存储与读取逻辑
   将Color转为int类型的value存储，读取时再转回Color：

   Future<void> saveColorSelected() async {
     SharedPreferences prefs = await SharedPreferences.getInstance();
     // 存储Color的value值（int类型）
     prefs.setInt("colorValue", selectedColor.value);
   }
   
   Future<Color> getColorSelected() async {
     SharedPreferences prefs = await SharedPreferences.getInstance();
     // 读取后转回Color，默认值设为Colors.black
     int? colorValue = prefs.getInt("colorValue");
     return Color(colorValue ?? Colors.black.value);
   }
   

2. 添加笔画宽度的保存与读取
   直接使用SharedPreferences的setDouble和getDouble方法处理数值类型：

   Future<void> saveStrokeWidth() async {
     SharedPreferences prefs = await SharedPreferences.getInstance();
     prefs.setDouble("strokeWidth", strokeWidth);
   }
   
   Future<double> getStrokeWidth() async {
     SharedPreferences prefs = await SharedPreferences.getInstance();
     // 默认值设为初始化的3.0
     return prefs.getDouble("strokeWidth") ?? 3.0;
   }
   

3. 在初始化时恢复保存的设置
   在initState中调用读取方法，把保存的配置同步到状态中：

   @override
   void initState() {
     super.initState();
     _loadSavedSettings();
   }
   
   Future<void> _loadSavedSettings() async {
     Color savedColor = await getColorSelected();
     double savedWidth = await getStrokeWidth();
     setState(() {
       selectedColor = savedColor;
       strokeWidth = savedWidth;
     });
   }
   

4. 触发保存时机
   每当用户修改颜色或笔画宽度时，调用对应的保存方法，比如：

   // 切换颜色时触发保存
   void updateColor(Color newColor) {
     setState(() {
       selectedColor = newColor;
     });
     saveColorSelected();
   }
   
   // 调整笔画宽度时触发保存
   void updateStrokeWidth(double newWidth) {
     setState(() {
       strokeWidth = newWidth;
     });
     saveStrokeWidth();
   }
   

注意事项 #

• 确保已在pubspec.yaml中添加shared_preferences依赖，并执行flutter pub get完成安装
• 热重启时initState会重新执行，因此能自动读取之前保存的配置

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