In my Flutter app the user can define a custom Theme by picking the colors from color pickers. After that they can save the ThemeData to a list and use it. The problem is that after the app restarts the ThemeData added by the user disappers. How can I store these ThemeData-s into the list to remain even after the app restarts?
Here is my code:
The ThemeData list:
I also have two ThemeData which is added by default.
List<ThemeData> toReturnTheme = <ThemeData>[];
List<ThemeData> getThemes() {
ThemeData szikraTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff5a89ba),
backgroundColor: Color(0xff5a89b0),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
ThemeData cobotTheme = ThemeData(
scaffoldBackgroundColor: Color(0xff207ABB),
backgroundColor: Color(0xff207ABB),
buttonColor: Color(0xfff78848),
accentColor: Colors.white,
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Color(0xff3a89ba),
),
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.white, fontFamily: 'Muli')));
toReturnTheme.add(szikraTheme);
toReturnTheme.add(cobotTheme);
return toReturnTheme;
}
void addToThemeList(ThemeData theme){
toReturnTheme.add(theme);
}
The Button that adds the new ThemeData to the list:
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Theme.of(context).accentColor,
)),
onPressed: () {
try {
ThemeData customTheme = ThemeData(
scaffoldBackgroundColor:
Color(bckgrndColor!.value),
backgroundColor: Color(bckgrndColor!.value),
buttonColor: Color(buttonColor!.value),
accentColor: Color(fontColor!.value),
floatingActionButtonTheme:
FloatingActionButtonThemeData(
backgroundColor: Color(arrowColor!.value),
),
textTheme: TextTheme(
bodyText2: TextStyle(
color: Color(fontColor!.value),
fontFamily: 'Muli'),
bodyText1: TextStyle(
color: Color(fontColor!.value),
fontFamily:
customThemeController.text)));
customThemeController.clear();
addToThemeList(customTheme);
saveTheme();
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
content: Text(
"themeCreated".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
} catch (e) {
final snackBar = SnackBar(
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.redAccent,
content: Text(
"chooseValidColors".tr().toString(),
));
ScaffoldMessenger.of(context)
.showSnackBar(snackBar);
}
setState(() {});
},
child: Text(
"createNewTheme".tr().toString(),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 25.0,
),
)),
),
And the ListView that displays the list of ThemeData:
Container(
width: MediaQuery.of(context).size.width / 2,
height: 100,
child: ListView.builder(
shrinkWrap: true,
itemCount: toReturnTheme.length,
itemBuilder: (context, int index) {
if (index < 2) {
return Container();
} else {
return Container(
child: Column(
children: [
ListTile(
title: GestureDetector(
child: Text(
toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString() ==
""
? "Custom Theme"
: toReturnTheme[index]
.textTheme
.bodyText1!
.fontFamily
.toString(),
style: TextStyle(
fontSize: 22.0,
color: Theme.of(context)
.accentColor),
),
onTap: () {
getThemeManager(context)
.selectThemeAtIndex(index);
},
),
trailing: GestureDetector(
child: Icon(
Icons.delete,
color: Theme.of(context).accentColor,
),
onTap: () {
toReturnTheme.removeAt(index);
setState(() {});
},
),
leading: Icon(
Icons.palette_outlined,
color: Theme.of(context).accentColor,
),
),
],
),
);
}
}),
),