如何通过 flutter 中的共享首选项保存选定的颜色?
How to save selected color via shared preferences in flutter?
我已经为保存 selected 颜色而苦恼了很长一段时间。我有一列按钮,允许用户 select 更改框的颜色。我认为我可能必须将十六进制颜色值转换为 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;
在共享首选项中保存颜色的整数值
Future<void> saveColor() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt("switchColorValue", lightGreenVal);
}
使用键值获取颜色的整数值,
Future<int> getColor() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return colorVal = prefs.getInt("switchColorValue");
}
你终于可以使用colorVal
了,
Container(
height: 100,
width: 300,
color: Color(colorVal),
),
我已经为保存 selected 颜色而苦恼了很长一段时间。我有一列按钮,允许用户 select 更改框的颜色。我认为我可能必须将十六进制颜色值转换为 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;
在共享首选项中保存颜色的整数值
Future<void> saveColor() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt("switchColorValue", lightGreenVal);
}
使用键值获取颜色的整数值,
Future<int> getColor() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return colorVal = prefs.getInt("switchColorValue");
}
你终于可以使用colorVal
了,
Container(
height: 100,
width: 300,
color: Color(colorVal),
),