flutter - 如何通过颤动中的共享首选项保存选定的颜色?
问题描述
我在保存选定的颜色方面已经坚持了很长时间。我有一列按钮,允许用户选择颜色来更改框。我认为我可能必须将十六进制颜色值转换为 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),
),
),
),
],
),
],
),
);
}
}
解决方案
将颜色值初始化为整数,
//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
like,
Container(
height: 100,
width: 300,
color: Color(colorVal),
),
推荐阅读
- javascript - 使用 cdk 拖放时,整个 mat-dialog 变为拖动句柄
- javascript - React Native - 为 printAsync 表执行循环
- wordpress-gutenberg - 在设置页面中使用古腾堡编辑器
- java - 如何在 jenkins 中运行 ant build?
- javascript - 多个 if else 条件,cypress 中的承诺
- angular - 抽象基类上的 Angular 9 装饰器
- ibm-mq - 订阅名称以 XMS 开头:而不是 JMS:将 IBM.XMS 非托管客户端用于 .NET 4.7.2 时
- python - BERT 词嵌入的 PCA
- react-native - 在自己的服务器上使用 React Native 实现推送通知,无需 Internet 访问
- go - 切片在复制并使用副本后发生变化