如何通过颤动中的共享首选项保存选定的颜色？

Question

我在保存选定的颜色方面已经卡住了很长一段时间。我有一列按钮，允许用户选择颜色来更改框。我认为我可能必须将十六进制颜色值转换为 int 上的字符串，然后通过共享首选项保存。问题是，我不明白如何正确地为颜色执行此操作。我意识到它必须类似于任何其他共享首选项输入（关于字符串或 int）。

任何帮助将不胜感激。

代码如下：

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
  const HomePage({Key key, this.title}) : super(key: key);
  final String title;
}

//Green Theme
const lightGreen = const Color(0xff55efc4);
const darkGreen = const Color(0xff00b894);

//Blue Theme
const lightBlue = const Color(0xff74b9ff);
const darkBlue = const Color(0xff0984e3);

//Red Theme
const lightRed = const Color(0xffff7675);
const darkRed = const Color(0xffd63031);

class _HomePageState extends State<HomePage> {
  Color lightColor = lightGreen;
  String _lightColor = "lightColor";
  Color darkColor = darkGreen;
  bool isDark = false;

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

  Future<void> saveColor() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('switchColor', _lightColor);
  }

  Future<String> getColor() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return _lightColor = prefs.getString("switchColor");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text('theme switcher'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            height: 25.0,
          ),
          Container(
            height: 100,
            width: 300,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  lightColor,
                  darkColor,
                ],
              ),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Column(
            children: <Widget>[
              //Change Green
              RaisedButton(
                onPressed: () {
                  setState(
                    () {
                      lightColor = lightGreen;
                      darkColor = darkGreen;
                      saveColor();
                    },
                  );
                },
                textColor: Colors.white,
                padding: const EdgeInsets.all(0.0),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        lightGreen,
                        darkGreen,
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.center,
                  child: Text(
                    "Green",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
              ),
              //Change Blue
              RaisedButton(
                onPressed: () {
                  setState(
                    () {
                      lightColor = lightBlue;
                      darkColor = darkBlue;
                      saveColor();
                    },
                  );
                },
                textColor: Colors.white,
                padding: const EdgeInsets.all(0.0),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        lightBlue,
                        darkBlue,
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.center,
                  child: Text(
                    "Blue",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
              ),
              //Change Red
              RaisedButton(
                onPressed: () {
                  setState(
                    () {
                      lightColor = lightRed;
                      darkColor = darkRed;
                      saveColor();
                    },
                  );
                },
                textColor: Colors.white,
                padding: const EdgeInsets.all(0.0),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        lightRed,
                        darkRed,
                      ],
                    ),
                  ),
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.center,
                  child: Text(
                    "Red",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 10.0),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

将颜色值初始化为整数，

//Green Theme
const int lightGreenVal = 0xff55efc4;
const int darkGreenVal = 0xff00b894;
int colorVal = 0;

在共享首选项中保存颜色的 int 值

Future<void> saveColor() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setInt("switchColorValue", lightGreenVal);
}

使用键值获取颜色的int值，

Future<int> getColor() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return colorVal = prefs.getInt("switchColorValue");
}

终于可以用colorVal点赞了，

Container(
    height: 100,
    width: 300,
    color: Color(colorVal),
),